やあ、Reactの世界へようこそ！ここまで学習を進めてきた君は、きっと「コンポーネント」という魔法のブロックを使って、Webページを組み立てる楽しさを感じ始めている頃じゃないかな？

でも、アプリが少しずつ大きくなってくると、こんな悩みが出てくるはずだ。「あれ、なんだかページを開くまでの読み込み時間が長くなってない？」

そう、Reactのアプリは放っておくと、「全部の荷物を一気に背負って旅に出る」ような状態になりがちなんです。今日は、そんな重たい荷物を「必要なときに、必要な分だけ」取り出せるようにする、賢い旅のテクニック――`React.lazy`と`Suspense`について、一緒に紐解いていこう。

—

「全部盛り」の呪いからアプリを解放しよう

想像してみてほしい。君が近所のコンビニに「おにぎり」を買いに行くだけなのに、なぜか巨大なキャリーケースを3つも持たされて、その中には服も、本も、調理器具まで全部詰まっているとしたらどう思う？「重いし、歩くのが大変だよ！」ってなるよね。

Web開発も同じなんだ。Reactでアプリを作ると、デフォルトでは「全てのページ、全ての機能のプログラム」を、最初にまとめて読み込んでしまう。これを「バンドル（束ねる）」と言うんだけど、機能が増えれば増えるほど、この束はどんどん肥大化していく。

そこで登場するのが、「必要なときに、その機能だけを後から取りに行く」という考え方（コード分割）。これを実現するのが `React.lazy` なんだ。

—

React.lazyで「必要なときだけ」を叶える

`React.lazy` は、まるで「魔法のカタログ」のようなもの。普段はカタログだけ持っておいて、その機能が必要になった瞬間に、「あ、これください！」とサーバーに注文を出すイメージだね。

import React, { lazy } from ‘react’;

// 普通のインポートは「最初から全部持ってくる」
// lazyを使うと「使う時だけ読み込む（動的インポート）」に変わる
const HeavyComponent = lazy(() => import(‘./HeavyComponent’));

function App() {
return (

);
}

これだけで、最初の読み込みは驚くほど軽くなる。でも、ちょっと待って。「注文してから届くまでの間」はどうすればいいんだろう？

—

Suspense：届くまでの「待ち時間」を優しく演出する

注文したおにぎりが届くまでの間、何もない空間で待たされるのは不安だよね。そこで登場するのが `Suspense` です。

`Suspense` は、いわば「お取り寄せ中の看板」。データが届くまでの間、「今、頑張って読み込んでますよ！」という安心感をユーザーに提供してくれるんだ。

import React, { lazy, Suspense } from ‘react’;

const HeavyComponent = lazy(() => import(‘./HeavyComponent’));

function App() {
return (

}>