VIDEO LESSON
Next.jsのprops：Server ComponentからClient Componentへ安全に渡すの解説動画
再生時間 7:50動画を別のタブで開く ↗
動画の字幕・文字起こしを読む
再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。
- 0:00こんにちは。
- 0:00今回は、サーバーコンポーネントからクライアントコンポーネントへ、プロップスを安全に渡す方法です。
- 0:08プロップスは、親から子へ値を渡すリアクトの基本的な仕組みです。
- 0:12ところがネクストジェイエスでは、サーバーで動く部分とブラウザーで動く部分の境界が加わります。
- 0:19そのため、どんな値でも自由に渡せるわけではありません。
- 0:23渡せる値の形と、渡した値が誰に見えるのか、この二つを意識して設計することが今回の中心です。
- 0:30まず前提です。
- 0:31この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
- 0:38ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
- 0:44タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
- 0:51配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
- 0:57ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
- 1:05この前提がずれていると、同じコードでも動く場所や結果が変わってしまうことがあります。
- 1:11境界の仕組みを整理します。
- 1:13通常のプロップスは、コンポーネントの引数です。
- 1:16親が値を用意し、子がそれを受け取って表示や処理に使います。
- 1:21しかしサーバーからクライアントへ渡す場合は、値を一度、ブラウザーへ送れる形へ変換する必要があります。
- 1:28この変換をシリアライズと呼びます。
- 1:31文字列や数値、真偽値、配列やプレーンなオブジェクトは変換できます。
- 1:36一方、一般の関数やデータベース接続のようなものは、そのままでは変換できないため渡せません。
- 1:43サーバー側で必要な形に整えてから渡す、という順序が大切です。
- 1:48境界を意識せずに設計すると、実行して初めてエラーに気づくことになりがちです。
- 1:54記事のコードの一つ目です。
- 1:56ファイルは、アプリ、プロップスデモというフォルダーのカウンター・ティーエスエックスです。
- 2:02先頭のユーズクライアントという宣言で、このファイルがクライアントコンポーネントになります。
- 2:09プロップスの型は、ラベルという文字列と、イニシャルカウントという数値です。
- 2:15ユーズステートに初期値を渡してカウントを管理し、ボタンを押すたびに値を一つ増やします。
- 2:22画面の中で増やす処理はブラウザーが担当します。
- 2:25スライドでは表示崩れを避けるため、波括弧の埋め込みを文字列の連結で示しています。
- 2:31ラベルは見出しに、カウントは段落に表示され、増やすボタンがその下に並びます。
- 2:37二つ目は親ページです。
- 2:39ファイルは同じフォルダーのページ・ティーエスエックスで、ユーズクライアントの宣言がないため、
- 2:44こちらはサーバーコンポーネントです。
- 2:49ここではカウンターを読み込み、ラベルに読んだ記事という文字列を、イニシャルカウントに二という数値を渡しています。
- 2:57親は文字列と数値を渡せばよく、クリック用の関数を渡す必要はありません。
- 3:03処理をどちら側で担当するかを分けると、境界を越える値は最小限で済みます。
- 3:08サーバーが初期値を用意し、ブラウザーがボタン操作を担当する、という役割分担がこの例の形です。
- 3:15二つのファイルを並べて読むと、宣言のあるなしで役割が分かれることがよく分かります。
- 3:22実行結果です。
- 3:23スラッシュ・プロップスデモを開くと、読んだ記事という見出しと、二から始まるカウンターが表示されます。
- 3:31最初にサーバーコンポーネントがラベルと初期値を用意し、それがシリアライズされてブラウザーへ届きます。
- 3:39次にクライアントコンポーネントがその値を受け取り、ユーズステートの初期値として使います。
- 3:46その後のボタン操作による状態の変化は、ブラウザーの中だけで管理されます。
- 3:52サーバーへ毎回問い合わせるわけではありません。
- 3:55誰が最初の値を用意し、誰が操作を引き継ぐのか、その順序で読むと理解しやすくなります。
- 4:02渡せるかどうかを、純粋な判定に切り出して確認します。
- 4:06まずタイプオブで関数かどうかを確かめ、関数なら渡せないと判断します。
- 4:12文字列、数値、真偽値、配列、そしてプレーンなオブジェクトは渡せる側です。
- 4:18記事の例のラベルと初期値は、文字列と数値なので問題ありません。
- 4:23逆に、クリック処理そのもののような普通の関数や、データベース接続は渡せない側です。
- 4:29迷ったときは、値をデータとして送れる形かどうか、という観点で確かめてください。
- 4:36判定の考え方はシンプルですが、境界のエラーを事前に避ける助けになります。
- 4:42クラスや特別なオブジェクトも、そのままでは安全に送れない場合があるため注意が必要です。
- 4:49関数について補足します。
- 4:50親が用意した普通のコールバック関数を、サーバーからクライアントへそのまま渡すことはできません。
- 4:57クリックで何かを実行したい場合は、記事の例のようにクライアント側の中で処理を完結させるのが基本です。
- 5:04一方、サーバー側の処理を呼び出すためのサーバーファンクションへの参照には、
- 5:07専用の仕組みがあります。
- 5:11ただしそれを使う場合は、呼び出し時の認証と認可、そして入力の検証が欠かせません。
- 5:16誰でも呼び出せる入口になるため、便利さと引き換えに守るべき点を忘れないでください。
- 5:22処理の置き場所を先に決めることが、境界で迷わないための実践的なコツになります。
- 5:27安全面で最も大切な点です。
- 5:29クライアントへ渡すプロップスは、ページの閲覧者が確認できる情報です。
- 5:35つまり、ブラウザーへ送った時点で公開されたものとして扱う必要があります。
- 5:41エーピーアイキーや、表示に不要な個人情報を混ぜてはいけません。
- 5:47サーバー側でデータを取得した場合でも、子へ渡すのは表示に必要な項目だけに絞ります。
- 5:54たとえばユーザー情報なら、名前だけが必要なら名前だけを渡します。
- 5:59必要最小限を選んで渡す習慣が、意図しない情報の公開を防ぎます。
- 6:05型が合っていることと、安全であることは別問題です。
- 6:09サーバー側だけで使う値は、サーバー側に残しておくことが原則だと覚えてください。
- 6:16実務への応用です。
- 6:17この例はビルド時に値を確定できるため、静的出力に組み込めます。
- 6:22ただしシーエムエスの更新などで値を変えた場合は、再ビルドと再配置が必要です。
- 6:28もう一つ、確認課題にもある注意です。
- 6:31初期値を五へ変えて再読み込みすると、五から始まることを確かめてください。
- 6:37ただしユーズステートの初期値は、最初の描画のときに一度だけ使われます。
- 6:43後から親のプロップスが変わっても、自動では追従しません。
- 6:47常に親の値へ従わせるのか、独立した操作状態にするのかを、先に決めて設計してください。
- 6:54確認は本番ビルドと公開先でも行います。
- 6:57分けて試すことも大切です。
- 6:59まとめです。
- 7:00サーバーコンポーネントからクライアントコンポーネントへ渡せるのは、シリアライズできる値だけです。
- 7:07文字列や数値のようなデータは渡せますが、普通の関数やデータベース接続は渡せません。
- 7:14処理は担当する側で完結させ、サーバーファンクションを使う場合は認証と入力検証を行います。
- 7:21そして、渡した値は閲覧者に見えるため、秘密情報は混ぜず、表示に必要な項目だけを選んで渡します。
- 7:28初期値を変えて確かめ、初期化と親の変化が別であることを説明できれば、この回の目標は達成です。
- 7:35これでサーバーとクライアントの間のプロップスは完了です。
- 7:40お疲れさまでした。
- 7:41次回はヘッダーズを学びます。
- 7:43境界、変換、公開範囲という三つの言葉で説明できれば、実務でも応用が利きます。
この動画で学べること
propsはReactのデータ受け渡しの仕組みです。Next.jsではサーバーとブラウザーの境界が加わるため、渡せる値と公開される情報を意識して設計します。
解説記事・サンプルコードを読む：Next.jsのprops：Server ComponentからClient Componentへ安全に渡す →