1. Angularとは — SPAをまるごと作れるフレームワーク

Angularは、Googleが開発しているWebアプリケーションのフレームワークです。作れるのはSPA(シングルページアプリケーション)と呼ばれる形式のアプリで、サーバーから受け取るHTMLは実質1枚だけ、あとはJavaScriptが画面を書き換えることでページ遷移のような動きを実現します。画面がまるごと再読み込みされないため、デスクトップアプリのような滑らかな操作感になります。

Angularの特徴は「一式揃っている」ことです。画面部品(コンポーネント)、状態管理、サーバー通信、ルーティング、ビルドツールまでが最初から公式にセットで提供されるので、ライブラリの選定や組み合わせに悩む時間が少なく、チーム開発でも構成が揃いやすいのが実務での強みです。

Angularはおよそ半年ごとにメジャーバージョンが上がります。数字が大きく変わっても壊れる変更は少なく計画的ですが、ネット上の記事は古いバージョン前提のものも多いので、「v17以降のモダンな書き方か」を意識して読む癖をつけると混乱を避けられます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// ── Angularが担当する範囲(概念図) ──
//
// ブラウザ
//   └─ index.html(1枚だけ)
//        └─ Angularアプリ(JavaScriptが画面を書き換える = SPA)
//             ├─ コンポーネント …… 画面部品(見た目 + ロジック)
//             ├─ シグナル      …… 状態管理(値の変化を画面に反映)
//             ├─ HttpClient    …… サーバー通信(APIの呼び出し)
//             ├─ Router        …… ルーティング(URLと画面の対応)
//             └─ Angular CLI   …… ビルド・開発サーバー・雛形生成
//
// これらを別々のライブラリで集めるのではなく、
// 公式が一式セットで提供するのがAngularのスタイル

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗