angular2入門①【環境構築編】 - この素晴らしきフロントエンドに祝福を

ゼットンです。

ひょんなことからangular2の講師をすることになってしまいました。
まだangular2を触り始めて3ヶ月なのに・・・。正式リリースしてからまだ一ヶ月も経ってないのに・・・！
苦しかった破壊的変更の嵐・・・
なのに奴らときたらもうバージョン2.1β版とか出しちゃったりしてさ！！！

良いんですけどね、機能が改善されるのは良いことですよ。デグレは勘弁ですけど。
というわけで、備忘録も兼ねてつらつらangular入門なるものを書いていこうかと。

今回は、環境構築編です。サクッとHello,worldしちゃいましょう。
必要なものは下記の通り。

Node.js
angular-cli

Node.jsのインストール

下記のサイトから最新のインストーラをダウンロードし、
実行する。はい、終わり(雑)

http://nodejs.jp/nodejs.org_ja/docs/v0.10/

きちんとインストールされたか不安な方は
コマンドラインで下記のように実行してください。

>node -v
v5.0.0

↑こんな感じでバージョンが表示されたらOKです。

angular-cliの導入

これは何かというと、angular2の開発を助けてくれる有能なツールです。
公式HPはこちら：https://cli.angular.io/
具体的には下記のような機能があります。

プロジェクト雛形の自動生成 モジュール/コンポーネント/パイプ/サービス等の自動生成 ローカルサーバーの起動 テストの実行

など。他にもgit連携機能なんかもあります。（あんまり使ってないけど）
上記の機能はコマンド一発でできちゃいます。かなり便利。
では、インストールしていきましょう。

コマンドラインで下記を実行してください。

>npm install -g angular-cli

怒られたら、管理者権限で実行してください。

きちんとインストールされたか不安な方は
コマンドラインで下記のように実行してください。

>ng -v
angular-cli: 1.0.0-beta.15
node: 5.0.0
os: darwin

↑こんな感じでバージョンが表示されたらOKです。

プロジェクトの生成〜サーバーの起動

いっきに行くよー
コマンドラインで下記を実行してくださいまし。

>ng new sample-prj
>cd sample-prj
>ng serve

すると下記のようにサーバが起動するはず。

** NG Live Development Server is running on http://localhost:4200. **

8027ms building modules                 4ms add01687ms5172ms asset92ms emittinggHash: 8fce41954677c9def6f7

Version: webpack 2.1.0-beta.22

Time: 15501ms

[f:id:zetton110:20161003205732p:plain]Asset       Size  Chunks             Chunk Names
    main.bundle.js    2.83 MB    0, 2  [emitted]  main
styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
              inline.js    5.53 kB       2  [emitted]  inline
           main.map    2.89 MB    0, 2  [emitted]  main
         styles.map    14.1 kB    1, 2  [emitted]  styles
          inline.map    5.59 kB       2  [emitted]  inline
          index.html  486 bytes          [emitted] 
assets/.npmignore    0 bytes          [emitted] 

  Child html-webpack-plugin for "index.html":

         Asset     Size  Chunks       Chunk Names

    index.html  2.82 kB       0

http://localhost:4200/へアクセス！
すると下記のような画面が表示される。
f:id:zetton110:20161003205732p:plain