【Angular技術要素解説】ビルドツールとパフォーマンス最適化を理解する：CLI・esbuild・SSR

はじめに

Angular技術要素解説シリーズ、第8弾です。

今回は、書いたコードを実際にブラウザで動くアプリに変換するビルドツールと、表示速度を改善する各種の仕組みを解説します。

普段何気なく使っているng serveやng buildの裏側で何が起きているかを理解しましょう。

この記事で扱う技術要素

• Angular CLI(ngコマンド)
• esbuild / Vite
• AOT(Ahead-of-Time)コンパイル
• Ivy
• SSR(Server-Side Rendering) / Hydration

Angular CLIとは

Angular CLIは、Angularプロジェクトの作成・開発・ビルド・テストを統一的なコマンドで行うための、公式コマンドラインツールです。

# Angular CLI自体をグローバルにインストール
npm install -g @angular/cli

# 新規プロジェクトを作成
ng new my-app

# 開発サーバーを起動(ファイル変更を検知して自動リロード)
ng serve

# コンポーネント・サービス・ディレクティブ等の雛形を生成
ng generate component user-profile
ng generate service user
ng generate directive highlight

# 本番用にビルド(最適化されたファイル一式をdist/フォルダに出力)
ng build

# ユニットテストを実行
ng test

ng generate(短縮形ng g)を使うと、コンポーネントの.ts・.html・.cssファイルが決まった構成で自動生成されるため、プロジェクト間でのファイル構成のばらつきを抑えられます。

チーム開発において「新しいメンバーが来ても、同じコマンドを叩けば同じ構成のファイルが作れる」という点は、地味ですが大きなメリットです。

esbuildとVite：ビルドの高速化

ng build・ng serveの裏側では、TypeScriptやSCSSなどのソースコードを、ブラウザが実行できるJavaScript・CSSに変換する処理(バンドル処理)が行われています。

この処理を担うのがesbuildとViteです。

• esbuild: Go言語で実装された、非常に高速なJavaScript/TypeScriptバンドラー。Angular CLIは現在、本番ビルドの中核にこのesbuildを採用しています
• Vite: 開発時のビルド・ホットリロードを高速化するツール。ng serveで使われる開発サーバーの基盤になっています

以前のAngular(16以前)はWebpackというバンドラーを中心に使っていましたが、esbuildベースのビルドシステムへの移行により、ビルド時間が従来比60〜75%短縮されたと報告されています。

開発者としてこれらのツールの内部実装を直接いじる機会は少ないですが、「なぜ最近のAngularはビルドが速くなったのか」を理解しておくと、他のフレームワーク(Vue、Svelteなど)のツールチェインとの比較の際にも役立ちます。

# angular.jsonでビルダーの種類を確認できる
# "builder": "@angular-devkit/build-angular:application" のように指定されている

AOT(Ahead-of-Time)コンパイルとIvy

Angularのテンプレート(HTML風の記法)は、そのままではブラウザが理解できないため、最終的にはJavaScriptのコードに変換(コンパイル)される必要があります。

このコンパイルには2つのタイミングがあります。

方式	コンパイルのタイミング	特徴
JIT(Just-in-Time)	ブラウザでアプリを実行する瞬間	開発時に使われていた方式。初回表示が遅くなりがち
AOT(Ahead-of-Time)	ng buildを実行する、ビルドの段階	現在の標準。ブラウザは変換済みのコードを受け取るだけでよい

現在のAngularは、開発時・本番ビルド時ともに基本的にAOTを採用しています。

テンプレートを事前にJavaScriptへ変換しておくことで、ブラウザ側でのコンパイル処理が不要になり、初期表示が高速化されます。

このAOTコンパイルを支えているレンダリングエンジンがIvyです。

Angular 9で導入されたIvyは、以前のレンダリングエンジン(View Engine)と比べて、生成されるコードのサイズを削減し、未使用のコード(使っていないコンポーネントの機能など)を取り除くツリーシェイキングの精度を高めました。

SSR(Server-Side Rendering)とHydration

通常のAngularアプリ(SPA)は、最初は空っぽのHTMLがブラウザに届き、その後JavaScriptが実行されて初めて画面の中身が表示されます。

この方式には、以下のような課題があります。

• JavaScriptの読み込み・実行が終わるまで、ユーザーには何も見えない(画面が真っ白になる)
• 検索エンジンのクローラーが、中身のない空のHTMLしか読み取れないことがある(SEOへの影響)

SSR(Server-Side Rendering)は、サーバー側で事前にHTMLを生成してからブラウザに届けることで、これらの課題を解決します。

# SSR対応のAngularプロジェクトを新規作成する場合
ng new my-app --ssr

# 既存プロジェクトにSSRを追加する場合
ng add @angular/ssr

SSRによってサーバーから届いたHTMLは、見た目としてはすでに表示されていますが、この時点ではまだ「ボタンを押しても反応しない」という静的な状態です。

この静的なHTMLに対して、クライアント側でAngularのインタラクティブ性(クリックイベントの処理など)を後付けする処理をHydration(ハイドレーション)と呼びます。

SSRとHydrationの流れ:
1. ユーザーがページにアクセスする
2. サーバーがHTMLを事前に生成し、ブラウザへ送信する(この時点でコンテンツは見える)
3. ブラウザ側でAngularのJavaScriptが読み込まれる
4. Hydrationが実行され、静的なHTMLに対してクリック等のイベント処理が組み込まれる
5. ページが完全にインタラクティブになる

Incremental Hydration(インクリメンタルハイドレーション)

さらに、ページ全体を一度にHydrationするのではなく、必要な部分から段階的にHydrationしていくIncremental Hydrationという仕組みも用意されています。

以前の記事で解説した@deferブロックと組み合わせることで、「最初に見えている部分だけを素早くインタラクティブにし、画面外の部分は後回しにする」という制御が可能になり、ユーザーが実際に操作可能になるまでの時間(Time to Interactive)が改善されます。

@Component({
  selector: 'app-product-page',
  standalone: true,
  template: `
    <h1>{{ productName }}</h1>

    @defer (hydrate on viewport) {
      <!-- 画面に表示された時点でHydrationされる。それまではサーバー生成のHTMLのまま -->
      <app-review-section [productId]="productId" />
    }
  `,
})
export class ProductPageComponent {
  productName = 'ワイヤレスイヤホン';
  productId = 123;
}

パフォーマンス最適化の全体像

これまで本シリーズで解説してきた技術要素も含め、Angularアプリのパフォーマンスを改善する主な手段を整理します。

手段	効果	関連記事
Signals + Zoneless変更検知	無駄な再描画を削減する	Signals編
@deferによる遅延読み込み	初期表示に不要な部分の読み込みを後回しにする	テンプレート構文編
ルートの遅延読み込み(Lazy Loading)	使われていない画面のコードを最初に読み込まない	ルーティング編
AOTコンパイル + Ivy	ブラウザ側でのコンパイル処理を不要にし、バンドルサイズを削減する	本記事
SSR + Hydration	初期表示の体感速度・SEOを改善する	本記事

まとめ

用語	役割
Angular CLI	プロジェクト作成・生成・ビルド・テストを統一コマンドで行うツール
esbuild / Vite	Angular CLIが採用している、高速なビルド・開発サーバーの基盤
AOTコンパイル	テンプレートをビルド時点で事前にJavaScriptへ変換する方式(現在の標準)
Ivy	AOTコンパイルを支える、Angular 9以降のレンダリングエンジン
SSR	サーバー側で事前にHTMLを生成し、初期表示・SEOを改善する仕組み
Hydration	SSRで生成された静的HTMLに、クライアント側でインタラクティブ性を後付けする処理

次回は、Angularアプリの品質を支えるテストについて解説します。

学習に使った書籍

本記事の内容整理にあたっても、以下の書籍を参考にしました。

• Angular 超入門 第2版 [ 掌田津耶乃 ]
• Angularアプリケーションプログラミング 開発の勘所と手順をしっかりマスター [ 山田祥寛 ]
• Angular Webアプリ開発スタートブック [ 大澤文孝 ]

※上記リンクはアフィリエイトリンクを含みます。

参考

• Angular公式ドキュメント - Build system
• Angular公式ドキュメント - Server-side rendering
• Angular公式ドキュメント - Hydration