Angular 2 のチュートリアル「It Takes Many Heroes」をやってみる。

## はじめに
[前回](http://qiita.com/syou007/items/7c7aa7348518c367c3ad)の続きでチュートリアルをやろうと思ったけど・・・

そろそろ無駄な事に気付いたので結果だけ記載。

## 出来上がった状態

```ts:src/app/app.ts
import {bootstrap, Component, FORM_DIRECTIVES, NgClass, NgFor, NgIf} from 'angular2/angular2';
class Hero {
  id: number;
  name: string;
}
@Component({
    selector: 'my-app',
    template: `
  <h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ng-for="#hero of heroes"
  [ng-class]="getSelectedClass(hero)"
  (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ng-if="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ng-model)]="selectedHero.name" placeholder="name"></input>
  </div>
</div>
`,
styles:[`
  .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
  .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
  .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
  .heroes .badge {
    font-size: small;
    color: white;
    padding: 0.1em 0.7em;
    background-color: #369;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -1px;
  }
  .selected { background-color: #EEE; color: #369; }
  `],
    directives: [FORM_DIRECTIVES, NgClass, NgFor, NgIf],
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
  public heroes = HEROES;
  public selectedHero: Hero;

  onSelect(hero: Hero) { this.selectedHero = hero; }
  getSelectedClass(hero: Hero) {
    return { 'selected': hero === this.selectedHero };
  }
}

var HEROES: Hero[] = [
  { "id": 11, "name": "Mr. Nice" },
  { "id": 12, "name": "Narco" },
  { "id": 13, "name": "Bombasto" },
  { "id": 14, "name": "Celeritas" },
  { "id": 15, "name": "Magneta" },
  { "id": 16, "name": "RubberMan" },
  { "id": 17, "name": "Dynama" },
  { "id": 18, "name": "Dr IQ" },
  { "id": 19, "name": "Magma" },
  { "id": 20, "name": "Tornado" }
];

bootstrap(AppComponent);
```

`NgClass, NgFor, NgIf`は`CORE_DIRECTIVES`にまとめれるので以下のように書ける。

```ts:src/app/app.ts
import {bootstrap, Component, FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/angular2';
class Hero {
  id: number;
  name: string;
}
@Component({
    selector: 'my-app',
    template: `
  <h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ng-for="#hero of heroes"
  [ng-class]="getSelectedClass(hero)"
  (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ng-if="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ng-model)]="selectedHero.name" placeholder="name"></input>
  </div>
</div>
`,
styles:[`
  .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
  .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
  .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
  .heroes .badge {
    font-size: small;
    color: white;
    padding: 0.1em 0.7em;
    background-color: #369;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -1px;
  }
  .selected { background-color: #EEE; color: #369; }
  `],
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES],
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
  public heroes = HEROES;
  public selectedHero: Hero;

  onSelect(hero: Hero) { this.selectedHero = hero; }
  getSelectedClass(hero: Hero) {
    return { 'selected': hero === this.selectedHero };
  }
}

var HEROES: Hero[] = [
  { "id": 11, "name": "Mr. Nice" },
  { "id": 12, "name": "Narco" },
  { "id": 13, "name": "Bombasto" },
  { "id": 14, "name": "Celeritas" },
  { "id": 15, "name": "Magneta" },
  { "id": 16, "name": "RubberMan" },
  { "id": 17, "name": "Dynama" },
  { "id": 18, "name": "Dr IQ" },
  { "id": 19, "name": "Magma" },
  { "id": 20, "name": "Tornado" }
];

bootstrap(AppComponent);
```

## まとめ
ここに書いている事は重要である事はわかるが、残念ながら僕が知りたい内容ではなかった。
とはいえ、ここに書いている構文は覚えておく必要があるので以下にまとめておく。

### AppComponent
bootstrapによってバインドするクラスを指定する。
クラス名は`AppComponent`である必要はないだろう。
疑問点としては、一つのクラスにつき一つの`bootstrap`しか有効にならないのだろうか？

### @Component
調べると`@View`などもあるみたいなのでもう少し綺麗に書けそうな気がする。
というか、この記法しかないのならかなり表現力に欠けるので多分あるだろう。

#### selector
バインドするセレクタをしていする。

#### template
適用するテンプレートをしていする。
これをもう少し切り離したい・・・。切り離さないと、巨大なテンプレートが生まれる事があるだろう。
また`@Component`を跨る場合の書式がわからない。

#### style
ここにstyleを書く事はないだろう・・・。（と信じたい）

#### directives
無駄なコンポーネントを使わないようにするためなのだと思うが、、、定義が少し面倒。

### `*ng-for="#hero of heroes"`
for-each構文を定義するためのものだろう。
他の言語に比べてタグ内に入れれるのは良いが・・・直感的に見えないのは僕だけだろうか？

### `[ng-class]="getSelectedClass(hero)"`
classなどを挿入するときに使う構文だろう。
やはり他の言語よりは短く書けるけれども・・・。
サーバーサイドを使わないでこれが書けるのは素晴らしいとは思うけど、、、

### `*ng-if="selectedHero"`
`ng-for`の`if`バージョン

強力であるがゆえにもう少し覚えておく必要がありそうだ。
なんにしても、今のところ僕好みの感じではないのでもう少し勉強をしておく必要がありそうだ。