Angular 2 のクイックスタートをやってみる。 #JavaScript

はじめに

僕はJSフレームワークに乗り遅れている感じがするので、今回はAngularJSを触ってみることにした。

今まではRails+CoffeScript+jQueryで大体の事は対応できていたが、今後を考えるとSPA(Single Page Application)が弾頭に上がってくる事はほぼ間違い無いと思う。
(RailsもTurboinksを使っているので、ある意味SPAとも言える。Rails5のTurboinksはかなりSPAを意識しているっぽい。)

そう思って以前BackboneJSを触った事があるが、コード量の多さに辟易した経験がある。
（BackboneJSは固すぎる・・・）

今回のAngularJSがどんなものかわからないが、何はともあれ使ってみる事にする。

この記事では、Angular2クイックスタートをやってみる。

※僕は英語が苦手なので、フィーリングでサイトを読んでいきます。謝ってる箇所などがありましたらご指摘ください。

ファイルの配置

クイックスタートに書かれている通り

mkdir angular2-quickstart
cd    angular2-quickstart

を行う。
そしてJSファイルとHTMLファイルを作成してみる。

app.ts

import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

JSファイルだと思ったが、拡張子を見るとtsになっている。
どうやらTypeScriptで書かれているようだ。

TypeScriptは初めて触った。
CoffeeScriptと同じポジションらしいが、次のコードを見て驚愕する。

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('./app.ts');
    </script>
  </head>
  <body>
    <my-app>loading...</my-app>
  </body>
</html>

HTML内部でTypeScriptのコードであるSystem.import('./app.ts');を直接インポートしているのだ。
CoffeeScriptではコンパイルしたJSファイルをメインに使用するのだが、ここでは直接TypeScriptのコードを呼び出している。
これが驚愕した点だ。

もちろんだが、このファイルを直接開いてもloading...と表示されるだけだ。

live-server

この環境を動かすためには静的ファイルサーバーが必要になるようです。
なので、こちらを入れます。

$ npm install -g live-server

入れてたと思ったけどnode.jsを入れてなかったのでそこからスタートです。

$ brew install node
$ npm install -g live-server

インストールが終わったらサーバーを起動します。

$ live-server

ブラウザでlocalhost:8080にアクセスしたところMy First Angular 2 Appが表示されました。

中身を変えてみる

app.tsの中身を変えてみると、自動的にデータを読み込んでくれました。
てっきり一部分だけの切り替えかと思ったのですが、ページ全てを再読み込みされました。

仕組みはわからないのですが、101 Switching Protocolsというリクエストを投げているのでこれをlive-serverが監視しているのかもしれません。

また、chromeとfirefoxの両方で開いている場合は一方のブラウザはloading...と表示されてしまいました。

ここはクイックスタートを進めたいので、無視して進めます。

Ctrl+cでlive-serverを止めます。

構成を変えます

どうやら、この構成はあまりよろしくないとの事なので構成を変えます。

$ mkdir -p src/app

以下の構成に変更します。

angular2-quickstart
└── src
    ├── app
    │   └── app.ts
    └── index.html

コマンドは以下のとおりです。

$ mv app.ts src/app/
$ mv index.html src/

で、パッケージをインストールします。

$ npm init -y

これはGemfileやpom.xmlなどと同じようなパッケージ管理をするためのpackage.jsonを入れてくれるようです。
いつだかに使ったBowerはフロントエンド用の管理ソフトでしたが、今回のはどうなのでしょうか？
気にせず進みますw

npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 --save --save-exact

package.jsonに以下が追加され、node_modulesが作成されました。

  "dependencies": {
    "angular2": "2.0.0-alpha.44",
    "systemjs": "0.19.2"
  }

続けてlive-serverを入れていきます。

$ npm i typescript live-server --save-dev

さらに以下の内容が追加されました。

  "devDependencies": {
    "live-server": "^0.9.0",
    "typescript": "^1.7.3"
  }

クイックスタートにscript部分を以下のように書き換えろと書かれているので、package.jsonの中身を書き換えます。

{
  "scripts": {
    "tsc": "tsc -p src -w",
    "start": "live-server --open=src"
  }
}

ファイルのパスを書き換えます

構成が変わったのでファイルを書き換えます。

src/index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

これで全てローカルファイルをみるようになりました。
また、jsファイルを読み込むようになりました。

TypeScriptを読み込めなくなったので、tsconfig.jsonをsrc以下に配置します。

src/tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

コンパイル情報でしょうか？

とりあえず以下の構成になっていればOKです。

angular2-quickstart
├── node_modules
├── src
│    ├── app
|    │    └── app.ts
│    ├── index.html
│    └── tsconfig.json
└── package.json

JSのコンパイル

JSのコンパイルを行います。
以下のコマンドはルートで実行します。

$ npm run tsc

実行するとコンパイル監視状態になります。
なのでsrc/app/の中をみるとapp.jsができており、app.tsを書き換えるとapp.jsが書き換わります。

tsc -p src -wとpackage.jsonで指定しているため常駐されるようです。（-wをとれば常駐されません。）

ctrl+cで終了します。

実行

では、実際に実行します。

$ npm start

これでローカル内で動きました。
ただ、コンパイルは動いてないのでapp.tsを変更しても反映されません。

また、ルートへアクセスするとフォルダ情報が見えてしまいます。

最後に

とりあえず、いろいろ問題がありつつもクイックスタートを終えました。
（最後のおまけはやってませんが。）

これだけだと実運用には耐えれないですが、なんとなくの構想は理解できました。
引き続きチュートリアルを進める事で理解を深めていこうと思います。

RESTでデータを取り出して動的にページの情報を切り替えれないとAngularの恩恵はないですからね・・・。（まだ、理解してないだけかもしれませんが・・・）