はじめに
以前の記事でAngularフレームワークの概要を解説しましたが、実際にAngularを扱う現場や技術者同士の会話では、当たり前のように専門用語・略語が飛び交います。
本記事では、Angularに関わる際に最低限押さえておきたい用語を、カテゴリ別に整理しました。
「聞いたことはあるけど、説明はできない」という言葉をなくすための一覧として活用してください。
基本概念
| 用語 |
説明 |
| Component(コンポーネント) |
UIの部品を表す最小単位。テンプレート(HTML)・スタイル(CSS)・ロジック(TypeScriptクラス)の3つがセットになったもの |
| Template(テンプレート) |
コンポーネントの見た目を定義するHTMLベースの記述。データバインディングや制御フロー構文を含む |
| Directive(ディレクティブ) |
DOM要素の見た目や振る舞いを変更する仕組み。コンポーネントも実は「テンプレートを持つディレクティブ」の一種 |
| Pipe(パイプ) |
テンプレート内で値を変換して表示するための機能。{{ price | currency }}のように|(パイプ)記号で使う |
| NgModule |
かつてのAngularでコンポーネント群をグループ化する単位だった仕組み。現在はスタンドアロン構成が主流となり、重要度は下がっている |
| Standalone Component(スタンドアロンコンポーネント) |
NgModuleへの登録を必要としないコンポーネント。Angular 19以降はデフォルトの構成方式 |
| Service(サービス) |
UIロジックとは別に、データ取得・ビジネスロジックなどを担うクラス。複数のコンポーネントから再利用される |
| Dependency Injection / DI(依存性注入) |
必要なオブジェクト(サービス等)を、クラス自身がnewせず外部から受け取る設計の仕組み。Angularの中核機能の1つ |
| Decorator(デコレータ) |
@Component・@Injectableのように、クラスやプロパティにメタデータを付与するTypeScriptの構文 |
| selector(セレクタ) |
コンポーネントをHTML上でどのタグ名(<app-counter>等)として使えるかを指定する設定 |
リアクティブ・状態管理
| 用語 |
説明 |
| Signal(シグナル) |
値の変化を追跡できるリアクティブなデータの入れ物。Angular 20で安定版となった、現在の状態管理の主流 |
| computed() |
他のSignalの値から自動的に導出される、読み取り専用のSignalを作る関数 |
| effect() |
Signalの値が変化するたびに、副作用(ログ出力やDOM操作など)を実行するための関数 |
| Zone.js |
Angularが従来使ってきた、非同期処理を監視して自動的に画面を再描画させるためのライブラリ |
| Change Detection(変更検知) |
データの変化を検知し、画面(DOM)に反映する仕組み全般を指す言葉 |
| Zoneless(ゾーンレス) |
Zone.jsに依存せず、Signalベースで変更検知を行う仕組み。Angular 20.2で安定版に |
| RxJS |
非同期処理やイベントを「ストリーム」として扱うためのライブラリ。HTTP通信などで今も広く使われる |
| Observable(オブザーバブル) |
RxJSにおける「値が時間とともに流れてくるもの」を表す型。subscribe()で購読する |
| Subject / BehaviorSubject |
Observableの一種で、外部から値を流し込める(発行できる)特殊なストリーム |
| NgRx |
Reduxの考え方をAngularに適用した、大規模アプリ向けの状態管理ライブラリ。複雑な状態管理が必要な場面で使われる |
テンプレート構文・データバインディング
| 用語 |
説明 |
| Interpolation(文字列補間) |
{{ 変数名 }}のように、テンプレート内にTypeScript側の値を埋め込む記法 |
| Property Binding(プロパティバインディング) |
[属性名]="値"の形式で、DOM要素のプロパティにTypeScript側の値を反映する記法 |
| Event Binding(イベントバインディング) |
(イベント名)="処理()"の形式で、クリック等のDOMイベントにTypeScript側の処理を紐付ける記法 |
| Two-way Binding(双方向バインディング) |
[(ngModel)]="変数"のように、画面の入力とTypeScript側の値を相互に同期させる記法 |
| Control Flow構文(@if / @for / @switch) |
Angular 17で導入された、テンプレート内の条件分岐・繰り返しを表す新しい構文。従来の*ngIf・*ngForより高速で読みやすい |
構造ディレクティブ(*ngIf / *ngFor) |
Control Flow構文が登場する以前から使われている、条件分岐・繰り返し表示のための旧来の書き方 |
| @defer(遅延読み込みブロック) |
テンプレートの一部を、必要になったタイミングまで読み込みを遅延させる構文。初期表示速度の改善に使われる |
ルーティング・通信・DI関連
| 用語 |
説明 |
| Router(ルーター) |
URLに応じて表示するコンポーネントを切り替える、Angular標準搭載のルーティング機能 |
| Route Guard(ルートガード) |
特定のルートへの遷移を許可するかどうかを判定する仕組み(未ログインユーザーのアクセス制限など) |
| Resolver(リゾルバー) |
ルート遷移が完了する前に、必要なデータを事前に取得しておく仕組み |
| HttpClient |
Angular標準搭載の、HTTP通信を行うためのサービス。内部的にRxJSのObservableを返す |
| Interceptor(インターセプター) |
すべてのHTTPリクエスト・レスポンスに共通処理(認証トークンの付与、エラーハンドリング等)を差し込む仕組み |
| inject()関数 |
コンストラクタを介さずに、関数呼び出しの形でDIコンテナからサービスなどを取得する記法 |
| providedIn: 'root' |
サービスをアプリ全体でシングルトンとして提供する設定。DIコンテナへの登録方法の1つ |
フォーム
| 用語 |
説明 |
| Template-driven Forms(テンプレート駆動フォーム) |
HTMLテンプレート側にngModel等を書いてフォームを構築する、比較的シンプルな方式 |
| Reactive Forms(リアクティブフォーム) |
TypeScript側でFormControl・FormGroupを明示的に定義して構築する、大規模フォーム向けの方式 |
| FormControl / FormGroup / FormArray |
Reactive Formsにおける、それぞれ「単一の入力項目」「複数項目のまとまり」「可変長の項目群」を表すクラス |
| Signal Forms |
Angular 22で安定版となった、フォームの状態をSignalsで扱う新しい仕組み |
ビルド・ツール・エコシステム
| 用語 |
説明 |
Angular CLI(ngコマンド) |
プロジェクト作成・コンポーネント生成・ビルド・テストなどを統一的に行うための公式コマンドラインツール |
| esbuild |
Angular CLIが標準採用している、Go言語製の高速なJavaScript/TypeScriptバンドラー |
| Vite |
開発サーバーの高速化のためにAngular CLIが採用している、モダンなフロントエンドビルドツール |
| AOT(Ahead-of-Time)コンパイル |
アプリのビルド時にテンプレートを事前コンパイルしておく方式。本番ビルドではこちらが標準 |
| JIT(Just-in-Time)コンパイル |
ブラウザでの実行時にテンプレートをコンパイルする方式。主に開発時に使われていた(現在はAOTが主流) |
| Ivy(アイビー) |
Angular 9以降のレンダリングエンジンの名称。バンドルサイズの削減やビルド速度の向上を実現した |
| SSR(Server-Side Rendering) / Angular Universal |
サーバー側でHTMLを事前生成し、初期表示速度やSEOを改善する仕組み |
| Hydration(ハイドレーション) |
SSRで生成された静的HTMLに対し、クライアント側でAngularのインタラクティブ性を後付けする処理 |
| Incremental Hydration(インクリメンタルハイドレーション) |
ページ全体ではなく、必要な部分ごとに段階的にHydrationを行う仕組み。Time to Interactiveの改善に寄与する |
| Nx |
Angularを含む複数プロジェクトを一括管理する、モノレポ(monorepo)構築のためのビルドシステム |
テスト関連
| 用語 |
説明 |
| TestBed |
Angularのコンポーネント・サービスを、テスト用の疑似的な環境で動かすためのユーティリティ |
| Jasmine(ジャスミン) |
Angularプロジェクトで標準的に使われてきた、JavaScript用のテスティングフレームワーク |
| Karma(カルマ) |
Jasmineで書いたテストを、実際のブラウザ上で実行するためのテストランナー |
| Vitest(ヴィテスト) |
Viteベースの高速なテストランナー。近年のAngularプロジェクトでKarmaからの移行先として採用が進む |
その他よく聞く言葉
| 用語 |
説明 |
| Angular Material |
Googleの「Material Design」に準拠したUIコンポーネント集。Angular公式が提供する |
| CDK(Component Dev Kit) |
Angular Materialの土台となっている、UI構築のための低レベルなユーティリティ群 |
| Schematics(スケマティクス) |
ng generateのような、コード自動生成の仕組みそのものを指す用語。カスタムのコード生成ルールも作成できる |
| LTS(Long Term Support) |
長期サポート版を指す略語。Angularは各メジャーバージョンに18ヶ月間のLTS期間を設けている |
| AngularJS |
2010年に登場した、現在のAngular(2以降)とは設計思想が異なる旧バージョン(1系)。単に「Angular」と言った場合は通常含まれない |
まとめ
Angularは「フルスタックフレームワーク」を標榜するだけあって、扱う用語の範囲もコンポーネント設計からビルドツール、テスト、状態管理まで多岐にわたります。
まずは太字で紹介した基本概念(Component・Service・DI・Signal)を押さえた上で、会話の中で分からない単語が出てきたら、その都度この一覧に立ち返って確認していくのがおすすめです。
学習に使った書籍
本記事の用語整理にあたっても、以下の書籍を参考にしました。
※上記リンクはアフィリエイトリンクを含みます。
参考
