【入門編】 React.lazyとSuspenseによるコード分割 – React実践ガイド

React

2026.09.16

こんにちは！Reactの世界へようこそ。
日々コードを書いていると、「あれ？これってどうやればもっとスマートになるんだろう？」と立ち止まることがよくありますよね。

今日は、Reactのパフォーマンスを劇的に向上させる魔法の道具、「React.lazy」と「Suspense」についてお話しします。

難しそうな名前ですが、大丈夫。これ、実は「レストランの注文」に例えると、ものすごく分かりやすくなるんです。

—

1. なぜ「全部一度に」読み込むのがいけないの？

例えば、あなたがものすごく豪華なレストランに行ったとします。席に着いた途端、前菜からデザートまで、全メニューの料理がテーブルにドカンと運ばれてきたらどう思いますか？

「いやいや、まずはスープから食べたいよ！デザートが溶けちゃうよ！」って言いたくなりますよね。

Webサイトも同じです。ユーザーが最初に画面を開いたとき、まだ見もしない「お問い合わせフォーム」や「詳細な設定画面」のコードまで全部一度に読み込んでいたら、表示されるまでに時間がかかってしまいます。

そこで登場するのが「React.lazy」と「Suspense」です。

—

2. React.lazy：必要なときに、必要な分だけ

`React.lazy`は、「注文を受けてから料理を作る」という仕組みです。

通常、私たちはコードをすべて最初に読み込みますが、`lazy`を使うと「ユーザーがそのボタンを押したり、その画面に移動したりした瞬間に読み込む」という賢い動きをしてくれます。

サンプルコード：まずは使ってみる

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

// 普通は import Header from ‘./Header’; と書きますが、
// lazyを使うと「必要になった時に読み込む」準備ができます。
const HeavyComponent = lazy(() => import(‘./HeavyComponent’));

function App() {
return (

僕の素晴らしいサイト

{/ Suspenseで囲むのがポイント！ /}
ただいま準備中…美味しい料理を運んでいます！

);
}

—

3. Suspense：待っている間の「おもてなし」

`React.lazy`で読み込みを遅らせると、ネットワークの状況によっては、画面が表示されるまで一瞬「空白の時間」が生まれてしまいます。

ここで登場するのが`Suspense`（サスペンス）です。
これは、料理が出てくるまでの間、「お待ちください」とメニュー表を見せてくれるウェイターさんのような存在です。

`fallback`というプロパティに、読み込み中に出したいローディング画面（スピナーや「読み込み中…」という文字）を指定するだけで、Reactが自動的に「読み込み完了！」と同時に中身を差し替えてくれます。

—

4. なぜこれが「現場の知恵」なのか？

実務でこの技術を使うとき、ただ「便利だから」という理由だけで使うわけではありません。

初回の表示速度が爆速になる: ユーザーは最初の0.1秒で「このサイト、重いな」と判断します。`lazy`でそれを回避できるのは、SEO的にもUX的にも最強です。
不要な通信を減らせる: ユーザーが絶対に使わない機能のコードを読み込ませない。これは、特に通信環境の悪いモバイルユーザーに対して、最高のおもてなしになります。

つまずきやすいポイントへのアドバイス

「`Suspense`で囲んだのに、真っ白な画面のまま動かない！」という時は、だいたい以下のようなことが原因です。

1. コンポーネントが `export default` されていない: `lazy`は標準的なエクスポート（default export）を前提としています。
2. 階層が深すぎる: 複数のコンポーネントを一度に読み込むなら、それらをまとめた親コンポーネントを用意して、それを `lazy` するのがコツです。

—

最後に：完璧を目指さなくていい

最初は「どこを`lazy`にすればいいんだろう？」と迷うかもしれません。でも、それでいいんです。

まずは、「ユーザーが最初に見なくてもいい画面（例えば管理画面や、詳細な設定ページ）」から試しに`lazy`で切り離してみてください。それだけで、あなたのアプリは一段階「プロの作り」に近づきます。

Reactは、あなたのコードを少しずつ、より優しく、より賢くするための道具です。焦らず、少しずつ実験していきましょう。

もしコードを書いていて「動かない！」と困ったら、いつでも聞きに来てくださいね。あなたのコードが軽やかに動くその瞬間を、一緒に目指しましょう！