VIDEO LESSON

ReactのFragment・StrictMode・Suspenseとlazy：組み込み機能の使い方の解説動画

再生時間 7:25動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00リアクト入門の第七回です。
0:02今回は、フラグメント、ストリクトモード、サスペンスとレイジーという、フック以外の組み込み機能を学びます。
0:10題材は、必要なときにだけ読み込むリアクト用語集です。
0:13普段は隠れていて、ボタンを押したときだけ姿を見せる小さなアプリです。
0:18フラグメントは余分な要素を増やさずに複数をまとめ、ストリクトモードは開発中の問題を早めに見つけます。
0:26レイジーはコンポーネントのコード読み込みを遅らせ、サスペンスはその間の表示を受け持ちます。
0:32四つの役割を分けて理解することが、この回のゴールです。
0:36一つずつ、コードと一緒に確認していきましょう。
0:39まず、四つの機能の役割を二つのグループに分けます。
0:43一つ目は構造と検証です。
0:45フラグメントは、余分なディーオーエム要素を作らずに複数の要素をまとめる仕組みです。
0:51ストリクトモードは、配下のコンポーネントに開発時の追加チェックを有効にします。
0:57どちらも、見た目を飾るためのエイチティーエムエル要素を作るものではありません。
1:03二つ目は読み込みです。
1:04レイジーは、コンポーネントのコードを必要になるまで読み込まないようにします。
1:10サスペンスは、配下の処理が待機している間、フォールバックに指定した表示へ切り替えます。
1:17今回は、この二つを組み合わせて使います。
1:20用語集の本体、グロッサリー・ティーエスエックスを作ります。
1:24用語と説明は、ディーエルの中にディーティーとディーディーを並べる形がふさわしいため、
1:28余分なディブは追加しません。
1:32データは、プロップス、ステート、フックの三件です。
1:35各用語にはアイディーを持たせ、マップで一覧に変換します。
1:39ここで各組を包むのがフラグメントです。
1:42フラグメント自体は画面上の要素にならないので、ディーエルの直接の子はディーティーとディーディーのまま保たれます。
1:50見出しには関連付けの属性も付け、画面の構造が支援技術にも伝わるようにしています。
1:56構造を変えずに複数をまとめられるのが、フラグメントの価値です。
2:00フラグメントには、短く書ける省略記法もあります。
2:04空の山かっこの組み合わせで要素を包む書き方です。
2:08ただし、この省略記法にはキーを指定できません。
2:12今回のように一覧の各組を並べる場合は、キーが必須です。
2:16そこで、フラグメントをインポートして明示的に書き、キーには用語データのアイディーを渡します。
2:24キーは、リアクトが一覧の各要素を見分けるための目印です。
2:29フラグメントで包んだからといって、安定したキーが必要な点は変わりません。
2:35並べ替えや追加が起きても壊れないよう、位置ではなくデータのアイディーを使いましょう。
2:42次に、アプリ・ティーエスエックスで読み込みの境界を作ります。
2:47レイジーでグロッサリーを包むと、このコンポーネントは最初から読み込まれません。
2:53ボタンで開く操作があり、初めて描画されるタイミングでモジュールの読み込みが始まります。
3:00読み込みの間、画面が真っ白にならないよう、サスペンスで包みます。
3:05フォールバックには、用語集を読み込んでいます、というステータス表示を指定します。
3:11開くかどうかはショーグロッサリーというステートで管理し、閉じている間は用語集を描画しません。
3:18ボタンの文言も、開いているかどうかで、開く、閉じる、と切り替わります。
3:24パネル自体は、隠す属性で隠します。
3:27レイジーを使うときに、間違えやすい約束が二つあります。
3:31一つ目は、読み込む側の形です。
3:33この書き方では、読み込むモジュールがデフォルトエクスポートしたコンポーネントである必要があります。
3:41用語集は、エクスポートデフォルトで定義してあるので、そのまま渡せます。
3:46二つ目は、宣言する場所です。
3:48レイジーの宣言をコンポーネントの関数の中に置くと、レンダーのたびに別のコンポーネントとして扱われ、
3:53ステートがリセットされる原因になります。
3:59必ずモジュールのトップレベル、外側で宣言してください。
4:03開発時の検証には、メイン・ティーエスエックスを確認します。
4:07ここでアプリ全体をストリクトモードで包むと、配下のコンポーネントに追加チェックが効きます。
4:13ヴァイトのテンプレートでは、最初から設定されていることが多いので、重ねて追加する必要はありません。
4:20ルート要素が見つからない場合は、エラーを投げて早めに気づけるようにしています。
4:25ストリクトモードは画面の部品ではなく、開発中にだけ働く検証の枠組みです。
4:30ここはアプリの入口のファイルなので、最初に目を通す価値があります。
4:35本番の表示内容そのものを変えるものではない、という位置づけを押さえてください。
4:41ストリクトモードでは、開発中にレンダーやエフェクトの処理が追加で実行されることがあります。
4:47これは不具合ではなく、問題を見つけるための仕掛けです。
4:51たとえば、プロップスを直接書き換えていないか、エフェクトで登録したイベントを解除し忘れていないか、
4:55といった点に気づけます。
4:59表示が二重に見えるからといって、チェックを隠すためにストリクトモードを外すのは本末転倒です。
5:05まず、レンダーが純粋か、エフェクトの後始末があるかを確認しましょう。
5:10本番ですべてが二重に実行されるわけではない点も、安心材料です。
5:15動作を確認します。
5:16初期表示では用語集は出ていません。
5:18開くボタンを押すと用語集が表示され、閉じると消え、もう一度開くと再表示されます。
5:24ディーエルの直接の子がディーティーとディーディーになっていて、フラグメント用の要素が増えていないことも確認しましょう。
5:32読み込みが速い環境では、待機表示は一瞬で目に見えないことがあります。
5:37ネットワークの低速設定とキャッシュの無効化を使うと、初回の読み込みを観察しやすくなります。
5:43なお、開発サーバーと本番ビルドでは配信されるファイルの構成が違うため、最終的な分割はビルド成果物でも確認してください。
5:51最後に、役割を取り違えやすい注意点です。
5:54サスペンスは、あらゆる通信を自動で見つける仕組みではありません。
5:59ユースエフェクトの中でフェッチしただけでは、その通信を検出してフォールバックを表示することはありません。
6:08今回使っているのは、正式に対応しているレイジーのコード読み込みです。
6:13もう一つ、待機と失敗は別物です。
6:16フォールバックは待っている間の表示であり、読み込みが失敗したときの表示は、
6:20エラーバウンダリーなどで別に用意します。
6:25この例には、失敗時の再試行の画面は含まれていません。
6:29また、再び開くときは読み込み済みのモジュールが再利用できますが、閉じる際に取り外したコンポーネントのステートまで残るとは限りません。
6:39まとめです。
6:40部品の構造にはフラグメント、開発時の検証にはストリクトモード、遅れて読み込むにはレイジー、
6:46待機中の表示にはサスペンス、と役割で選ぶのがこの回の学びです。
6:53今回、記事のコードそのままをタイプスクリプトの厳密な型チェックにかけて、
6:57エラーがないことを確認しました。
7:01用語データや開閉の仕組みに関する計算も、ノード・ジェーエスで実行して確かめています。
7:08一方、ブラウザー上で遅延読み込みの表示切り替えを目で確認する作業は、実行環境の制約で未実施です。
7:16次回は、独自関数ノーマライズタイトルで、文字列の整形を部品化する方法を学びます。
7:23お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

ReactのFragment・StrictMode・Suspense・lazyを用語集の実装で解説。key付きFragment、遅延読み込み、開発時の追加チェック、待機と失敗の違いを学びます。

解説記事・サンプルコードを読む：ReactのFragment・StrictMode・Suspenseとlazy：組み込み機能の使い方 →