読者です 読者をやめる 読者になる 読者になる

プログラマーの調べ物

プログラマーが調べ物をするときに役に立つサイトを作ります。

TypeScript+AngularでHelloWorldを表示する。

TypeScript

index.htmlはこんな感じ。

<!DOCTYPE html>
<html>

<head>
    <!-- The typescript compiler trancepiles source code into JavaScript right in the browser. -->
    <script src="//unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.21"></script>
    <script src="https://unpkg.com/typescript@2.0.0"></script>
    <script src="https://unpkg.com/systemjs@0.19.37/dist/system.src.js"></script>
    <script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: {
                emitDecoratorMetadata: true
            },
            map: {
                'rxjs': 'https://unpkg.com/rxjs@5.0.0-beta.12',
                '@angular/core': 'https://unpkg.com/@angular/core@2.0.0',
                '@angular/common': 'https://unpkg.com/@angular/common@2.0.0',
                '@angular/compiler': 'https://unpkg.com/@angular/compiler@2.0.0',
                '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@2.0.0',
                '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@2.0.0'
            },
            packages: {
                '@angular/core': {
                    main: 'index.js'
                },
                '@angular/common': {
                    main: 'index.js'
                },
                '@angular/compiler': {
                    main: 'index.js'
                },
                '@angular/platform-browser': {
                    main: 'index.js'
                },
                '@angular/platform-browser-dynamic': {
                    main: 'index.js'
                }
            }
        });
        System.import('main.ts');
    </script>
</head>

<body>
    <!-- When the application launched, the <hello-world> tag will be replaced with the 
         content of the template from the @Component annotation. -->
    <hello-world></hello-world>
</body>

</html>

以下の部分では、TypsScriptのソースコードJavaScriptに変換しています。

<script src="//unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.21"></script>
<script src="https://unpkg.com/typescript@2.0.0"></script>

SystemJSは動的にアプリケーションコードを読み込むライブラリです。

System.import('main.ts');

ここではSystemJSにmainモジュールを読み込むように指定しています。

main.tsは以下のとおりです。

import {Component} from '@angular/core';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// Component
@Component({
  selector: 'hello-world',
  //templateでは、コンポーネントでレンダリングするHTMLを指定します
  template: '<h1>Hello {{ name }}!</h1>'
})
class HelloWorldComponent {
  //テンプレートとのデータバインディングに使用します
  name: string;

  constructor() {
    this.name = 'Angular';
  }
}

// Module
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HelloWorldComponent ],
  bootstrap:    [ HelloWorldComponent ]
})
export class AppModule { }

// App bootstrap
platformBrowserDynamic().bootstrapModule(AppModule);

@Componentのselectorでは、hello-worldタグを見つけて、templateを組み込むようにしています。

これで、

npm install http-server -g でhttp-serverをインストールし、

http-serverというコマンドを実行します。

すると、localhost:8080

Hello Angular!

が表示されます。

TypeScriptでクラスやメソッドを定義する。

TypeScript

TypeScriptでクラスを作る構文は以下のとおりです。

class Person {
    firstName: string;
    lastName: string;
    age: number;
    ssn: string;

    constructor(firstName: string, lastName: string, age: number, ssn: string) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.ssn = ssn;
    }
}

var p = new Person("John", "Smith", 29, "124-45-67");

console.log(p)

TypeScriptはpublic, protected,privateを設定することができます。 オブジェクトのメンバーのアクセスコントロールのためです。

デフォルトでは全てのクラスメンバーはpublicアクセスとなります。

protectedが設定された場合は、同じクラスかサブクラスからしか見えません。 privateは同じクラスのみから見えます。

TypeScriptでメソッドを定義する

クラスの中で宣言された関数のことをメソッドと言います。 JavaScriptでは、メソッドはプロトライプの中で宣言する必要があります。

class MyClass {
    doSomething(howManyTimes: number) {
        console.log(howManyTimes);
    }

    static doAnything(howManyTimes: number) {
        console.log("anytime " + howManyTimes);
    }
}

var mc = new MyClass();
mc.doSomething(5);

MyClass.doAnything(100);

staticで宣言されたメソッドは、全てのインスタンスとクラスの間で共有されます。 そして、インスタンスを生成しなくても、メンバーにアクセスすることができます。

クラス内でメソッドを呼ぶ場合は、this.doAnyThing(100);というように、thisをつける必要があります。

ゲッターとセッターを追加する

class Person {
    constructor(public _name?: string) {
        
    }

    get name(): string {
        return this._name;
    }

    set name(value: string) {
        this._name = value;
    }
}

var p = new Person("Takashi");
var p2 = new Person();
p2.name = "Takeshi";

console.log(p.name);
console.log(p2.name);

Visual Studio CodeでTypeScript&Angular2の開発環境を準備する

Angular2 TypeScript

まずはシェルが必要

Node.jsをインストールする

既にインストール済の場合は、以下を参考にnodeの環境をすること。 npm必須。 14.04 - How do you update npm to the latest version? - Ask Ubuntu

typescriptはnpmでインストールする

npm install -g typescript

https://www.npmjs.com/package/typescript

Gitをインストールする

Code editorはVisual Studio Codeを使う

以下でダウンロード可能。TypeScriptやC#開発に使える。 code.visualstudio.com

TypeScriptを書いて動かしてみる

以下のサイトで練習するのがよい。 www.typescriptlang.org

Spring Bootを起動させてもすぐにShutdownしてしまう場合にやること

http://stackoverflow.com/questions/39363570/spring-boot-application-shutdown-immediate-after-starting

こちらの回答の通りにやったらうまくいった。

The only possible explanation i can think of is that tomcat embedded jar is not included in the dependencies/jar. Since you have already defined "spring-boot-starter-web" dependency, it should have transitively pulled the embedded tomcat dependencies as well. But somehow it is excluded.

Things to try out.

Execute "mvn dependency:tree" and check whether the tomcat dependencies exist and in "compile" scope
Change the spring boot starter version to 1.4.0.RELEASE.
 <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.4.0.RELEASE</version>
    </parent>

最初、1.5.0.RELEASEなんてしてたのを、1.4.0に変更。 Run as…のRun configurationでMaven Build で、Goalsのところに「dependency:tree」を書いてRun

GradleでTomcatプロジェクトを実行する

Gradle

gradle init --type java-library

で雛形を作ります。

次に、build.gradleを以下のように書きます。

/*
 * This build file was generated by the Gradle 'init' task.
 *
 * This generated file contains a sample Java project to get you started.
 * For more details take a look at the Java Quickstart chapter in the Gradle
 * user guide available at https://docs.gradle.org/3.3/userguide/tutorial_java_projects.html
 */

buildscript {
  repositories {
    jcenter()
  }
  dependencies {
    classpath 'com.bmuschko:gradle-tomcat-plugin:2.0'
  }
}


apply plugin: 'war'
apply plugin: 'com.bmuschko.tomcat'

repositories {
  mavenCentral()
}

dependencies {
  providedCompile 'javax:javaee-web-api:6.0'
  compile 'org.slf4j:slf4j-api:1.7.5'
  testCompile 'junit:junit:4.11'

  def tomcatVersion = '7.0.52'
  tomcat "org.apache.tomcat.embed:tomcat-embed-core:${tomcatVersion}",
         "org.apache.tomcat.embed:tomcat-embed-logging-juli:${tomcatVersion}"
  tomcat("org.apache.tomcat.embed:tomcat-embed-jasper:${tomcatVersion}") {
        exclude group: 'org.eclipse.jdt.core.compiler', module: 'ecj'
  }
}

src/main/java/exampleというディレクトリを作り、サーブレットを作成します。

HelloServet.javaです。

package exapmle;

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;

@WebServlet(name="HelloServlet", urlPatterns={"/hello"})
public class HelloServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res)
        throws ServletException, IOException {
            res.getWriter().print("Hello!");
    }
}

src/main/webapp/というディレクトリを作成し、webapp以下にindex.htmlを作成します。

index.htmlです。

<h1>Hello, tomcat plugin.</h1>

ここまでやったら、

gradle tomcatRunWar

を実行します。 省略形はgradle tRWでOKです。

ビルドを実行すると、

  • Tomcatのライブラリなど依存ライブラリのダウンロード
  • Webアプリケーションのビルドとパッケージング(WARファイルの作成)
  • 組み込みTomcatの起動
  • Webアプリケーション(WARファイル)を組み込みTomcatへデプロイ

という一連の手順がGradleによって自動的に行われます。

GradleをインストールしてEclipseに取り込む

Gradle

Gradleのインストール

brew install gradle

を実行。

コマンド

build.gradleに以下を記述。

task hello << {
    println 'Hello Gradle World!'
}

で、

gradle hello

を実行すると、task helloが実行される。

taskの一覧表示は

gradle tasks

ビルドスクリプトに定義されているプロパティの一覧を表示するタスクは以下。

gradle properties

GradleでJavaのプロジェクトを作成

以下のコマンドでJavaプロジェクトを作成できる。

gradle init --type java-library

Gradleで作成したプロジェクトをEclipseに追加する手順。

build.gradleに

apply plugin: 'eclipse'

を追記する。

次に、

gradle eclipse

を実行する。 すると、.classpathや.projectが作成される。

Eclipseで、"import" -> "Existing Projects into Workspace"をクリック。

gradle eclipseを実行したディレクトリを選択してインポートする。

gradle build

でGradleプロジェクトをビルドすることができる。

ThymeleafでListを繰り返して表示してみる。

Spring Framework

Thymeleafのth:eachを使って、繰り返し表示してみます。

package com.example;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.example.form.EchoForm;

@Controller
@RequestMapping("echo")
public class EchoController {

    @RequestMapping(method = RequestMethod.GET)
    public String viewInput(Model model) {
        
        List<String> nameList = new ArrayList<String>();
        nameList.add("藤本祥");
        nameList.add("中川淳一");
        nameList.add("安倍隆弘");
        
        model.addAttribute("nameList",nameList);
        
        return "echo/input";
    }

HTMLはこんな感じ。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link href="/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
</head>
<body>
<h2>Name List</h2>

<table class="tbtest">
<tr>
  <th>Name</th>
</tr>

<tr th:each="name : ${nameList}">
  <td th:text="${name}" class="tdtest"></td>
</tr>
</table>

</body>
</html>