【実務・中級編】 React.lazyとSuspenseによるコード分割 – React実践ガイド
React
React.lazyとSuspense：バンドルサイズの「爆弾」を解除する技術
フロントエンド開発の現場で、ある日突然「初期ロードが遅すぎる」という悲鳴が上がったことはないだろうか？ 巨大なメインバンドル、数秒間続く真っ白な画面……。これらはWebpackやViteなどのバンドラーが、全てのコードを1つのJSファイルに詰め込もうとした結果、我々が招いた「技術的負債」の典型だ。
今日は、その爆弾を解体し、ユーザー体験を劇的に改善する`React.lazy`と`Suspense`の深淵に潜ろう。単なる公式ドキュメントの写経ではなく、ブラウザの裏側で何が起きているのか、そして現場でどう使いこなすべきかを解説する。
—
1. なぜ「今すぐ読み込む」をやめるべきなのか
ブラウザはJSファイルをダウンロードし、パース（解析）し、実行して初めて画面を描画できる。もし、管理画面のダッシュボードや重厚なエディタ機能など、「特定の条件下でしか使わないコード」まで初期ロードに含めていたらどうなるか？ ユーザーは、目に見えない巨大な荷物をダウンロードさせられているのと同じだ。
これを解決するのが「コード分割（Code Splitting）」という概念だ。Webpackなどのバンドラーに「ここは別のファイルとして切り出してくれ」と指示を出し、必要になった瞬間に非同期で取得する。それをReactの流儀で最もスマートに実現するのが `React.lazy` なんだ。
2. 実践：React.lazyとSuspenseの「現場の作法」
まずは、基本となる実装コードを見てほしい。この構成が、現代のReactアプリケーションにおける「標準的なテンプレート」だ。
import React, { Suspense, lazy } from ‘react’;
// lazyを使って動的インポートする
// コンポーネントが描画される直前まで、JSの読み込みを遅延させる
const HeavyChart = lazy(() => import(‘./components/HeavyChart’));
const AdminDashboard = lazy(() => import(‘./pages/AdminDashboard’));
const App = () => {
return (
アプリケーションのタイトル
{/
Suspenseは「読み込み中」という宣言的な状態を管理する。
fallbackにはローディングスピナーやスケルトンスクリーンを置くのが鉄則。
/}
読み込み中…
}>
);
};
export default App;
なぜこの書き方が優れているのか？
1. 宣言的であること: 「いつ読み込まれるか」を命令的に書くのではなく、「ローディング状態の表示」をコンポーネントツリーの一部として宣言している。
2. キャッシュの効率化: 切り出されたチャンク（JSファイル）はブラウザのキャッシュに乗る。一度読み込めば、二回目以降のアクセスは爆速になる。
—
3. シニアレベルの勘所：ここが現場の落とし穴
「とりあえず全部lazyにすればいい」という初心者がよくやるミスがある。すべてのコンポーネントをlazyにすると、今度はネットワークリクエストが爆発して、逆に遅くなる（ウォーターフォール問題）。
実務で意識すべきポイントを3つ授けよう。
① ルート（ページ）単位での分割が基本
ページ遷移ごとにbundleを分けるのが最も効率的だ。`react-router-dom` を使っているなら、以下のように `Routes` 全体を `Suspense` で囲むのが定石だ。
// ページコンポーネントをレイジーロードする
const Home = lazy(() => import(‘./pages/Home’));
const Settings = lazy(() => import(‘./pages/Settings’));
// ルーティング定義
}>
} />
} />
② 「Loading」を雑に作らない
`fallback` にただの文字を表示するだけでは、ユーザー体験は向上しない。コンポーネントの構造を模した「スケルトンスクリーン」を表示させるのが、今のフロントエンドの標準だ。ユーザーに「あと少しで表示される」という安心感を与える、これがプロの仕事だ。
③ エラーハンドリングを忘れるな
ネットワークエラーは必ず起きる。CDNが一時的にダウンしたり、ユーザーがトンネルに入ってオフラインになったりした時、`lazy` は黙ってクラッシュする。必ず Error Boundary を `Suspense` の外側に配置することを忘れないでほしい。
}>
}>
—
結びに：技術は「何ができるか」より「いつ使うか」
`React.lazy` と `Suspense` は、単なるパフォーマンス改善ツールではない。ユーザーの貴重な通信量と待ち時間を守るための、我々エンジニアの「誠実さ」を形にしたものだ。
何でもかんでも lazy にするのではなく、「そのコンポーネントは、初期ロードに本当に必要か？」という自問自答を繰り返してほしい。その積み重ねが、あなたの書くコードを、そしてあなたが作るプロダクトを、より洗練されたものに変えていくはずだ。
さて、次にエディタを開くときは、バンドルサイズを眺めてみてくれ。きっと、削ぎ落とせる箇所がすぐに見つかるはずだ。健闘を祈る。
コメント