VIDEO LESSON

Next.jsのコンポーネント入門：props・state・childrenを理解するの解説動画

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

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

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

0:00こんにちは。
0:00今回は、ネクストジェイエスのコンポーネント入門です。
0:03画面を部品に分けて組み立てる仕組みを、タイプスクリプトとページズルーターのコードで学びます。
0:09ポイントは三つです。
0:10親から受け取る入力であるプロップス、部品の中で操作によって変わるステート、
0:13そして内側の内容を受け取るチルドレンです。
0:17リアクトは画面部品のライブラリーで、ネクストジェイエスはルーティングやエイチティーエムエルの生成を加えるフレームワークです。
0:24この違いを押さえて、挨拶カード、保存ボタン、枠の部品を順に作っていきましょう。
0:29コード例はすべて実物に沿って用意しましたので、手元で写しながら進めると理解が深まります。
0:34まず、関数から画面を返す基本形です。
0:37コンポーネント名は大文字で始め、エイチティーエムエルに似たジェイエスエックスを返す関数として定義します。
0:44ジェイエスエックスを含むファイルの拡張子はティーエスエックスです。
0:48グリーティングプロップスは、この部品に渡せる値の型です。
0:52ネームは必須の文字列、メッセージはクエスチョンマークを付けて省略可能にします。
0:58メッセージを省略するかアンディファインドを渡すと、引数の既定値、今日も一緒に学びましょうが使われます。
1:05波括弧でジャバスクリプトの値を埋め込む書き方にも注目してください。
1:09次に、同じ部品を使い回すページを作ります。
1:13エスアールシー・ページズ・グリーティングス・ティーエスエックスからグリーティングを読み込み、
1:17二回使います。
1:21一つ目は名前だけを渡し、メッセージは既定値のままです。
1:25二つ目は名前とメッセージの両方を渡します。
1:28開発サーバーでスラッシュ・グリーティングスを開くと、同じ部品で異なる内容を表示できます。
1:35もしネームへ数値を渡したり、必須のネームを省略したりすると、型チェックで間違いを見つけられます。
1:43渡す値を変えるだけで表示が変わる。
1:45これが再利用の基本です。
1:47プロップスの扱い方を確認します。
1:49プロップスは、子コンポーネントが読み取る入力です。
1:53受け取ったオブジェクトを子から直接変更してはいけません。
1:57更新が必要なときは、親が渡すコールバックなどを呼んで、親側で値を変えてもらいます。
2:03また、ジェイエスエックスに埋め込んだ通常の文字列は、リアクトがエスケープして表示します。
2:09外部のエイチティーエムエルを直接差し込む処理とは別物なので、エイチティーエムエル文字列をそのまま安全に使えるとは考えないでください。
2:19型定義はエーピーアイ応答を自動で検証するものではないため、外部データを渡す前には実行時の検証も必要です。
2:26入力は親から子へ一方向に流れる、という原則を覚えておくと、値がどこで決まるのか追いやすくなります。
2:34操作で変わる値はステートにします。
2:36ライクボタンの例です。
2:38ラベルは親から受け取るプロップス、ライクトはこの部品が持つステートです。
2:44ユースステートの初期値がフォルスなので、状態はブーリアン、真偽値の型と推論されます。
2:51すべてのユースステートに型引数を明記する必要はありません。
2:56クリックされたら、セットライクトへ次の値を計算する関数を渡し、現在の値を反転させてリアクトへ更新を依頼します。
3:05状態変数へ直接代入する方法ではありません。
3:08ボタンにはアリア・プレストで押された状態を支援技術にも伝えます。
3:13ステートの性質も押さえましょう。
3:16この例が変えるのは画面内の状態だけです。
3:19データベースやブラウザーの保存領域には記録しません。
3:23そのため、ページを再読み込みすると初期状態へ戻ります。
3:27永続化したい場合は、保存の仕組みを別に用意する必要があります。
3:32もう一つのポイントは独立性です。
3:35先ほどのページへライクボタンを読み込んで二つ配置すると、各インスタンスは別々の状態を持ちます。
3:42片方を保存済みにしても、もう片方は未保存のままです。
3:46同じ部品でも、置かれた場所ごとに状態が分かれることを覚えておきましょう。
3:52フォームの入力値なども同じ考え方で、変わる値だからステートにする、という判断ができます。
3:59共通の余白や見出し枠を部品にまとめたい場合は、チルドレンで内側の要素を受け取ります。
4:05ノートフレームの例です。
4:07タイトルは通常のプロップス、チルドレンはリアクトノード型で受け取ります。
4:13チルドレンとは、ノートフレームの開始タグと終了タグの内側に書いた内容そのものです。
4:19リアクトノードには、文字列やリアクト要素など、子要素として描画できる値が含まれます。
4:26この例ではチルドレンを必須項目として宣言しています。
4:30枠の構造は部品側が持ち、中身は利用側が差し込む。
4:34この分担が、レイアウト部品の考え方です。
4:37チルドレンの使い方を整理します。
4:39使う側は、ノートフレームにタイトルを渡し、タグの内側に表示したい文章や要素を書きます。
4:46部品側は見出しと枠を表示し、受け取ったチルドレンを決められた場所へ差し込みます。
4:52こうすると、ページごとに枠の構造を書き直さずに済み、見出しの階層や余白のルールを一か所でそろえられます。
5:00中身が変わっても枠は共通、枠が変わっても中身には触れない。
5:05この独立性がチルドレンの利点です。
5:07プロップスが値の受け渡しなら、チルドレンは画面の部品そのものの受け渡しだと考えると分かりやすいでしょう。
5:15ページ、部品、レイアウトの違いを整理します。
5:18ページズルーターのページは、エスアールシー・ページズへ置き、既定のエクスポートを用意します。
5:25通常のページファイルの位置がユーアールエルに対応します。
5:29再利用する部品は、エスアールシー・コンポーネンツなどへ置きます。
5:34ここへ置いただけではユーアールエルは作られません。
5:37部品用のディレクトリー名は開発者が決めるもので、ネクストジェイエスの必須規則ではありません。
5:44レイアウトもリアクトのコンポーネントです。
5:47ページズルーターではページやアンダースコア・エーピーピー・ティーエスエックスから読み込みます。
5:54ページが部品を組み立て、レイアウトが共通の枠を提供する、という階層で全体像をつかんでください。
6:00アプリルーターで同じ部品を使う場合の注意です。
6:04アプリルーターでは、ページやレイアウトは標準でサーバーコンポーネントです。
6:11状態やクリック処理を使うライクボタンは、クライアントコンポーネントの境界内へ置きます。
6:18部品のファイルを境界にするなら、先頭のインポートより前へユース・クライアントという指示を一行追加します。
6:27ただし、表示だけを担当する部品まで一律にクライアントコンポーネントへ変更する必要はありません。
6:35ルーターによって配置と境界が変わるため、ページズルーターのコードを移すときは、
6:40その違いを先に確認してください。
6:44最後に、部品を分ける判断基準とまとめです。
6:48見た目が似ているだけでなく、同じ種類のデータと操作を扱うかを確認します。
6:53巨大な部品へ多数の条件を追加するより、変更する理由ごとに役割を分けると理解しやすくなります。
7:00状態を置く場所も大切です。
7:02複数の部品で同じ値を使う場合は、共通の親が管理する方法を検討します。
7:08プロップスを各部品のステートへ無条件にコピーすると、元の値と表示がずれることがあります。
7:14プロップスで入力を受け、ステートで変化を持ち、チルドレンで中身を差し込む。
7:20この三つの役割分担が、コンポーネント入門のゴールです。
7:24小さな部品から始めて、必要になったときに分ける。
7:28その積み重ねが読みやすい画面づくりにつながります。

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

この動画で学べること

Next.jsのコンポーネントをTypeScriptで学ぶ入門記事。props・state・children、ページと部品の配置、型推論、App Routerでの境界をコードで解説します。

解説記事・サンプルコードを読む：Next.jsのコンポーネント入門：props・state・childrenを理解する →