【Aurelia】MacでAureliaのインストールからUnitテストまで

f:id:shinji-fsi-5761:20161008022107j:plain

10cmです｡こんにちは｡今回は､AureliaというJavaScriptのフレームワークについて､インストールの仕方からUnitテストの実行までを記載していきます｡

まず､『Aureliaってなに?』という方は､『参考』にホームページを記載しておきますので詳しくはそちらを｡

ざっくり言ってしまえばAngularJSと同じような特徴を持っており､ES6/7を取り込むフレームワークということです｡

Aurelia-cliのインストール
- 前準備
- インストール
プロジェクトの生成
実行
Unitテスト
まとめ
参考

Aurelia-cliのインストール

前準備

それではAureliaのインストールを行います｡Aureliaは､Node.js､NPMの環境が必要です｡Macであれば､公式にあるLTSをpkgでダウンロードできるためここでは割愛します｡

インストールができていれば､ターミナルで下記のコマンドを入力して確認してください｡(･･･は自分の環境のバージョンです)

$ npm --version ･･･ 2.15.9
$ node --version ･･･ 4.6.0

インストール

Aureliaを使うためのcli(コマンドラインインターフェース)､をインストールします｡以下のコマンドを実行します｡

$ npm install aurelia-cli -g

"aurelia-cli"が､Aureliaのプロジェクト管理ツール(でいいのかな?)となります｡インストールが完了すると以下のコマンドが実行できるようになります｡

$ au

実行するとヘルプが表示されます｡表示されない方はコマンドの確認やNode.js､NPM周りがどうか確認をお願い致します｡

また､aurelia-cliとは別に､gitのインストール､config設定もしておいてください｡(ここでは､詳細は書きません｡)

なぜgitが必要かというと､プロジェクトの生成途中でエラーとなります｡生成する際に裏で使っているっぽいです｡なので用意をしておいてください｡

プロジェクトの生成

Aureliaのプロジェクト生成を行います｡以下のコマンドを実行すると､プロジェクトに関する質問があります｡

$ au new プロジェクト名 (--here)

質問内容は以下となっています｡

1.Setupをカスタマイズするか

1-1.タスクランナーがBabelで､他はデフォルト(3.へ)
1-2.タスクランナーがTypeScriptで､他はデフォルト(3.へ)
1-3.すべてカスタマイズする

2.(1-3.を選択した場合)

2-1.タスクランナーの設定

Babel
TypeScript

2-2CSSプロセッサの設定

なし
Less
Sass
PortCSS

2-3.Unitテストの設定

karma, jasmine
なし

2-4.エディターの設定

VisualStudioCode
Atom
Sublime
WebStorm

3.プロジェクトの生成を行います｡よろしいですか?

1.はい
2.もう一度設定する
3.キャンセル

4.ツールの依存関係で必要があればインストールするか

1.はい
2.いいえ

(3.)で『はい』を選択するとプロジェクト名のディレクトリが生成されます｡

また､オプションで"--here"を付加すると､ディレクトリの作成は行われず､カレントディレクトリ直下にファイルの生成が行われます｡

(4.)については『はい』でよいかと｡中で生成されたpackage.jsonのモジュール(karmaとかgulpとか)をインストールしているはずです｡

これがないと後述の『実行』と『テスト』ができなくなってしまいます｡｡｡(あとで(4.)をいいえで実行してから'npm install'してみたんですが､実行時にエラーになってしまいました｡｡｡)

実行

では動作テストをします｡以下のコマンドをプロジェクトフォルダに移動してから実行してください｡

$ au run (--watch)

最後に以下のメッセージが出ていれば､成功です｡

Application Avaliable At: http://localhost:9000
BrowserSync Avaliable At: http://localhost:3001

では､ブラウザでlocalhost:9000に繋いでみましょう｡'HelloWorld'が画面に出てくるはずです｡
f:id:shinji-fsi-5761:20161014013419p:plain
また､実行時に'--watch'オプションを付けることで､ソースコードの修正を行ったとき､サーバーを再起動する必要なく最新のソースコードで再表示してくれます｡