AngularJSアプリケーション開発ガイド 第3章 AngularJSアプリケーションの開発

AngularJSアプリケーション開発ガイド

開発ツール(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スタイルのテストに対応している。以下がコード例。

エンドツーエンドテスト

AngularJSにはシナリオランナーという仕組みが用意されている。これを使うと、ユーザーの操作をシミュレートできる。

シナリオランナーでは、Jasmineと同様の構文を使ってアプリケーションのふるまいを記述できる。同様のテスティングフレームワークとしてはSeleniumなどがあるが、AngularJS内臓のシナリオランナーは、さまざまな点でAngularJSにより適した機能をもっている。

コードのコンパイル(minify)

Closure Compiler等が利用できる。AngularJSで開発する上で特に注意が必要なのは、依存性注入の書き方について。

minifyツールは、変数をminifyすることはあっても、文字列をminifyすることはない、という性質を利用している。

minifyを絶対に使用しないならminifyすると動かない書き方でもよいが、そうでないならminifyしても動く書き方をすべき。

デバッグのコツ

  • デバッグを行う場合には必ず、最小化されていないバージョンのソースコードや依存先ライブラリを使用する
  • ソースコードはHTMLの中に埋め込まず、独立したJavaScriptファイルに記述する
  • ブレークポイントを利用する
  • ブラウザの「すべての例外で停止」オプションを利用してみる

Batarang

BatarangというChrome拡張を使用すると、AngularJSアプリケーションの内部状態等を可視化できる。

Yeoman(ワークフローの最適化)

Yeoman関係は本書執筆時点と現在では大きく変わっている。Yeomanは現在ではscaffoldingにのみ使用され、依存関係の解決はBower、タスクの実行はGruntGulpが担当する。

以下は、現時点(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のインストール

AngularJSプロジェクトの新規作成

yoeman1.4.2現在、パッケージの依存管理はbowerで行う。yoemanではスキャッフォルドのためのテンプレートをジェネレータと呼んでいる。AngularJS用のジェネレータとして最も広く使われているのはgenerator-angular。また、テストランナーkarmaのためのジェネレータも必要(無くても動くが、WARNINGが出る)。

Sass入れる? とか聞かれるので適当に選択すればOK。angular-routeは入れておいたほうがよい(後述)。

サーバの実行

Gruntを使う場合(yo angularするとGruntfile.jsが自動生成されるので、Gruntを使うのが手軽)。

ルート、ビュー、コントローラの追加

※yo angular:routeを実行するには、yo angularの時点でangular-routeを選択してインストールしておく必要がある。インストールされていない場合は、再度yo angularを実行すればよい。

テスト

プロジェクトのビルド

  • すべてのJavaScriptファイルのコードを連結し、1つのファイルを生成する
  • ファイルのバージョン管理を行う
  • 画像を最適化する
  • アプリケーションキャッシュのためのマニフェストファイルを生成する

AngularJSとRequireJSの統合

RequireJSで依存先の定義と管理を行う。Bowerがパッケージマネージャなのに対して、RequireJSはモジュールごとに使用するJavaScriptを管理する、といった使い方のツール。割とめんどくさそうだけど、規模が大きくなると必要かも。

コメントを残す