Angular Advent Calendar 2025

最新の技術スタックで再構築する Tour Of Heroes

Last updated at 2025-12-12Posted at 2025-12-12

これは Angular Advent Calendar 2025 の 13 日目の記事です
昨日 12/12(金) は @ver1000000 さんが執筆されました

はじめに

この記事では、Angular の初期の Example として紹介されている Tour of Heroes を
最新の技術スタックで再構築する過程のポイントだけを手短に共有します
今回は、ローカルでの動作確認までとします

対象読者

Angular の経験がある方
Nx を使ったモノレポ管理に興味のある方
Firebase を使ったフルスタック開発を学びたい方
Nest.js を使ったバックエンド実装に挑戦したい方

魅力ポイント

Angular: v20.x の新機能を活用(Nx 対応バージョン)
Nx: モノレポでフロントエンドとバックエンドを効率的に管理
Firebase: ホスティング、データベース、サーバーレス関数を統合
Nest.js: TypeScript で型安全なバックエンド API を構築

技術選定の理由

今回選んだ Nx, Firebase, Nest.js は、いずれも Angular と親和性が高い技術スタックです

Nx: Angular の公式推奨ツールとして、Angular アプリケーションの開発・管理を強力にサポート
Firebase: Angular との統合が容易で、AngularFire などの公式ライブラリが充実
Nest.js: Angular と同様のデコレータベースのアーキテクチャで、フロントエンドとバックエンドで一貫した開発体験を提供

この組み合わせにより、TypeScript による型安全性を保ちながら、フロントエンドからバックエンドまで統一感のある開発が可能になります

アーキテクチャ

今回のローカル開発のアーキテクチャイメージは、下図の通りです

┌─────────────┐         ┌──────────────┐         ┌───────────────────┐
│  Angular    │ <─────> │   Nest.js    │ <─────> │  Firestore        │
│ (Frontend)  │  HTTP   │  (Backend)   │  SDK※   │  (NoSQL Database) │
└─────────────┘         └──────────────┘         └───────────────────┘

※：Firebase Admin SDK

前提条件

下記環境が整っていることを前提とします

開発環境

筆者のマシン環境は、M4 MacBook Air 2025 です
Windows, Linux での開発環境構築は未確認です

執筆時点での環境

$ node -v
v22.18.0
$
$ npm -v
10.9.3
$
$ npx ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/



Angular CLI: 20.3.13
Node: 22.18.0
Package Manager: pnpm 10.15.0
OS: darwin arm64


Angular: 20.3.15
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.13
@angular-devkit/core         20.3.13
@angular-devkit/schematics   20.3.13
@angular/build               20.3.13
@angular/cli                 20.3.13
@schematics/angular          20.3.13
rxjs                         7.8.2
typescript                   5.9.3
zone.js                      0.16.0

$
$ npx nx --version
Nx Version:
- Local: v22.1.3
- Global: Not found

Angular が、v20.x なのは、Nx との互換性を考慮したためです

Angular のマイグレーション

マイグレーションで、やったこと

npm install 実行
ng update 実行(v15.x~v20.x)
control flow のマイグレーション
他のパッケージのマイグレーション
standalone アプリケーションへのマイグレーション

npm install する時の注意

自分の場合、スタートが v14.x だったので、npm install する際には、Node のバージョンを v16.x まで下げる必要がありました

互換性については、サポートされていない Angular バージョン 参照してください

ng update(v15.x~v20.x) 実行する時の注意

ng update 実行する際には、再度互換性あるバージョンに上げる必要があります
自分は、v22.18.0 まで上げました

互換性については、アクティブにサポートされているバージョン 参照してください

force オプションについて

基本的には、ng update や npm install コマンドで --force オプションを使いません
今回は、旧バージョンの npm パッケージの依存関係に限界があるため使用します
angular-in-memory-web-api の最新バージョンは、0.21.0 です

フロントエンドの動作確認

サーバー起動(npx ng serve --open)

プルリクエストリンク

feat: Angular v20.x までのマイグレーションと各種修正

Nx 導入（既存アプリケーションに導入）

既存の Angular アプリケーションに Nx を導入し、モノレポ構造に移行します
これにより、フロントエンドとバックエンドを同じリポジトリで管理できるようになります

Nx 導入後の構造

new-tour-of-heroes/
  ├── apps/
  │   └── frontend/            # フロントエンド
  │       ├── project.json     # 元の angular.json（Nx 形式に変換）
  │       ├── src/
  │       └── ...
  └── nx.json                  # Nx 設定

Nx 導入で、やったこと

Nx ワークスペースの導入(npx nx init)
パッケージマネージャー (npm → pnpm への移行)
プロジェクト構造の再編成(上図)

プルリクエストリンク

feat: nx 環境構築

Firebase の導入

Firebase 導入で、やったこと

Firebase CLI インストール(npm install -g firebase-tools)
Firebase の導入(firebase init)
Firebase emulator の動作確認

firebase init で、選択したもの

Emulator	理由
✔ Firestore	Firestore をローカルで動かす
✔ Functions	Nest.js API をローカルで動かす
✔ Hosting	Angular を Hosting Emulator で動かす

プルリクエストリンク

feat: firebase 環境構築

Nx にバックエンドを追加

バックエンド実装で、やったこと

Nest.js を追加
Nx ワークスペースにバックエンドの追加
@nestjs/swagger を追加
動作確認(curl コマンド)

Nx ワークスペースにバックエンドの追加後の構造

new-tour-of-heroes/
├── apps
│   ├── backend/             # バックエンド
│   │   ├── project.json
│   │   ├── src/
│   │   └── ...
│   └── frontend/            # フロントエンド
│       ├── project.json     # 元の angular.json（Nx 形式に変換）
│       ├── src/
│       └── ...
├── nx.json
├── package.json
├── pnpm-lock.yaml
├── README.md
└── tsconfig.base.json

バックエンドの動作確認

サーバー起動(npx nx serve backend)
Swagger UI(http://localhost:3000/swagger にアクセス)
API エンドポイント(curl)

今回は、バックエンド作成直後のスケルトンの確認です

プルリクエストリンク

feat: バックエンドの追加

Firestore 環境構築

ローカル開発では Firebase Emulator を使用するため、Firebase Console でのデータベース作成は不要です

Firebase Emulator を起動すると、自動的にローカルの Firestore データベースが作成されます

Firestore データ構造（コレクション設計）

Firestore は NoSQL データベースですが、コレクション構造を以下のように定義しました

heroes (collection)
  ├── {heroId} (document)
  │   ├── id: number
  │   └── name: string

Firestore では id フィールドは通常、ドキュメント ID として使用します
既存の Tour of Heroes のデータ構造に合わせて、ドキュメント内にも id フィールドを保持します

Firestore の構築で、やったこと

パッケージインストール
Firestore セキュリティルール更新
初期データ投入スクリプト作成
package.json スクリプト追加
環境変数テンプレート作成

パッケージの説明

firebase-admin: Firebase Admin SDK（サーバーサイドから Firestore にアクセスするためのライブラリ）
@types/node: Node.js の型定義（TypeScript を使用する場合に必要）
tsx: TypeScript ファイルを直接実行するためのツール
dotenv: .env ファイルから環境変数を読み込むためのツール

注意: 本プロジェクトでは pnpm をパッケージマネージャーとして使用しています

Firestore の動作確認と初期データの登録確認

環境変数エクスポート(export FIRESTORE_EMULATOR_HOST=localhost:8080)
エミュレータ起動(firebase emulators:start)
初期データの登録(pnpm seed:firestore)

登録データの注意

エミュレータを止めてしまうとデータは破棄されてしまいます
再度起動した時は、再度データを登録してください

動作確認動画

Firestore の動作確認と初期データの登録確認動画

プルリクエストリンク

feat: Firestore 環境構築と初期データの登録

バックエンド API 実装

実装する API エンドポイント

実装するエンドポイントは、下記の通りです

メソッド	エンドポイント	説明
`GET`	`/api/heroes`	全ヒーロー一覧取得
`GET`	`/api/heroes/:id`	特定のヒーロー取得
`GET`	`/api/heroes/search?name={name}`	ヒーロー検索
`POST`	`/api/heroes`	ヒーロー作成
`PUT`	`/api/heroes/:id`	ヒーロー更新
`DELETE`	`/api/heroes/:id`	ヒーロー削除

API 実装作業で、やったこと

Hero エンティティ実装
DTO（Data Transfer Object）実装
HeroesService 実装
HeroesController 実装
HeroesModule 実装

バックエンドの API 動作確認

環境変数エクスポート(export FIRESTORE_EMULATOR_HOST=localhost:8080)
エミュレータ起動(firebase emulators:start)
初期データの登録(pnpm seed:firestore)
バックエンドの起動(npx nx serve backend)
curl コマンドで、エンドポイントへリクエスト

動作確認動画

API 動作確認動画

プルリクエストリンク

feat: バックエンド API 実装

フロントエンド API 実装変更

API 実装変更作業で、やったこと

hero.service.ts の修正
In-Memory Web API の削除
バックエンド CORS 設定の追加

フロントエンド・バックエンド結合動作確認

環境変数エクスポート(export FIRESTORE_EMULATOR_HOST=localhost:8080)
エミュレータ起動(firebase emulators:start)
初期データの登録(pnpm seed:firestore)
バックエンドの起動(npx nx serve backend)
フロントエンドの起動(npx nx serve frontend)

動作確認動画

フロントエンド・バックエンド結合動作確認

プルリクエストリンク

feat: フロントエンド側 API 実装変更

まとめ

今回やったこと

項目	内容
Angular	v20.x へマイグレーション、動作確認
Nx	既存 Angular アプリをモノレポ化
Firebase	Firestore / Functions / Hosting を Emulator で統合
Nest.js	バックエンド API の実装＋ Swagger UI
Frontend	バックエンド API と接続し結合動作確認

ポイント

すべてローカルで完結
データベースも API もフロントも「エミュレータ」で一体化
「まずは手元で動かす」ことに集中出来る

なぜローカルに限定したか

デプロイなしで高速に開発できる
失敗を気にせず試せる
Firebase Emulator が高機能で十分学習になる
初学者や検証用としてベスト

今後 CI/CD を追加すると得られる学び

学び	説明
自動ビルド & 自動テスト	PR 作成時に Nx で差分ビルドやテストが走る
自動デプロイ	Hosting / Cloud Functions へ GitHub Actions で自動反映
環境変数・Secrets 管理	dev/stg/prod の構成管理、セキュリティ知識
チーム開発の実践フロー	PR の品質担保、レビュー効率化、ロールバック

今回紹介した記事のコードは、下記リポジトリです

おわりに

最後までお読みいただきありがとうございました

Angular の古典的なチュートリアルを、Nx, Firebase, Nest.js を用いた現代的なモノレポ構成で再構築しました
環境構築には少し手間がかかりますが、この基盤は今後の開発効率を大きく向上させるはずです

ぜひリポジトリを手元で動かして、モダンなフルスタック開発を体感してみてください

この記事が皆さんの挑戦の一助となれば幸いです！
引き続き Angular Advent Calendar をお楽しみください！

明日 12/14(日) は、@komura_c さんです！
よろしくお願い申し上げます！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up