2014年9月に出た『AngularJS: Up and Running』の読書メモを書いていきます。
『AngularJS: Up and Running(ISBN-10:1491901942)』は、『AngularJS(ISBN-10:1449344852)』の改訂版です。『AngularJS(ISBN-10:1449344852)』の方は『AngularJSアプリケーション開発ガイド』というタイトルで日本語版が翻訳されています。
旧版と目次を見比べると、かなり内容がアップデートされていることがわかります。また、ユニットテストに関する内容が手厚くなっています。
旧版目次(各章タイトルは邦訳『AngularJSアプリケーション開発ガイド』より引用)
- イントロダクション
- AngularJSアプリケーションの構造
- AngularJSアプリケーションの開発
- AngularJSアプリケーションの内部構造
- サーバとの通信
- ディレクティブ
- その他の便利な機能
- レシピ集
『Up and Running』目次(拙訳)
- AngularJS入門
- AngularJSのディレクティブとコントローラーの基本
- AngularJSでのユニットテスト
- フォーム、インプット、サービス
- AngularJSサービスの全て
- $httpを使用したサーバとの通信
- サービスとXHRのユニットテスト
- フィルタ
- フィルタのユニットテスト
- ngRouteを使用したルーティング
- ディレクティブ
- ディレクティブのユニットテスト
- より進んだディレクティブ
- エンドツーエンドテスト
- ガイドラインとベストプラクティス
ページ数の面からも、旧版196ページに対し新版322ページと、約1.6倍に増量されています。
以下、第1章の読書メモ。
AngularJS入門
- Webアプリケーションのクライアントサイドに求められる機能はどんどん増えている
- 開発者が対処しなければならない複雑性はどんどん増大している
- AngularJSはこれらの要求に対応するために作られた
AngularJSとは
- AngularJSは一貫性のあるスケーラブルな構造を提供する
- 全てがJavaScriptとHTMLで行われる
MVC(Model-View-Controller)とは
MVCは、巨大なアプリケーションを開発する際にロジックと感心を分割するための方法。
以下の3つのパーツから成る。
- モデル:アプリケーションの背後にあるデータのこと
- ビュー:ユーザーの目に触れ、手で触ることのできるUIのこと
- コントローラー:ビジネスロジックと表示処理を行うレイヤー
コントローラーはどのモデルの値をビューで表示するか司るため、この部分をビューモデルと呼び、全体をMVVW(Model-View-ViewModel)と称することもある。
このように分割することには以下のメリットがある。
- それぞれの部品は1つのことにだけ責務をもつ
- それぞれの部品は、可能な限り他の部品と独立している
AngularJSの利点
AngularJSはフロントエンド開発における多くの面倒事を引き受ける。その結果として、
- 書くべき行数が少なくなる
- ビジネスロジックやアプリケーションのコアとなる機能に集中できる
- 宣言的プログラミングにより、アプリケーションを読み書きするのが楽になる
- CSS/HTMLとJavaScriptのロジックを分離できる
- テンプレートが純粋なHTMLなので、デザイナーが触りやすい
- ユニットテストが簡単にできる
- jQuery、Bootstrap等と合わせて使うことができる
AngularJSの哲学
AngularJSには5つの信条がある。
1. データ駆動
- 伝統的なサーバサイドアプリケーションでは、画面上の変更を行う際は全体を書き換えていた
- クライアントサイドのSPA(Sigle Page Application)では、クライアントとサーバがデータのやり取りをする
-
伝統的なJavaScriptアプリケーションでは、データの更新があれば更新処理を明示的に実行する必要がある
- AngularJSでは、データバインディングによってデータを更新するとUIも更新される
2. 宣言的
- AngularJSでは、ディレクティブを使用した宣言的な記述によりHTMLを構築する
- HTMLがわかりやすくなり、各パーツのロジックがカプセル化されるという利点がある
3. 関心事の分離
- AngularJSではアプリケーションはMVCに近い構造になる
- この構造には、各パーツが分離され、個別にカスタマイズできるというメリットがある
4. 依存性の注入
- AngularJSは依存性の注入というパターンを採用し、コントローラーやサービスが必要とする依存関係を明示的に宣言する必要がある
- 依存性の注入によって、以下のメリットが得られる
- 利用する側は、依存オブジェクトの初期化方法を考える必要がない
- 明示的に宣言されるので、何が必要かすぐに分かる
- テストが簡単になる
5. 拡張可能
- AngularJSでは、フレームワークの構築に使用されているのと同じAPIで自分独自のコンポーネントを作成できる
これらの信条は、「テストファースト」という根源的な目標から生まれている。
AngularJSでは、どのコンポーネントも簡単にテストできる。
コンポーネント単位ではKarmaテストランナーを使うことでユニットテストできる。
エンドツーエンドテストにはProtractorを使う。
AngularJSを始める
AngularJSのバックエンドに求められる条件は?
バックエンドはどんな言語でも構わない。JSONを返すWeb APIがあれば利用的だが、XMLを返すWeb APIでもAngularJSは利用可能である。
アプリケーション全体をAngularJSアプリにする必要があるか?
ng-appディレクティブを使用することで、一部分だけをAngularJSアプリ化することができる。