Angular2のクイックスタートとチュートリアルを実施 - その1

Javascript/TypeScript初心者が悪戦苦闘しながらAngular2との戦いの記録を意訳します。内容的に他の方の投稿と重複する部分もあります。

###進め方
この投稿では、Angular2のクイックスタートを説明します。ここで作ったアプリが後のチュートリアル「Tour of Heroes」の前提となります。

###対象
プログラムをほんのりかかじったことがあるが、Javascript初心者で、AngularJSにノンタッチかつ、英語にそこまで強くない人向けです。

###バージョン
Angular2.0.0-rc.5で実施しました。[^version]
[^version]: 意訳途中で正式版のAngular2がリリースされたため、このシリーズの投稿は様々なバージョンが混在している状態となっていますが、変更が必要な箇所はないと思います。

###本投稿の参照元(英語)
(バージョンが異なりますが、大きな影響はないと思います。)
[QUICKSTART - ts](
https://angular.io/docs/ts/latest/quickstart.html)

###実行結果
クイックスタートを完了すると以下リンク先のようなものが出来上がります。
Hello World的なものです
[live-examples](https://angular.io/resources/live-examples/quickstart/ts/plnkr.html)

#事前に必要なもの
| 必要なもの | バージョン | 概要 |
|:-----------|------------:|:------------|
| npm       |        3以上 |Javascriptのパッケージマネージャ|
| node.js   |      5以上   |サーバサイドでJavascriptを動かすための環境|
| TypeScript|    1.8.10以上|Javascriptを静的型付け言語にする言語|
 
※スクリプトエディタとしてAtomを使用しました。他にはVisualStudioやWebStormなどがある様です。
※必要なもののインストール方法は検索お願いします。

#ステップ1:プロジェクトの作成と設定
以下ディレクトリとファイルを作成します。
ファイルの中身は、[こちら](https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files)からコピペしてください。

|#  | dir/file | 概要 |
|:--|:-----------|:------------|
|1|angular2-quickstart/|プロジェクトディレクトリ|
|2|#1/package.json|npmが使う定義ファイル<br>このアプリケーションが必要とするモジュール(ライブラリ)一覧|
|3|#1/systemjs.config.js|SystemJSの定義ファイル<br>SystemJSは,javascriptモジュール(ライブラリ)を動的に読み込むためのライブラリ|
|4|#1/tsconfig.json|typescriptが使う定義ファイル<br>javascriptのバージョンなどを指定する|
|5|#1/typings.json|typescriptの型情報定義ファイルを取得するための定義ファイル<br>使用するモジュールの型情報ファイルを取得するために必要<br>TypesScriptの型チェックで使用する|

package.jsonについての参考：
[NPM PACKAGES(英語)](https://angular.io/docs/ts/latest/guide/npm-packages.html)
[npm package.json 取扱説明書](http://liberty-technology.biz/PublicItems/npm/package.json.html)

SystemJS / systemjs.config.jsについての参考：
[SystemJS(英語)](https://github.com/systemjs/systemjs/blob/master/README.md)

tsconfig.jsonについての参考：
[TYPESCRIPT CONFIGURATION(英語)](https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#tsconfig)


コマンドライン(コマンドプロンプト、ターミナルなど)から、
`cd angular2-quickstart`し、
`npm install`コマンドを実行し、
必要なモジュールをインストールします。(結構サイズでかいです。)
以後カレントディレクトリは`angular2-quickstart`であることを前提とします。

#ステップ2: アプリケーションの作成
ディレクトリ`app`を作成します。

このディレクトリにスクリプトなどを作成していきます。
次にファイル：`app/app.module.ts`を作成します。

```ts:app/app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
```

`app.module.ts`は、アプリケーションの起点になるファイルです。
クイックスタートでは、以下を行っています。

 - モジュールのインポート・・・import {_クラス(モジュール名)_} from '*ディレクトリ/ファイル名(拡張子なし)*'の形で記載 
     - NgModule ・・・`@NgModule`デコレータを使用するために必要
     - BrowserModule ・・・ブラウザで動かすために必要。
     - AppComponent ・・・後ほど作成する部品。[^import]

 - NgModuleデコレータの定義
    - `@ほにゃらら`で、`ほにゃらら`部分をデコレートできる。`ほにゃらら`に引数を渡すイメージ
    - imports: 必要な他のモジュール
    - declarations: このモジュールに属するコンポーネント,ディレクティブ,パイプを指定する
       - コンポーネント: 表示する画面の一部をコントロールする。後ほど作成
       - ディレクティブ: htmlのタグの属性を書き換える
       - パイプ:シェルのパイプみたいなもの
    - bootstrap: ルート(エントリ)コンポーネントを指定

 - AppModuleクラスの宣言
    - Angularアプリは、ひとつのルートモジュールを持ち、ここでは`AppModule`とする。export宣言で外部からの参照ができるようになる

[^import]: 相対パスで、インポートファイルを指定する場合`./`が必要な様です。

#ステップ3: コンポーネントの作成
ファイル：`app/app.module.ts`を作成します。

```ts:app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent { }
```

Angularアプリは通常ひとつのルート部品をもちます。画面の一部分を動的に変化させたいhtmlテンプレートと一緒にコントロールします。クイックスタートでは以下を行っています。

 - モジュールのインポート
     - Component ・・・`@Component`デコレータを使用するために必要
 - Componentデコレータの定義
     - htmlのどの部分に対して、どんなhtmlテンプレートを使用し、コンポーネントをどう作成するかを宣言する
     - selector: 書き換え対象のHTML要素を特定するための文字列。今回の場合index.htmlに定義する、`my-app`要素を書き換える
     - template: 書き換え後の内容。動的に変化するものを含むのでJSPっぽい
 - AppComponentクラスの宣言
     - ここでの宣言により、AppModuleで使える

#ステップ4:アプリケーションの開始

ファイル`app/main.ts`を作成します。

```ts:app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
```

アプリケーションを動作させるための初期設定ファイルです。このファイルがAppModuleを呼び出します。
AppModule,AppComponentと`main.ts`を分けている理由は、今回main.tsをブラウザ用に作成しているからです。スマートフォンアプリ向けではApache Cordoveを使用するなど、書き換えが必要になります。
 
#ステップ5: webページの入り口を作る

プロジェクトルートフォルダ(angular2-quickstart)に`index.html`を作成します。

```html:index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
```

要点は以下のとおりです。

 - Javascriptライブラリについて
    - core-js: ブラウザ間の差を埋めるためのライブラリ
    - zone.js ,reflect-metadata: Angularで必要なライブラリ
    - SystemJS: モジュールのロードで必要なライブラリ
 - systemjs.config.jsとhtml内のスクリプトにより、appディレクトリ内のmain.jsが呼ばれる
 - `<body>`タグ内の`<my-app>`タグが`AppComponent`により書き換えられる
   - (なお`<my-app/>`の様な書き方はエラーになる様です。)


##スタイルシートの追加

index.htmlから呼ぶスタイルシートを定義します。

```css:styles.css

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
```

#ステップ6: アプリケーションの起動

以下のコマンドをプロジェクトディレクトリ(angular2-quickstart)内で実行してください。

`npm start`

このコマンドはpackage.jsonで定義され、以下のプロセスがパラレルで起動します。

 - TypeScriptコンパイラー(ウォッチモード)
 - lite-serverと呼ばれる静的ファイルサーバ: スクリプトなどファイルが変更されるたびに、ブラウザを更新する

コマンド実行により、自動的にブラウザが立ち上がり、My First Angular2 Appの文字が表示されれば完成です。

---
本章は以上です。[次章](http://qiita.com/gambare/items/52ab19f8937ffc228cec)では、アプリケーション「Tour Of Heroes」を通して、もう少し実践的なAngular2アプリケーションを作成します。

---