React.lazyとSuspense――Lazy Component
routeやwidget単位でコードを分割します。React.lazyでcomponentを遅延読み込みし、Suspenseのfallbackを表示して、ページの残りを操作可能に保ちます。
「React.lazyとSuspense――Lazy Component」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
なぜコード分割を行うのですか？
目標：必要なときだけコードを読み込み、より速く配信します。
- オンデマンドのコンポーネントには React.lazy
- 読み込み中のフォールバックには Suspense
- UI の残りの部分は使用できる状態に保ちます
分割の対象
- ルートや大きな画面
- 使用頻度の低いパネル（チャートやエディター）
- 処理の重いサードパーティ製ウィジェット
遅い部分の近くに小さな境界を選びます。
基本的な遅延読み込みコンポーネント
ユーザーが要求したときにコンポーネントを遅延読み込みし、その間 Suspense は小さなメッセージを表示します。
<div id="root"></div>
ルート形式の分割
Details タブだけを分割して読み込みます。リストはすぐに表示でき、境界が遅い領域を分離します。
<div id="root"></div>
事前読み込みとオンデマンドの遅延読み込み
ユーザーの意図を予測できる場合（例：ホバーやフォーカス時）は、事前読み込みを検討します。境界は小さく、フォールバックは軽く保ちます。
- ホバー時に Preload します
- 必要になったら lazy で読み込みます
- ページ全体のスピナーではなく、スケルトンを表示します
注意点とヒント
- アプリのルートに巨大な境界を 1 つだけ配置しないでください
- フォールバックでレイアウトシフトを隠さず、サイズを合わせます
- すべての小さなファイルではなく、ユーザーフローに基づいて分割します
lazy と Suspense の目的の確認
まとめ
まとめ：重いルートやウィジェットを React.lazy で分割し、Suspense で囲みます。小さなフォールバックを使用して、UI の残りの部分が応答性を保てるようにします。
よくある質問
「React.lazyとSuspense――Lazy Component」レッスンは無料ですか？
はい。「React.lazyとSuspense――Lazy Component」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「React.lazyとSuspense――Lazy Component」で何を学びますか？
routeやwidget単位でコードを分割します。React.lazyでcomponentを遅延読み込みし、Suspenseのfallbackを表示して、ページの残りを操作可能に保ちます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「React.lazyとSuspense――Lazy Component」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- React.lazyとSuspense――Lazy Component
- Route単位とComponent単位の分割
- Bundle、CacheとPreloadingのヒント