Angular
概要
Angularとは、Webアプリケーションの開発を効率化するフレームワークの一つ。前身の「AngularJS」を刷新して新たに開発されたもので、米グーグル(Google)社などが開発し、MITライセンスに基いてオープンソースとして公開されている。Webアプリケーションのうち、Webブラウザ上で実行するクライアント側(フロントエンド)開発するための様々な機能を提供する。「フルスタックフレームワーク」を標榜しており、単体でフロントエンド全体を構築できるよう一通りの機能を揃えている。
アプリケーション全体を、内部的な処理を担当する「モデル」、利用者への表示や操作の受付などユーザーインターフェース(UI)を担当する「ビュー」、両者を橋渡しする「ビューモデル」の3層に整理にした「MVVM」(Model-View-ViewModel)アーキテクチャを基本としており、フロントエンド側に主要な処理を集約したシングルページアプリケーション(SPA)の開発に向いている。
前身のAngularJSはJavaScriptフレームワークだったが、AngularはJavaScriptに静的型付けなどの拡張を行った「TypeScript」を標準の開発言語としている。TypeScrpitはJavaScriptの上位互換であるため、拡張仕様は使わずにJavaScriptのみを使用して開発することも選択できる。AndularJS(バージョン1.x系)とAngular(バージョン2.x系~)は仕様などに互換性がないため注意が必要である。
ページ上の要素とスクリプト上のデータを対応付け(バインディング)でき、変化に対して自動的に追随させることができる。データの変更を対応するページ上の要素(DOMプロパティ)に反映する一方向(片方向/単方向)バインディングと、これに加えてページ上の要素に対する利用者の操作・入力を対応するデータに反映させる双方向バインディングが利用できる。
ビューを構成するUI要素はTypeScriptのクラスとしてコンポーネント(部品)化され、テンプレート中ではHTMLのカスタム要素として記述することができる。コンポーネントには独自の属性やスタイル、処理を定義することができ、複数のコンポーネントを組み合わせて一つの機能単位とすることもできる。
SPAは単一のWebページでアプリケーションを構成するが、指定されたURL(のパス部分)に応じてどの状態を表示するか指定する「ルーティング」を行うことができる。これにより、利用者が特定の表示状態をブラウザにブックマーク登録したり、検索エンジンのクローラにアプリケーション内の様々な画面をそれぞれ別のURLで提示することができるようになる。Angularではルーティングモジュールを用いてURLをコンポーネントに対応付けることでこれを実現する。
Angularはアプリケーション開発の全体をカバーするツールを揃えており、開発者が必要な処理を実行するためのコマンドラインツール「Angular CLI」や、実行環境に配備できるようにするためのAOT(Ahead-Of-Time)コンパイラやビルドツール、コンポーネントの単体テストやWebブラウザの操作を再現するE2Eテスト(End to End testing)を実行する機能を備えている。