AngularJS アプリケーションプログラミング

最新 SPA フレームワークが体系的に学べる!

AngularJS で書かれた画面を引き継いだとき、ディレクティブやスコープの働きを日本語で一通り確かめられる資料があると、保守の見通しが立ちやすくなります。『AngularJS アプリケーションプログラミング』 (山田祥寛 著、技術評論社、2015 年 8 月発売) は、Google が提供する JavaScript フレームワーク AngularJS を使った Web アプリケーション開発を、双方向バインディング、DI コンテナー、ルーティングといった基本のしくみから、ディレクティブ、フィルター、サービスの自作やテストまで通して解説した書籍です。版元は対象を、AngularJS を利用した Web アプリケーション開発に興味のある人と案内しています。

導入編から応用編へ、全 9 章で AngularJS を一巡する構成

本書は導入編、基本編、応用編の 3 つの編に全 9 章を収めています。導入編の第 1 章「イントロダクション」は JavaScript の歴史とフレームワークの役割から入り、第 2 章「AngularJS の基本」で利用の準備、コントローラーとサービスの基本、AngularJS を理解する 3 つのしくみを押さえます。基本編は第 3 章「ディレクティブ」、第 4 章「フィルター」、第 5 章「サービス」、第 6 章「スコープオブジェクト」の順に、標準で用意された部品を種類ごとに見ていく並びです。第 5 章には $http サービスによる非同期通信、$resource サービスによる HTTP 経由の CRUD 処理、$q サービスによる Promise の非同期処理などの節があります。応用編は第 7 章「ディレクティブ / フィルター / サービスの自作」、第 8 章「テスト」、第 9 章「関連ライブラリ / ツール」で、部品を使う側から作る側へ移り、ユニットテストとモック、E2E (End to End) テスト、開発に役立つソフトウェアやツールまでを扱います。

双方向バインディングと依存性注入が AngularJS の土台

版元は刊行時の状況を、Flash や Silverlight に代表される RIA が衰退し、JavaScript と HTML5 をベースとした SPA が主流になりつつあると説明しています。画面全体を読み込み直さずに必要な部分だけを書き換える シングルページアプリケーション では、画面の状態とデータの同期をどう書くかが開発の手間を左右します。AngularJS はテンプレートと JavaScript 側のデータをスコープで結び、入力欄の値が変わればモデルが、モデルが変われば表示が更新される双方向バインディングを標準にしました。DOM を手作業で書き換える書き方に比べてコードは短くなりますが、監視対象が増えるほど変更を検知する処理が重くなる点は、AngularJS の構造上の弱点でした。第 6 章はスコープの有効範囲、コントローラー間の情報共有、スコープの監視を節に立てており、表示が更新されない、あるいは遅いといった不具合を追うときに読み返す箇所になります。

もう 1 つの柱が、コントローラーが必要とするサービスを外から受け取る 依存性注入 の仕組みです。部品どうしが互いを直接生成しないため、外部との通信部分をテストのときに差し替えやすくなります。第 8 章は、ユニットテストの基本に続けてモックを節として立てています。

提供を終えた AngularJS と後継の Angular の違い

AngularJS の公式サイトは、AngularJS のサポートが 2022 年 1 月に正式に終了したと告知しています。名前の近い Angular は、TypeScript とコンポーネントを中心に組み立てる別系統のフレームワークで、本書のスコープや独自ディレクティブを使ったコードはそのままでは Angular で動きません。このため 2026 年に本書を手に取る意味は、新規の開発に使う技術を学ぶことではなく、AngularJS で作られたアプリケーションの振る舞いを正確に読み解くことにあります。新しく Web アプリケーションを作るためにフレームワークを学びたい場合は、Angular や React などを扱う本を選ぶほうが目的に合います。

AngularJS の既存資産を保守、移行する人に向く一冊

社内システムや業務画面が AngularJS で書かれていて、改修や移行の前に既存コードの意味を確かめたい人にとって、本書は手元に置く価値があります。標準のディレクティブとフィルターを種類ごとに引けて、自作の方法とテストの書き方まで同じ本で追えるため、見慣れない独自ディレクティブや $scope の使い方に出会ったときの手掛かりになります。移行の作業でも、旧コードがどう動いていたかを先に把握しておくと、置き換えた後の画面との差を見極めやすくなります。AngularJS の資産を任された人は、まず第 2 章と第 6 章で全体の仕組みをつかんでから、必要な章を引いてみてください。