「AngularJS アプリケーションプログラミング」レビュー

書籍について

タイトル AngularJS アプリケーションプログラミング
著者 著: 山田 祥寛
発行日 2015/09/20
ページ数 497ページ
価格 3700円
Amazon https://www.amazon.co.jp/dp/4774175684
読了日 2017/03/08

メモなど

  • 前提として、AngularJS(1.4.1)で小さなアプリを開発しつつ、並行して読み進めたため0からのスタートではない
  • AngularJSの全体像を体系的に整理した本
  • 約500ページのボリュームで、AngularJSでできることを一通り解説している
  • この分厚い本を読まずともAngularJSアプリは開発できるが、その原理やより便利な使い方を知るためには必須
  • AngularJSそのものだけでなく、テストフレームワークやビルドツール、Chromeのデベロッパツールなど、AngularJSアプリ開発の周辺技術についても取り上げている
  • いわゆるハンズオンな内容でもなく、電車内で読み進めるだけで理解を深められた
  • AngularJSに興味がなくとも、JavaScriptMVCについて述べられた第1章だけでも読む価値あり

構成と感想

※ 実際の目次から多少弄ってます

1.JavaScriptの歴史

JavaScript誕生の経緯から始まり、不遇の時代を乗り越えてAjaxの登場によって再ブームを起こし、MVCフレームワークが誕生するまでが述べられている。

AngularJSに関心がなくとも、この章だけでも読み物として面白い。何故MVCフレームワークが必要になったのか?そもそもライブラリとフレームワークの違いは何か?フロントエンジニアなら抑えておいて当たり前の内容を丁寧に説明してる。

2.AngularJSの基本的な使い方とそのしくみ

  • モジュール
  • コントローラ
  • サービス
  • ディレクティブ
  • 双方向データバインディング

といった、AngularJSの構成要素である専門用語について、簡単なサンプルコードを通じて解説している。この章を読むだけで、AngularJSがどんなフレームワークなのかが見えてくる。

ここまで読んで「面白そう」と思ったら続きを読めばいいし、興味が沸かなくてもここまで読めばAngularJSとは何なのかの説明ができる。

3.標準ディレクティブ

ディレクティブとは、

<input type="text" ng-model="name">

のように、HTMLを拡張するためのタグや属性のことである。
ディレクティブは自作することもできるが、AngularJSでは多くの便利なディレクティブが提供されている。それらについて、いくつかピックアップして紹介してる。

4.標準フィルター

ビュー側でデータを出力する際に特定の加工を行ってから出力する「ビュー」について。例えば、以下の場合はobjectをJSON化して出力する。

{{ object | json }}

JSONの他にも、数値を丸めたり、大文字小文字を切り替えたりと言った定番の加工を行うフィルタが標準で数多く存在する。それらについて、いくつかピックアップして紹介してる

5.標準サービス

AngularJSの中でも特にコアな部分であるサービス。サービスとはAngularJSにおける「ロジック」を提供する。
MVCで言うならばModelに該当する。(AngularJSはMVWを主張しているが)

6.スコープオブジェクト

スコープはビューとコントローラを結びつけるオブジェクト。AngularJSにおいて非常に重要な役割を持つスコープだが、その使い方と原理を詳細に解説している。

Angular2ではスコープもコントローラも廃止されているらしいのでちょっと残念。

7.自作フィルタ

フィルタの自作について。といっても、フィルタは受け取った値を何らかの加工をして戻すだけなので非常に簡単。

フィルタは高頻度で呼び出されるため、あまり複雑な加工を行うわけにもいかないし、標準フィルタに強力なモノが多いのであまり自作する機会は無いかなと思った。

8.自作サービス

AngularJSアプリの開発=サービスをどんどん自作していくことかなと思う。特にMVCを正確に分離するのであれば、モデルは全てサービスを自前で実装していく必要がある。

サービスには

  • value
  • constant
  • factory
  • service
  • provider

の5種類があり、どれも微妙に特徴が異なる。それぞれについて説明がされているが、まぁfactoryかserviceを使えば良いかなといった感じ。

9.自作ディレクティブ

小規模なアプリ開発であれば縁が無さそうなディレクティブの自作。これを使いこなせればAngularJSを使いこなせてると言っても過言じゃ無さそう。

ディレクティブは出来ることは非常に広く、その分自作に必要なノウハウも広く深い。その分ページ数もかなり割いているが、やはり「ここまでやる必要あるか」と思ってしまう。

よりAngularJSを使い倒したいと思ったらもう一度読んで見ると良さそう。(おそらくその前にAngular2にうつるが)

10. ユニットテスト

AngularJSアプリのユニットテストの行い方について。もちろんテストの手段は様々あるが、本書ではAngularJSでは定番となっている、Karma + jasmineを採用している。

通常のWebアプリケーションのユニットテストとは異なり、依存モジュールを注入したりするなど、AngularJSらしいテスト手法が書かれている。

11. モック

この場合の「モック」とは、ユニットテストを円滑に行うためのダミーオブジェクトである。例えばテスト対象が何らかの外部サービスに依存する時、テスト用の特定の機能のみを持ったダミーオブジェクトを置き換えることで、外部サービスが稼働していなかったり、未実装だった場合でもユニットテストを行うことができる。

AngularJSでは、この「モック」が数多く標準で提供されている。例えば、HTTPリクエストに対するレスポンスを返却するモックでは、テスト対象のコードを弄らずとも、ダミーのHTTPレスポンスを返却するモックをテストコード中で呼び出すことで、レスポンスが返却されたように振る舞うことができる。

12. E2Eテスト

E2Eテストは、実際のユーザがブラウザを操作したときにアプリケーションが正しい振る舞いを行うことを検査する総合的なテストである。

本書では、Protectorというテストランナーを採用し、AngularJSにおけるE2Eテストについて説明している。個人的にはVisualStudioが必要とか書かれているのを見て意欲を失ってしまった。

AngularJSアプリは、原則としてjQueryによるDOMツリーの操作が行われないので、E2Eテストは書きやすいのかなと思った。

13. 関連ライブラリ

AngularJSはそれだけで非常に強力なフルスタックフレームワークだが、局所的な実装を全てサポートしているわけではない。そこで、実装内容に応じて、各種AngularJSライブラリを利用することで、さらにAngularJSアプリの実装の幅を広げることができる。(jQueryにおけるjQueryライブラリのようなもの)

AngularJSでは、フィルタ/ディレクティブ/サービスを自作することができるので、それらを含んだライブラリが(公式/非公式問わず)数多く存在する。本書では以下の一部のみを紹介しているが、他の膨大なライブラリの調べ方なども書いてある。

  • UI Bootstrap
    — Bootstrapをディレクティブで利用できるようにする
  • UI Event
    — 標準以外のイベント処理をできるようにする
  • UI Validate
    — 標準以外の、自作の検証機能を実装できる
  • UI Router
    — 高度なルーティング処理を実装できる。SPAには必須
  • UI Grid
    — グリッド表を生成する
  • angular-translate
    — 国際化対応ページを実装する
  • Angular Google Maps
    — GoogleMapをAngularJSで利用する
  • angular google chart
    — GoogleChartをAngularJSで利用する

14. 関連ツール

AngularJSとは直接関係ないが、AngularJSアプリを開発する上で役立つ以下の関連ツールについて紹介している。もちろんツールの紹介だけでなく、AngularJSで活用するための利用方法についても説明している。

  • Yeoman
    — 様々なフレームワークに対応したアプリの雛形を生成するアプリ。つまりAngularJSアプリの雛形を生成してくれる
  • Grunt
    — タスクランナーツール。TypeScriptのコンパイル、テストの実行、ソースコードのミニファイなどを逐次自動で行ってくれる
  • Bower
    — クライアントサイドのJavaScriptパッケージ管理ツール。ちなみにサーバサイドはnpmが主流

なお、本書ではタスクランナーツールとしてGruntを採用していたが、私はGurpを採用しているのでほぼ飛ばした。

所感

AngularJSは本当に面白い。あと3年ぐらい早く出会っていればこれまでフロントエンドの実装にあんなに苦しまなかった気がする。

しかし、互換性の一切ない、というかアーキテクチャが一新されたAngular2の登場によって少しずつAngularJSが不要になっていくのがとても悲しい。

AngularJSのノウハウがそのままAngular2で生きてくれれば嬉しいが、それはAngular2をやってみないとわからない。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です