AngularJS
こんにちは、ビルドシステムの小野です。
最近、仕事でAngularJSを利用する機会があったので、AngularJSのご紹介をしたいと思います。
AngularJSとは
AngularJSとはオープンソースのフロントエンドWebアプリケーションフレームワークになります。
Googleおよびコミュニティによって開発されており、2016/12現在の最新バージョンは2.4となっています。
1.X系と2.X系では大きく変更されており、今回は1.X系のご紹介となります。
AngularJSはSPA(シングルページアプリケーション)の開発が可能なフレームワークとなっています。
SPAとは
SPA(シングルページアプリケーション)とは、単一のWebページでネイティブアプリケーションの様なUXを提供するアプリケーションを指します。
https://en.wikipedia.org/wiki/Single-page_application
概念的には以前からJavaアプレット、Flash、Silverlightなどもありましたが、Appleショック（2010年のFlash批判）を発端としたこれらのRIAの衰退、JavaScriptの進化やHTML5の勧告により、今後（既に？）のWebアプリケーション開発はSPA(HTML5/JavaScript)による開発が主流になりつつあります。
SPA開発フレームワークには他にもReact.jsやBackbone.jsなどもあり、機能や対応範囲などに違いがあります。
SPAの動作フローイメージは以下のような感じになります。
※初期HTML(DOM)表示後はREST-APIでのJSONデータにより画面を部分的に反映
AngularJSの特徴
AngularJSはフルスタックフレームワークとなっており、SPA開発に必要な機能が一通り揃っています。
AngularJS(1.X系)の主な特徴としては以下の通りです。
- MVCモデル（MVWモデル）
フロントエンドをModel-View-Controller(Whatever)パターンとして実装 - 双方向データバインディング
ビューとデータを紐付け双方向で反映させ、面倒なDOM操作を必要としない - ルーティング
リクエスト時のURLに応じて、処理を対応するコントローラー／テンプレートに引き渡す仕組み - DI
依存性注入に対応しており、モジュール間の依存性を排除し、単体テストも行いやすい - その他
Ajax通信機能、HTMLテンプレート機能、ディレクティブ、フィルタなどなど
AngularJSの感想
SPA開発ではフレームワークを利用せずにJQueryなどで構築することも可能ですが、JQueryのみで開発を行った場合、データはDOM上のみとなり構造化することも状態管理することも難しく、また、複数名で開発した場合、実装方法がまちまちになったりするなど、AngularJSに限らずフレームワークの導入は必須と考えます。
その中でもAngularJSはフルスタックフレームワークとなり、ほぼSPA開発に必要な機能は揃っているため、どのようなプロジェクトでも適用可能ではと思います。
AngularJSが提供する機能を使いこなせると、かなり強力なフレームワークになると考えます。
ただし、下記のようなデメリットあるため、プロジェクトやメンバーによっては他のフレームワークも検討した方が良いかもしれません。
- 機能が多いがゆえに学習コストも高い
→プロジェクトで基本形のサンプル実装を用意する - 初期ページ表示が重い、バインドデータが多いと重い
→初期ページをサブシステムや機能毎に分割するなどで軽減可能 - Angular2に移行するコストが高い
→AngularJS1.5からは移行のためのコーディングができるようになっています、1.X系と2.X系の共存も可能
※AngularJS(1.X系)とAngular2(2.X系)では大きな仕様変更が行われています。主な変更点としては以下の通りです。
・TypeScriptが推奨となった
・$scopeが利用不可となった（コンポーネントで状態管理）
・テンプレートの記述方法が変更となった
・DIが文字列ベースからトークンベースとなった
・などなど
まとめ
主要なブラウザではJavaアプレット、Flash、Silverlightなどは今後利用できなくなる可能性が高く、
これらと同等のUI/UXを提供するWebシステム開発はSPAが必須となります。
AngularJSに限らずSPA関連技術は身に付けたいと思います！
