TIM Labs

Hello Angular2 - 開発環境構築編

| コメント(0) | トラックバック(0)

世はまさに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が表示されたら成功です。

cc3a7603-1324-0dc8-20f4-a7f1714f3b68.png

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

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

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

トラックバック(0)

トラックバックURL: http://labs.timedia.co.jp/mt/mt-tb.cgi/486

コメントする

このブログ記事について

このページは、nishioが2016年1月 6日 02:48に書いたブログ記事です。

ひとつ前のブログ記事は「モンテカルロ木探索で一人不完全情報ゲーム「計算」を賢くする[15]」です。

次のブログ記事は「Ruby の method1 { |e| e.method2 } と method1(&:method2) は本当に等価なのか」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。