いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。
「Angularで重いコンポーネントを後から読み込んで初期表示を速くしたい」とお考えではありませんか？
ページ下部のグラフやコメント欄など、最初の描画に不要なコンポーネントを遅延させたい方へ。
@deferブロックを使えば、テンプレートを囲むだけでコンポーネント単位の遅延読み込みを実装できます。
いずみAngularの標準機能なので、追加ライブラリは不要です。
ということで、本記事ではAngularの@deferブロックでコンポーネントを遅延読み込みする方法を解説します。
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
 レバテックフリーランス  | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
 Midworks  | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
 ITプロパートナーズ  | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【Angular】@deferブロックでコンポーネントを遅延読み込みする方法
早速ですが、Angularの@deferブロックでコンポーネントを遅延読み込みする方法を解説します。
@deferブロックの仕組み
@deferブロックは、Angular v17で安定版として追加されたテンプレート構文です。
遅延させたいコンポーネントを@defer { … }で囲むと、囲まれた範囲のコンポーネントが初期バンドルから切り離されます。
実際に画面へ描画されるのは、トリガー条件が満たされたあとです。
初期バンドルのサイズが小さくなるため、Largest Contentful PaintやTime to First Byteが改善します。
いずみ初期表示に関係ない部分を後回しにするイメージです。
前提はスタンドアロンコンポーネント
@deferブロックで遅延できるのは、スタンドアロンのコンポーネント・ディレクティブ・パイプだけです。
NgModuleに登録された依存は遅延対象にならず、@deferブロック内に置いても初期バンドルへ含まれます。
加えて、遅延させたいコンポーネントを同じテンプレートの@deferブロック外で参照していると、遅延対象から外れます。
@Component({
selector: 'app-comment-list',
standalone: true,
templateUrl: './comment-list.component.html',
})
export class CommentListComponent {}基本の書き方
まずは最小構成です。
@defer {
<app-comment-list />
}トリガーを省略して@deferブロックだけを書いた場合、ブラウザがアイドル状態になったタイミングで読み込みが始まります。
@placeholderを用意すると、読み込み前に表示する内容を指定できます。
@defer (on viewport) {
<app-comment-list />
} @placeholder {
<p>コメント欄をここに表示します</p>
}on viewportを指定すると、@placeholderの内容が画面内に入った時点で読み込みが始まります。
いずみ@placeholderはトリガーの基準にもなるので、on viewportやon interactionを使うときはほぼ必須です。
トリガーの種類
@deferブロックの丸括弧には、読み込みを開始する条件を書きます。
主なトリガーは次のとおりです。
- on idle：ブラウザがアイドル状態になったら読み込む（トリガー省略時のデフォルト）
- on viewport：@placeholderがビューポートに入ったら読み込む
- on interaction：@placeholderへのクリックやキー入力で読み込む
- on hover：@placeholderにマウスが乗ったら読み込む
- on timer(5s)：指定時間が経過したら読み込む
- on immediate：レンダリング直後に読み込む
- when 条件式：任意の真偽値がtrueになったら読み込む
@defer (on interaction) {
<app-heavy-chart />
} @placeholder {
<button>グラフを表示</button>
}複数のトリガーはセミコロンで区切って併記でき、いずれかが満たされた時点で読み込みが始まります。
読み込み中とエラーの表示
@deferブロックには、@placeholderのほかに@loadingと@errorを付けられます。
@defer (on viewport) {
<app-comment-list />
} @loading (after 100ms; minimum 1s) {
<span>読み込み中...</span>
} @error {
<span>読み込みに失敗しました</span>
} @placeholder (minimum 500ms) {
<span>コメント欄</span>
}@loadingのafterは「読み込みが指定時間より長くかかったら表示する」、minimumは「一度表示したら最低でも指定時間は表示し続ける」という意味です。
スピナーが一瞬だけ点滅する動きを防げます。
いずみafterとminimumはちらつき対策なので、体感の品質にそのまま効きます。
プリフェッチで先読みする
表示のトリガーとは別に、コードを先読みするprefetchを指定できます。
@defer (on interaction; prefetch on idle) {
<app-heavy-chart />
} @placeholder {
<button>グラフを表示</button>
}prefetch on idleを付けた書き方では、ブラウザがアイドルになった時点でグラフ用のコードだけダウンロードしておき、実際の描画はボタンが押されるまで待ちます。
ユーザーが操作した瞬間には既にコードが手元にあるため、表示までの待ち時間が短くなります。
実装の流れ
コメント欄を遅延読み込みする流れを、STEP形式で見ていきます。
遅延対象のコンポーネントでstandalone: trueを設定します。
親コンポーネントのimports配列に対象コンポーネントを書いていた場合は削除します。
@deferブロックが依存を自動で解決するため、imports配列への登録は不要になります。
親コンポーネントのテンプレートで、対象タグを@defer { }で囲みます。
@defer (on viewport) {
<app-comment-list />
} @placeholder {
<div class="skeleton">コメント欄を読み込みます</div>
}ページ下部の要素はon viewport、ユーザー操作が起点の要素はon interactionを選びます。
@placeholderの高さを実際のコンポーネントに近づけると、読み込み時のレイアウトのずれを抑えられます。
いずみ@placeholderの高さ合わせを忘れると、読み込み時にガクッとスクロール位置が動くので注意です。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【厳選】フリーランスエンジニアにおすすめなエージェント3選
フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。
僕が実際に利用しているおすすめエージェントを紹介しますね。
いずみエージェントは必ず複数登録してください。
担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…
僕は実際に5つのエージェントを使い回していますよ。
フリーランスを始めるなら「レバテックフリーランス
」
| 案件数 | マージン率 | 単価 | |
| 約88,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 業界最大級の案件数。
- 業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
- 案件参画中のフォローの充実。
※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。
レバテックフリーランス
は業界最大手のフリーランスエージェントです。
とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！
いずみ僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス
です。
保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。
手厚い保障を重視したいなら「Midworks
」
| 案件数 | マージン率 | 単価 | |
| 約10,000件 | 非公開 | 中 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 手厚い保障で正社員並みの安心感。
- 還元率60％超え＆単価公開でクリアな契約。
- 給与保障制度（審査あり）。
Midworks
は手厚い保障が特徴のフリーランスエージェントです。
フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。
いずみ僕も何度か案件を紹介してもらいました。
自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。
週2〜3日の案件探しなら「ITプロパートナーズ
」
| 案件数 | マージン率 | 単価 | |
| 約5,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 経験者向け | 無料 |
- IT案件に特化したフリーランスエージェント。
- 週2〜3日の案件が豊富。
- リモート案件が多く、直エンドなので単価も高い。
※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。
ITプロパートナーズ
はIT案件に特化したフリーランスエージェントです。
週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。
いずみ週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。
とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！
よくある質問
@deferブロックはどのAngularバージョンから使えますか？
v17で安定版として導入されました。
v18以降はSSRのハイドレーションにも対応し、サーバー側では@placeholderの内容が描画されます。
遅延させたいのにコンポーネントが初期バンドルに含まれてしまいます
対象コンポーネントがスタンドアロンでない、または同じテンプレートの@deferブロック外から参照されている可能性が高いです。
@ViewChildや別の場所でのタグ使用を外すと、遅延対象に戻ります。
ユニットテストで@deferブロックの中身を検証するには？
TestBedのconfigureTestingModuleでdeferBlockBehaviorを指定します。
ComponentFixtureのgetDeferBlocks()で取得したDeferBlockFixtureのrender()を呼ぶと、任意の状態へ遷移させて検証できます。
@deferブロックは何個まで使えますか？
個数の上限はありません。
ただしブロックごとに追加のリクエストが発生するため、細かく分割しすぎるとリクエスト数が増えます。
関連する要素はまとめて1つのブロックにする方が効率的です。
まとめ
今回は、Angularの@deferブロックでコンポーネントを遅延読み込みする方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
