VIDEO LESSON

Next.jsのコンポーネント実践：TypeScriptのpropsとコールバックで連携するの解説動画

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

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

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

0:00こんにちは。
0:00今回は、ネクストジェイエスのコンポーネント実践です。
0:05タイプスクリプトのプロップスとコールバックを使って、記事カードと親ページを連携させる方法を学びます。
0:13部品を使い回すには、受け取るデータと、利用者の操作をどう伝えるかを、プロップスの型として先に決めることが大切です。
0:22この記事ではページズルーターを前提に、共有するデータ型、選択できるカード、
0:28ジェネリクスを使う一覧、そして親ページでの状態管理までを順に作ります。
0:34初めての方も、流れを追えば全体像がつかめます。
0:38完成すると、記事を選ぶと親ページの表示とカードの状態が連動して変わり、解除すると未選択へ戻る、
0:43小さな選択画面ができあがります。
0:48まず、共有するデータ型を定義します。
0:51エスアールシー・タイプス・アーティクル・ドット・ティーエスに、アーティクル型を用意します。
0:58アイディーとタイトルは必須の文字列で、説明文のディスクリプションは、クエスチョンマークを付けて省略可能にします。
1:07この形はタイプだけでなくインターフェースでも表せます。
1:11注意点は、型はコンパイル時の情報だということです。
1:15エーピーアイの応答をこの型だと指定するだけでは、中身の検証にはなりません。
1:21受け取り側の境界で型を明示しておくと、どんなデータが来る前提なのかを、コードを読むだけで確認できます。
1:29次に、選択できるカードを作ります。
1:32プロップス型には、記事そのもの、選択中かどうかを示す真偽値、そして記事を受け取って何も返さない関数、
1:36オンセレクトを並べます。
1:41カード自身は選択状態を持ちません。
1:43セレクテッドを表示に使い、クリックされたらオンセレクトで親へ知らせるだけです。
1:49説明文がない場合は、準備中という代替文を表示します。
1:52ボタンには、アリア・プレストで選択状態を支援技術にも伝えます。
1:57状態を持つ場所を親だけに決めることで、親と子で同じ状態を同期する手間がなくなります。
2:03表示するデータと、操作の知らせ方を分けて考えることが、再利用しやすい部品づくりの第一歩です。
2:09コールバックの渡し方には注意点があります。
2:12ボタンのオンクリックへ渡しているのは、アロー関数の形をした、関数そのものです。
2:17クリックされたときに初めて、オンセレクトへ記事を渡して呼び出します。
2:22もしオンセレクトに記事を付けた呼び出しの形で書いてしまうと、クリックを待たずに、
2:26画面を描画している最中に実行されてしまいます。
2:31見た目が似ていても意味がまったく違うので、ここは丁寧に区別しましょう。
2:36イベントハンドラーには、実行結果ではなく、後で実行される関数を渡す、という原則を覚えておくと、
2:40他の場面でも応用できます。
2:44異なるデータの一覧にも使いたい場合は、ジェネリクスを使います。
2:49アイテムリストは、要素の型をティーという型パラメータで受け取ります。
2:54配列の要素型と、キーを取り出す関数、項目を描く関数が受け取る型は、すべてこのティーで結び付きます。
3:01記事の配列を渡せば、コールバックの中でも記事型として安全に扱えます。
3:06項目が空のときは、表示する項目がないという文を表示します。
3:10これは実行時に別のコンポーネントを自動で作る仕組みではなく、あくまで型の結び付きを保つための書き方です。
3:18型パラメータを使うことで、一覧の部品を記事専用に作り直さずに、別のデータでも同じ形で使い回せます。
3:25一覧のキーについても確認します。
3:27キーには、同じ一覧の兄弟の中で一意で、並び替えや更新があっても安定する値を使います。
3:33この例では、記事のアイディーをキーにしています。
3:37順序が変わる一覧で、配列の添字や、毎回変わる乱数をキーに使うと、状態と要素の対応が意図せず変わってしまうことがあります。
3:46項目の追加や削除、並べ替えをしたときに、選択状態が別の項目へ移ってしまわないか。
3:51安定したキーを使うことは、そのための土台になります。
3:55データ側に一意なアイディーがあるなら、それを優先して使いましょう。
4:00親ページを作ります。
4:01エスアールシー・ページズ・アーティクルピッカー・ティーエスエックスです。
4:06記事の配列は二件で、二件目は説明文を省略しています。
4:10選択中の記事は、ユースステートで持ちます。
4:13ここが状態の置き場所です。
4:15子どものカードは状態を持たず、親が選ばれた記事を保持し、各カードへ、選択中かどうかと、
4:19選択を伝える関数を渡します。
4:23ページの見出しの下には、現在選ばれている記事のタイトルか、未選択という表示を出します。
4:29開発サーバーでこのページを開けば、選択と解除の動きをその場で確かめられます。
4:34タイトルや説明文といった表示データは配列側に置き、変わる部分である選択状態だけをステートで扱う、
4:38という役割分担にも注目してください。
4:43配線の詳細を見ます。
4:44各カードのセレクテッドは、選択中の記事のアイディーと、そのカードの記事のアイディーが一致するかで決まります。
4:52オンセレクトには、状態を更新するセットセレクテッドをそのまま渡せます。
4:56記事を受け取って状態に入れる、という型が一致しているためです。
5:00解除ボタンでは、セットセレクテッドへヌルを渡して未選択へ戻します。
5:05初期値がヌルでも、後で記事を保持するため、ユースステートの型はアーティクル・オア・ヌルと明記します。
5:11型引数を省略すると初期値だけから推論され、この用途に必要な型になりません。
5:16ファイルと型の使い分けを整理します。
5:19エクスポート・デフォルトしたコンポーネントは、読み込み側で名前を付けてインポートします。
5:26エクスポート・タイプした型は、インポート・タイプで読み込むと、実行時の値と区別できます。
5:33ジェイエスエックスを含む部品はティーエスエックス、型定義だけのファイルはティーエスという拡張子の使い分けも基本です。
5:42リアクト・エフシーは必須ではありません。
5:45引数にプロップスの型を書いた通常の関数でも、コンポーネントは定義できます。
5:51なお、型が正しくても、画面の意味やアクセシビリティが自動で保証されるわけではない点も覚えておきましょう。
5:59アプリルーターで使うときの補足です。
6:01ユースステートやイベントを使うコンポーネントは、クライアントコンポーネントの境界の中へ置きます。
6:08ページ全体を対話用にする簡単な例なら、ページの先頭にユース・クライアントを指定します。
6:13大きなページでは、対話が必要な記事選択の部分だけを、別のクライアントコンポーネントへ分けることもできます。
6:20サーバーコンポーネントからクライアントコンポーネントへ、関数のプロップスを自由に渡せるわけではありません。
6:27この例のセットセレクテッドやレンダーアイテムは、同じクライアント側の部品の間で受け渡している点がポイントです。
6:35最後に、再利用する部品の確認点とまとめです。
6:38子どもは表示と操作の通知を担当し、親が選択状態を管理する形にすると、一覧以外の画面でも使いやすくなります。
6:47通信や保存まで子どもに集める前に、部品の利用範囲を確認してください。
6:52一覧については、項目の追加、並べ替え、削除を行い、選択状態が別の項目へ移らないことを試します。
7:00エーピーアイで一覧が更新されるアプリでは、記事そのものではなく選択アイディーだけを状態に持ち、
7:05現在の一覧から取り出す設計も候補です。
7:11型と状態の置き場所を決めることが、この実践のゴールです。
7:15まずはこの小さな例で、データの流れが親から子へ、操作の通知が子から親へ進む感覚をつかんでください。

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

この動画で学べること

型付きpropsとコールバックで記事カードを作り、親ページで選択状態を管理します。ジェネリクスを使う一覧、安定したkey、コンポーネントの読み込み方も解説します。

解説記事・サンプルコードを読む：Next.jsのコンポーネント実践：TypeScriptのpropsとコールバックで連携する →