Angular基礎 #1 Angular とは何か?
今日もっとも堅牢なフルパッケージ JavaScript フレームワーク、Angular。Google、Microsoft、Samsung、Forbes のような大組織が社内システムやエンタープライズ製品に Angular を使っています。日本の求人を見ると React ほど頻繁には見かけませんが、SI・金融・大企業の社内システムに入っていくほど深く扱う現場が多く、一度導入したところは長く使い続ける傾向があります。
この講座では、Angular 入門者のために Angular とは何か、なぜ作られたのか、そしてどんな問題を解決するツールなのかについて学んでいきます。
Angular の誕生 #
Angular の出発点は 2009 年、Google のエンジニア Miško Hevery が社内で作った AngularJS です。2010 年にオープンソースとして公開された AngularJS は、双方向データバインディングと依存性注入を JavaScript の世界に本格的に持ち込み、大きな反響を呼びました。
しかし JavaScript エコシステムが急速に成熟するにつれ、AngularJS の初期の設計判断が限界を見せ始めます。Google は 2014 年に互換性を断ち切って一から作り直すと発表し、その成果物が 2016 年に正式公開された Angular 2 です。それ以降は、メジャーバージョンを毎年 2 回上げる速いリリースサイクルで進化してきました。
今日「Angular」と言えば、もはや 1.x バージョン (AngularJS) を指すのではなく、2016 年以降の新しい Angular (Angular 2+) を指します。この講座で扱うのもすべて新しい Angular です。
ライブラリなのかフレームワークなのか? #
Angular は明確に フルパッケージのフレームワーク です。UI レンダリングはもちろん、ルーティング、フォーム処理、HTTP 通信、依存性注入、テストまで — Web アプリを作る際に必要なほぼすべての機能を公式に 1 つのパッケージの中に収めています。
この点が React と最も大きく異なるところです。React は UI だけを担当して残りはエコシステムから選んで使うミニマルなアプローチですが、Angular は「これが標準だ」と一式を持ってきます。自由度は下がりますが、どのチームのどのプロジェクトでもコードの形が似通っていて、引き継ぎや保守がしやすいという強みがあります。
Angular の特性 #
Angular の核心となる特性を 5 つにまとめてみます。
1. TypeScript 優先 (TypeScript-first) #
Angular は最初から TypeScript で作られたフレームワークです。JavaScript で書くこともできますが、実務ではほとんど誰もそうしません。コンパイル時に型を検証し、自動補完とリファクタリングが強力に動作します。大きなコードベースで安定して協業できる基盤になります。
2. コンポーネントとモジュール (Components & Modules) #
画面をコンポーネントに分割するという点は React、Vue と同じです。ただし Angular は長らくコンポーネントをまとめて モジュール (NgModule) という単位で束ねてきました。最近はモジュールなしですぐに動作する Standalone Components が標準になり、ボイラープレートが大きく減りました。新しいプロジェクトはほとんど standalone 方式で始まります。この講座でも standalone を基本として扱います。
3. 依存性注入 (Dependency Injection) #
Angular のもっとも強力な武器の 1 つです。サービスクラスを作ると、コンポーネントは必要なサービスをコンストラクタや inject() 関数で「注入してもらいます」。オブジェクトを直接作らないのでテスト時に偽の実装に差し替えやすく、大きなアプリでサービス間の依存関係を追跡するのにも適しています。バックエンドの Spring や NestJS を扱ったことがある方には非常に馴染みのあるパターンです。
4. RxJS とシグナル (RxJS & Signals) #
Angular は非同期データの流れを扱うとき、長らく RxJS の Observable を標準ツールとして使ってきました。HttpClient のレスポンスも Observable ですし、ルーターのパラメータの変化も Observable として流れてきます。最初は馴染みにくいですが、慣れると検索・フィルタ・リトライ・キャンセルのような流れを非常に宣言的に扱えます。
これに加えて、最近は単純なリアクティブ状態にはより軽い Signals (Angular 16+) が標準の位置に入ってきました。RxJS と Signals を状況に応じて使い分ける時代に向かっています。
5. 強力な CLI と統一された構造 #
ng new でプロジェクトを作り、ng generate component user でコンポーネントを生成するスタイルの CLI が最初から提供されます。どの Angular プロジェクトでもフォルダ構造とファイル命名がほぼ同じで、ビルド・テスト・アップグレード (ng update) まで CLI がすべて面倒を見てくれます。「どこに何を置くか?」という決定の疲労が少ないです。
Angular で何を作れるか? #
Angular はほぼあらゆる種類の Web アプリを作れますが、特に向いている領域があります。
- エンタープライズシステムと社内ツール: 人事管理、ERP、グループウェア、管理パネルのような大規模・長寿命プロジェクト。統一された構造と強い型システムが光を放ちます。
- ダッシュボードとデータ集約画面: チャート、グリッド、リアルタイム更新が多い画面。RxJS がデータストリームをきれいに扱ってくれます。
- 金融・医療のように規制と長期保守が重要な分野: 「こう書くのが標準」という強制がむしろ長所になります。
- PWA (Progressive Web App): Angular CLI に PWA サポートが内蔵されており、モバイルでネイティブに近い体験を提供する Web アプリを作りやすいです。
- モバイルアプリ: Ionic のようなフレームワークと組み合わせれば、同じ Angular コードで iOS、Android アプリを作れます。
React、Vue、Angular… どんな違いがあるのか? #
同じグループのツールですが、哲学はかなり違います。
- React はもっともミニマルです。UI ライブラリだけを置いて残りは開発者 (あるいはメタフレームワーク) が選んで使います。自由ですが決めなければならないことが多いです。
- Vue は React と Angular の中間です。参入障壁が低く、ドキュメントが親切なので入門者に人気があります。
- Angular はもっともフルパッケージです。ルーティング・フォーム・通信・DI・テストまで一式入っているので、「この問題はこれで解く」が予め決まっています。そのため大きなチームでコードの一貫性を保ちやすい反面、学習初期に覚えることが多く見えるかもしれません。
採用市場全体の規模は React がもっとも大きいです。しかし SI・エンタープライズ・金融の方面に行けば Angular の需要が意外なほど堅実に生きており、一度入った現場は長く使う傾向があるため、安定したキャリアパスを作るのに向いています。
この講座が扱う範囲 #
この講座は Angular のもっとも基本的な核を初めて学ぶ方のために、じっくりと扱います。この講座をすべて終えた後、皆さんは:
- Angular のコンポーネントとテンプレートを直接書いて組み立てられるようになります
- データバインディングとイベント処理で動的な UI を作れるようになります
- Directive と Pipe でテンプレートの表現力を広げられるようになります
- Service と依存性注入を活用してロジックをコンポーネントから分離できるようになります
- Router で複数ページのアプリを構成できるようになります
- HttpClient でバックエンド API と通信できるようになります
もう少し深いテーマ — Reactive Forms、RxJS、Signals、Change Detection、NgRx のようなもの — は別途「Angular 中級/上級」シリーズで扱う予定なので、基礎を終えた方はそちらもチェックしてみてください。
まとめ #
今回の記事では Angular とは何か、なぜ作られたのか、そしてどんな強みを持っているかを見てきました。次回の「Angular基礎 #2 コンポーネントとテンプレート構文」では、Node.js 環境で Angular CLI を使って初めての Angular プロジェクトを作り、コンポーネントの構造から見ていきます。