サンプルコードで身につける: Angularとは — SPAをまるごと作れるフレームワーク

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

1従来型サイトとSPAの違い

従来型はページを移動するたびにサーバーが新しいHTMLを丸ごと返します。SPAでは最初の1枚だけを受け取り、以降はJavaScriptが必要な部分だけを書き換えます。この違いが操作の滑らかさの差になります。

// ── 従来型のWebサイト ──
// ページ移動のたびにサーバーがHTMLを丸ごと返す
//   /list を開く    → サーバーが list.html を返す(画面全体を再読み込み)
//   /detail を開く  → サーバーが detail.html を返す(また再読み込み)

// ── SPA(Angularが作るもの)──
// 最初に1枚だけHTMLを受け取り、あとはJSが書き換える
//   初回アクセス    → index.html とJSを受け取る
//   /list に移動    → JSが画面の中身だけを一覧に書き換える
//   /detail に移動  → JSが画面の中身だけを詳細に書き換える
//   → 画面全体の再読み込みが起きないので操作が滑らか

2「一式揃っている」とはどういうことか

SPAを作るには画面部品・通信・ルーティングなど複数の道具が必要です。Angularはそれらを公式がまとめて提供するため、道具選びで迷わずに開発を始められます。チームでプロジェクトが違っても構成が似るのが実務上の利点です。

// SPAづくりに必要な道具と、Angularでの担当
//
// やりたいこと           Angularでの道具(すべて公式)
// ─────────────────────────────────────────────
// 画面部品を作る         コンポーネント(@Component)
// 値の変化を画面に反映   シグナル(signal)
// APIからデータ取得      HttpClient
// URLごとに画面を切替    Router
// フォーム入力の管理     Forms
// ビルド・開発サーバー   Angular CLI(ng コマンド)
//
// 他のライブラリを探して組み合わせる作業が最小限で済む

3Angularのコードを一目見てみる

詳細は後のレッスンで学ぶので、ここでは雰囲気だけつかみましょう。TypeScriptのクラスに @Component という印を付けると画面部品になる、というのがAngularの基本形です。この形がこれから何度も登場します。

import { Component } from '@angular/core';

// クラスに @Component を付けると「画面部品」になる
@Component({
  selector: 'app-hello',            // HTMLタグとしての名前
  template: '<h1>{{ message }}</h1>', // 表示する内容
})
export class Hello {
  message = 'はじめてのAngular';
}

// 今は「クラス + デコレータ = 画面部品」とだけ分かればOK

4バージョンの確認とリリースサイクル

Angularはおよそ半年ごとにメジャーバージョンが上がります。自分のプロジェクトのバージョンは ng version で確認できます。記事を読むときは、その記事がどのバージョン前提かを意識する習慣が大切です。

# プロジェクトのAngularバージョンを確認する
ng version

# 出力例(抜粋):
# Angular CLI: 20.1.0
# Angular: 20.1.2
# Node: 22.12.0

# リリースサイクルの目安:
#   ・約半年ごとにメジャーバージョンが1つ上がる
#   ・v17(2023年)以降は standalone が標準の書き方
#   ・古い記事の NgModule 前提のコードは「古い書き方」と判断してよい

5SPAのHTMLはほぼ空っぽ

Angularアプリの index.html を見ると、bodyの中にはタグが1つあるだけです。画面の中身はすべてJavaScriptが後から描き込むため、HTML自体はほぼ空で構いません。これがSPAという方式を最も分かりやすく物語っています。

<!-- Angularアプリの index.html(ほぼこれで全部) -->
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>MyApp</title>
  </head>
  <body>
    <!-- 中身はこのタグ1つだけ。ここにJSが画面を描き込む -->
    <app-root></app-root>
  </body>
</html>