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

投稿者:ryo511 コメントをどうぞ (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スタイルのテストに対応している。以下がコード例。

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を管理する、といった使い方のツール。割とめんどくさそうだけど、規模が大きくなると必要かも。

コメントをどうぞ

コメントを残す