開発ツール(IDE)
WebStormがおすすめ(PhpStormはWebStormを内蔵しているので、PHP開発者はPhpStormにするとお得)。
- コード補完、構文エラー等の表示、ライブラリ・フレームワーク対応、デバッガ統合
- AngularJSプラグインがある
アプリケーションの実行
Yeomanを使う場合
「yeoman server」コマンドでWebサーバが起動でき、ライブリロードも実行される。
※本書執筆時点では、yeomanは「yeoman」コマンドで実行していたが、Yeoman 1.0.0以降ではyeomanコマンドは無くなっている
Yeomanを使わない場合
自前でWebサーバを立ち上げる必要がある。本文中ではnodeで簡易的なサーバを書く方法と、pythonでサーバを立てる方法が紹介されている。
PHPがインストールされているPC(最近のOS XにはPHPが同梱されている)なら、「php -S」で、カレントディレクトリをドキュメントルートにしてWebサーバを立ち上げることができる。localhostでポートが808番なら、「php -S localhost:8080」でサーバを立てて、http://localhost:8080/でアクセスできる。
AngularJSアプリケーションのテスト
テストランナーはKarmaがおすすめ。複数のブラウザ上で高速にテストが実行できる。
ユニットテスト
AngularJSはデフォルトではJasmineスタイルのテストに対応している。以下がコード例。
describe("MyCOntroller:", function() {
it("正しく機能します", function() {
var a = 12;
b = a;
expect(a).toBe(b);
}
});
エンドツーエンドテスト
AngularJSにはシナリオランナーという仕組みが用意されている。これを使うと、ユーザーの操作をシミュレートできる。
シナリオランナーでは、Jasmineと同様の構文を使ってアプリケーションのふるまいを記述できる。同様のテスティングフレームワークとしてはSeleniumなどがあるが、AngularJS内臓のシナリオランナーは、さまざまな点でAngularJSにより適した機能をもっている。
コードのコンパイル(minify)
Closure Compiler等が利用できる。AngularJSで開発する上で特に注意が必要なのは、依存性注入の書き方について。
// minifyすると動かない
function MyController($scope, $resource) {}
// minifyしても動く($injectを使う場合)
function MyController($scope, $resource) {}
MyController.$inject = ['$scope', '$resource'];
// minifyしても動く(モジュールを利用)
myAppModule.controller('MyController', ['$scope', '$resource',
function ($scope, $resource) {}]);
minifyツールは、変数をminifyすることはあっても、文字列をminifyすることはない、という性質を利用している。
minifyを絶対に使用しないならminifyすると動かない書き方でもよいが、そうでないならminifyしても動く書き方をすべき。
デバッグのコツ
- デバッグを行う場合には必ず、最小化されていないバージョンのソースコードや依存先ライブラリを使用する
- ソースコードはHTMLの中に埋め込まず、独立したJavaScriptファイルに記述する
- ブレークポイントを利用する
- ブラウザの「すべての例外で停止」オプションを利用してみる
Batarang
BatarangというChrome拡張を使用すると、AngularJSアプリケーションの内部状態等を可視化できる。
Yeoman(ワークフローの最適化)
Yeoman関係は本書執筆時点と現在では大きく変わっている。Yeomanは現在ではscaffoldingにのみ使用され、依存関係の解決はBower、タスクの実行はGruntやGulpが担当する。
以下は、現時点(yeoman 1.3.3)での使い方。
※2015/04/29 generator-karmaが無いとWARNINGが出るのでgenerator-karmaを明示的にインストールするよう修正。環境:node.js v0.12.2、npm v2.7.4、yoeman v1.4.6、grunt-cli v0.1.13、grunt v0.4.5
Yeomanのインストール
npm install -g yo
AngularJSプロジェクトの新規作成
yoeman1.4.2現在、パッケージの依存管理はbowerで行う。yoemanではスキャッフォルドのためのテンプレートをジェネレータと呼んでいる。AngularJS用のジェネレータとして最も広く使われているのはgenerator-angular。また、テストランナーkarmaのためのジェネレータも必要(無くても動くが、WARNINGが出る)。
npm install -g bower generator-angular generator-karma
mkdir [アプリ名] && cd $_
yo angular [アプリ名]
Sass入れる? とか聞かれるので適当に選択すればOK。angular-routeは入れておいたほうがよい(後述)。
サーバの実行
Gruntを使う場合(yo angularするとGruntfile.jsが自動生成されるので、Gruntを使うのが手軽)。
npm install -g grunt-cli
grunt serve
ルート、ビュー、コントローラの追加
yo angular:route routeName
※yo angular:routeを実行するには、yo angularの時点でangular-routeを選択してインストールしておく必要がある。インストールされていない場合は、再度yo angularを実行すればよい。
テスト
grunt test
プロジェクトのビルド
- すべてのJavaScriptファイルのコードを連結し、1つのファイルを生成する
- ファイルのバージョン管理を行う
- 画像を最適化する
- アプリケーションキャッシュのためのマニフェストファイルを生成する
grunt build
AngularJSとRequireJSの統合
RequireJSで依存先の定義と管理を行う。Bowerがパッケージマネージャなのに対して、RequireJSはモジュールごとに使用するJavaScriptを管理する、といった使い方のツール。割とめんどくさそうだけど、規模が大きくなると必要かも。