はじめに
「AngularJS」という名前を聞いて、あなたはどんな印象を持つでしょうか。「もうサポートが終わったレガシーなフレームワークでしょう?」と思う方も多いはずです。実際その通りで、AngularJSは2022年1月に公式サポートを終了し、GitHubリポジトリも2024年4月にアーカイブされました。
しかし世の中にはまだAngularJSで書かれたアプリケーションが数多く稼働しています。保守案件で突然AngularJSのコードに触れることになったり、モダンなフレームワークがなぜ今の設計になったのかを理解するために、その源流を知りたくなったりすることもあるでしょう。この記事では、AngularJSの特徴と基本的な使い方を実際に手を動かしながら確認していきます。
AngularJS(Angular-1)とは
AngularJSは、Googleが開発したクライアントサイドのMV*(Model-View-whatever)フレームワークです。HTMLをそのまま拡張し、ng-から始まる属性(ディレクティブ)を追加するだけで動的なアプリケーションを構築できる点が最大の特徴でした。2010年に公開されて以降、SPA(シングルページアプリケーション)開発の先駆けとして広く使われましたが、現在は後継のAngular(2以降)へ完全に置き換わっています。
主な特徴
- 双方向データバインディング -
ng-modelを使うだけで、入力値とJavaScript側のデータが自動的に同期します - HTMLの拡張(ディレクティブ) -
ng-repeatやng-ifなど、独自の属性でHTMLの表現力を拡張できます - 依存性注入(DI) - コントローラーやサービスの依存関係を明示的に管理でき、テストしやすい設計になります
- ビルド不要で動く -
<script>タグを1つ読み込むだけで、Reactやモダンな Vue のようなビルドツールなしに動作します
注意: 前述の通りAngularJSは2022年1月にサポートが終了しており、新規プロジェクトでの採用は推奨されません。新しく開発するなら、後継のAngularや他のモダンフレームワークを検討してください。
インストール
npmからインストールする場合は以下の通りです。
npm install angular
ビルドツールを使わず、CDN経由で読み込むことも可能です。
<script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
基本的な使い方
AngularJSの基本は「ng-appでアプリケーションの範囲を宣言し、ng-controllerでロジックを結びつける」ことです。以下は、入力した文字がリアルタイムに画面へ反映される双方向データバインディングの例です。
入力欄に文字を打つだけで、{{ }}(マスタッシュ構文)で書いた部分が即座に更新されるのがわかります。JavaScript側で明示的にDOMを書き換えるコードを一切書いていない点が、AngularJS最大の魅力でした。
実践的なユースケース
一覧表示とフィルタリング
ng-repeatディレクティブを使うと、配列データからリストを繰り返し描画できます。組み込みのfilterフィルタと組み合わせれば、検索機能も数行で実装可能です。
フォームバリデーション
AngularJSのフォームは、name属性を付けるだけで自動的にバリデーション状態($valid、$invalid、$dirtyなど)を追跡してくれます。これによりバリデーションロジックを自前で書く量を大きく減らせます。
カスタムディレクティブ
独自のdirectiveを定義すれば、DOM操作を伴う再利用可能な部品を作れます。以下はクリックした回数をボタン自身に表示するシンプルなディレクティブの例です。
まとめ
AngularJSは公式サポートが終了し、リポジトリもアーカイブされた「歴史上のフレームワーク」です。新規プロジェクトで採用する理由はもうありませんが、双方向データバインディング・ディレクティブ・依存性注入といった考え方は、後継のAngularはもちろん、Vueをはじめとする多くのモダンフレームワークにも受け継がれています。
もし今あなたが保守案件でAngularJSのコードに向き合うことになったら、あるいは「なぜモダンフレームワークはこう設計されているのか」を知りたくなったら、この記事のサンプルを手元で動かしながら基本の動きを確認してみてください。過去のフレームワークを理解することは、今のフレームワークをより深く理解する近道になるはずです。