Hello Angular2 – 開発環境構築編

世はまさにJavascriptフレームワーク戦国時代。
新たなJSフレームワークが登場したと思えば、1年後にはオワコンとか言われていたりする、恐ろしい世界です。

React.js が流行ったと思えば、ReactはViewしか面倒見てくれないからFlux 入れようとか、
いやFluxちょっと使いにくいから Fluxxor 入れたほうが、いや Flummox の方がよさそうとか、redux だとか、もうわけわからん状態です。

実案件では今は Marionette.js を使っているんですが、そのことをフロントエンドエンジニア（jsの達人）の方に話したら、Backbone (Marionette) とかオワコンですよみたいな感じに言われたのが、ちょっとショックでした。

Javascriptフレームワークが乱立している世の中ですが、数あるフレームワークの中で人気を誇っているのがAngularとReactだと(私は）思っています。そのAngularの次期バージョンであるAngular2 のBeta版がついに登場したので、今回から数回にわたってAngular2を触ってみたいと思います。

なおAngular2はBeta版(2.0.0-beta.0)を利用していますが、今後大きな変更が入りサンプルコードが動かなくなる恐れがあります。

今回の目標

Angular2を開発できる環境を構築 & Angular2をとりあえず動かしてみる

Angular2 2.0.0-beta.0 を触ってみた感想

環境構築の前に、Angular2を触ってみた感想をつらつら書いておきます。

• Component志向
  • Angular1にもdirectiveがありましたが、もっとComponent志向な感じ
  • @Componentという、そのものずばりな感じのAnnotationとかある
• Angular1とは全くの別物
  • $scopeとかでてこなくなった
  • controllerなくなった。かわりにComponentにコードを書いていく
  • もう色々違いすぎて、Angular1の事忘れて新しいフレームワーク覚える気でいたほうがよさそう
  • Angular1と混ぜられるらしいが、ほんとかよと思う
• Angular2はTypescript押し
  • 公式ドキュメントもTypescript以外の言語は充実してない。。。
• Typescriptと組み合わせると、JavaとかC#っぽい
  • Annotationとかやたら多様する（javaっぽい)
  • Reactive Extensionの考え方が、かなり取り込まれている (C#っぽい）
  • エンタープライズな方に好まれそうな予感 (Angular1もそんな印象ですが）
• フロントエンドエンジニアの方に受けがいいのかは謎
  • 良くも悪くもjavaっぽい（DIとか、クラスめっちゃ分割するとことか）ので、普段JS書いてるフロントエンドエンジニアの方とかLL書いている方にうけが良いのかは謎

一応Angular2のコードがどんな感じかも載せておきます。
（ もっと見たい方は https://github.com/nishio-dens/angular2-rails-example/tree/master/frontend/src を参照ください）

// 商品一覧を表示するコンポーネント

import {ViewEncapsulation, Component, OnInit} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import {ProductService} from '../../services';
import {Product} from '../../models';

const templateUrl = require('./products.html');

@Component({
  moduleId: module.id,
  templateUrl: templateUrl,
  directives: [
    CORE_DIRECTIVES
  ],
  providers: [
    ProductService
  ]
})

export class ProductsComponent implements OnInit {
  products: Product[];
  totalCount: number = 0;

  constructor(private _productService: ProductService) {
  }

  ngOnInit() {
    this.getProducts();
  }

  getProducts() {
　　// fetchAllで(Rxの) Observable返ってくるようなメソッド書いてます
   // これをSubscribeする
    this._productService
      .fetchAll()
      .subscribe(d => {
        this.products = d.results;
        this.totalCount = d.totalCount;
      });
  }
}



// 商品を取得するサービス

import {Injectable} from 'angular2/core';
import {HTTP_PROVIDERS, Http, Request, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Product} from '../models';

@Injectable()
export class ProductService {
  constructor(private _http: Http) {
  }

  fetchAll() {
    return this._http
      .get('/api/products')
      .map(r => r.json())
      .map(r => {
        let results: Array<Product> = [];
        if (r.results) {
          results = r.results.map((v: any) => new Product(v));
        }
        return { totalCount: r.totalCount, results: results };
      });
  }
}

利用する言語・開発ツール

JavaScript界隈の開発ツールは変化が激しく、かつ環境設定が面倒くさいものが多いです。
流行り廃れも激しく、ちょっと前までイケイケだったbowerも、今ではオワコンとか言われてるくらい、流れが早いです。

どの言語・開発ツールを利用するか悩みどころですが、今回は以下ツールを使ってAngular2の開発環境を作ろうと思います。

• Angular2, 2.0.0-beta.0 (jsフレームワーク)
  • Angularという名前ながら、Angular1とは別物だと考えた方がよさそうです
  • なお、この記事を書いた時点ではAngular2はbeta版であるため、今後コードの書き方が大きく変わる可能性もあります
• Typescript (開発言語)
  • Angular2がTypescript押しなので、流れにのってTypescriptで書くことにします
• npm (パッケージ管理)
  • jsパッケージ管理の基本
• tsd (Typescriptの型定義管理)
  • typingsと悩みますが、なんとなくなれてるのでtsdを採用。型定義をいちいち管理しないといけないのが、Typescriptの面倒なところですね。
• Webpack (モジュール管理)
  • Browserifyと悩みましたが、Webpackの方が高機能そうなので採用
• tslint (Typescript 構文チェッカー)
  • これ以外しらない

その他実案件ではテストツールやら何やらを入れることになるかと思いますが、今回はAngular2を動かせる最小の構成で行きたいと思います。

Angular2 Starter

Angular2の開発がすぐに始められるよう、以下リポジトリに最小構成のスターターを作りました。

https://github.com/nishio-dens/angular2-minimum-starter

これらは angular2-webpack-starter にある設定をベースに作成しています。

上記リポジトリ内の構成は以下のとおりです。

.
├── LICENSE
├── package.json # packageを追加したい場合はここに追記
├── README.md
├── src          # この下にts(typescript)とhtmlを配置します
│   ├── app
│   │   ├── app.ts
│   │   └── hello.component.ts
│   ├── bootstrap.ts # Angular2はここから始まります
│   ├── polyfills.ts
│   ├── public
│   │   └── index.html
│   └── vendor.ts
├── tsconfig.json # Typescriptコンパイル設定ファイル
├── tsd.json # Typescript型定義管理ファイル
├── tslint.json # 構文チェッカー用ファイル
└── webpack.config.js # Webpack設定

各種ツールの詳細な使い方については、今回は割愛致します。

Angular2を動かすために必要なパッケージ (package.json)

Angular2.0.0-beta.0 を動かすためには、angular2以外にも以下ライブラリをインストールする必要があります。

• es6-promise と es6-shims
  • angular2はECMAScript6(ES6) の機能を使っています。ES6の機能を全てサポートしているブラウザは現状ないため、これらを利用する必要があります
  • 余談: ES6のブラウザサポート状況 http://kangax.github.io/compat-table/es6/
• es7-reflect-metadata
  • ES7の機能も一部利用しているため、このパッケージを入れる必要があります
• rxjs
  • Angular2では、多くの箇所にReactive Extensions(Rx)が取り入れられています
  • C# 開発者ならRxはお馴染みかもしれませんが、jsでもRxが流行り始めています
• zone.js
  • 非同期処理を上手に扱うための仕組みです

これらをインストールするために、package.jsonには以下を記載しておく必要があります。

// package.json より抜粋

"dependencies": {
  "angular2": "2.0.0-beta.0",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.33.3",
  "es7-reflect-metadata": "^1.2.0",
  "rxjs": "5.0.0-beta.0",
  "zone.js": "0.5.10"
},

Angular2を動かす

以下コマンドを流すことで、Angular2を試すことができます。
npm ( jsのパッケージ管理ツール ） はインストールしてある前提ですが、もしインストールしていない方は https://github.com/npm/npm を参考にインストールしてください。

git clone https://github.com/nishio-dens/angular2-minimum-starter.git
cd angular2-minimum-starter
npm install # npmインストール済みの前提
tsd install # 型定義インストール
npm start

npm startコマンドで開発用のwebserverが立ち上がるよう設定済みです。
http://0.0.0.0:3000 などにアクセスし、以下のようにHello Worldが表示されたら成功です。

無事動きましたでしょうか。
環境構築できましたので、今回はここまでとします。

サンプルではHello Worldと表示しているだけですが、このメッセージを表示するために2つのコンポーネントを作成しています。
また、Routingの設定もしてあり、 /#/ でトップページ(今回はHelloと表示する）を表示する設定もしています。

次回は、Componentの書き方、Routingの使い方について説明していきます。