VIDEO LESSON

useSearchParamsの使い方：URLの検索条件を読み書きするの解説動画

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

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

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

0:00こんにちは。
0:00今回は、ユースサーチパラムスの使い方です。
0:03ユーアールエルのクエスチョンの後ろに付く、キーイコール値の形の検索条件を、
0:08クライアントコンポーネントの中で読み取る方法を学びます。
0:13前回学んだユースパラムスがパスの値を読むのに対して、今回は検索条件が対象です。
0:19並び順や絞り込みのように、画面の状態をユーアールエルに残しておくと、リンクで共有したり、
0:24再読み込みしても同じ表示に戻したりできます。
0:28このフックは読み取り専用なので、書き換えはコピーを作って行うこと、複数値の扱い、
0:34そして静的ページで必要になるサスペンスの置き方が、この回のポイントです。
0:40記事のコードを確認しながら、順に整理していきます。
0:43まず前提です。
0:44この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
0:51ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
0:57タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
1:03配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
1:10ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
1:17ユースサーチパラムスはクライアント側のフックです。
1:21戻り値の考え方を整理します。
1:23ユースサーチパラムスが返すのは、読み取り専用の検索パラメーターです。
1:27値を一つ取り出すゲットは、最初に見つかった値か、無ければヌルを返します。
1:33同じ名前で複数指定された値を全て取り出すゲットオールは、値を配列で返し、
1:36無ければ空の配列です。
1:39直接書き換えることはできないので、変更したいときはユーアールエルサーチパラムスでコピーを作り、
1:44そのコピーを編集して、新しいユーアールエルへ移ります。
1:50読み取りはフック、書き換えはコピー、と役割を分けて覚えてください。
1:54たとえば並び順のように単一の条件ではゲット、タグのように複数を許す条件ではゲットオール、
1:58という選び方です。
2:02記事のコードの前半です。
2:03ファイルは、アプリ、クエリデモというフォルダーのページ・ティーエスエックスです。
2:09先頭にユースクライアントと書いてクライアントコンポーネントにし、リアクトからサスペンスを、
2:15ネクスト・スラッシュ・ナビゲーションから三つのフックを読み込みます。
2:20クエリコントロールズの中でユースサーチパラムスを呼び、ゲットでソートを取り出します。
2:26値がオールドのときだけオールド、それ以外はニューと判定して、想定外の値でも安全な既定値に倒す書き方です。
2:33現在の並び順は、この判定結果で表示します。
2:36インポート先がネクスト・スラッシュ・ナビゲーションである点も、最初に確認してください。
2:42コードの後半、並び順を変更する処理です。
2:45チェンジソートでは、まず現在の検索パラメーターを文字列にして、ユーアールエルサーチパラムスの新しいオブジェクトを作ります。
2:55これが、読み取り専用の値を壊さないためのコピーです。
2:59次にセットでソートを切り替え、ルーターのリプレイスに、現在のパスとコピーの文字列をつないで渡します。
3:06たとえばタグイコールリアクトが残ったまま、ソートだけが追加されます。
3:12リプレイスなので、戻るボタンの履歴は増えません。
3:15元のオブジェクトを直接変えようとしない点が大切です。
3:19最後に、画面全体の組み立てです。
3:22既定エクスポートのクエリデモは、見出しとサスペンスを返し、その内側にクエリコントロールズを置きます。
3:30フォールバックには、条件を読み込み中という代替表示を指定します。
3:35フックを呼ぶ部品と、それを囲むサスペンスは、別のコンポーネントに分けます。
3:40スラッシュ、クエリデモに、クエスチョンマーク、タグイコールリアクトを付けて開き、
3:46ボタンを押せば、タグを残したままソートが追加される流れです。
3:51表示部分と条件を読む部分を分ける形が、記事のコードの骨格です。
3:56この分け方をしておくと、静的ページでもサスペンスの境界が自然に作れます。
4:02複数値の扱いを、画面のコードで確認します。
4:05タグがリアクトとネクストのように複数指定されたユーアールエルでは、ゲットが返すのは最初のリアクトだけです。
4:14一方、ゲットオールは両方を配列で返します。
4:17最初の値だけで良いのか、指定された全部が必要なのかで、使い分けてください。
4:23また、値が存在しない場合は、ゲットはヌル、ゲットオールは空の配列と、返り方が異なります。
4:30ヌルチェックと配列の長さの確認を混同しないようにしましょう。
4:35複数指定が仕様に含まれる条件では、ゲットオールが基本です。
4:40タグを一つだけ読むつもりでゲットを使うと、二つ目以降が静かに捨てられてしまいます。
4:47つまずきやすい点です。
4:48静的ページでこのフックを使う場合、本番ビルドではサスペンスの境界が必要です。
4:54開発サーバーでは動いても、本番ビルドで失敗することがあるので、開発だけの確認で完了としないでください。
5:02もう一つ大切なのは置き方です。
5:04サスペンスは、フックを呼ぶ子コンポーネントの外側に置きます。
5:09同じ関数の中でフックを呼んだあと、戻り値のジェイエスエックスをサスペンスで囲んでも、
5:14そのフックの実行自体は囲めていません。
5:18部品を分けて外から囲む、という順序を守ってください。
5:22境界が無いままビルドすると、対象ページの生成でエラーになる場合があります。
5:28サーバー側のサーチパラムスとの違いです。
5:31ページに渡されるサーチパラムスは、プロミスで解決する通常のオブジェクトです。
5:37このフックの戻り値のように、ゲットやゲットオールといったメソッドを持つわけではありません。
5:43実行場所も、サーバーとブラウザーで異なります。
5:47どちらで読むべきかは、値を使う場所で決めてください。
5:50あわせて注意したいのは、ユーアールエルの値は利用者が自由に書き換えられる入力だということです。
5:57認可やデータベースのクエリの安全性を、ユーアールエルの値だけで保証はできません。
6:03形式と範囲の検証は、サーバー側でも必ず行いましょう。
6:07静的出力と確認課題です。
6:09ブラウザーでの処理自体は、静的サイトでも利用できます。
6:13ただし、遷移先のページは事前に生成されている必要があり、クライアントでの操作が、
6:18サーバー機能や認可の代わりになるわけではありません。
6:23確認課題として、同じタグを複数指定してゲットとゲットオールを比較し、ソート以外の条件が消えていないこと、
6:29リプレイスで戻る履歴が増えないことを確かめてください。
6:35ユーアールエルを直接開く場合と、画面内のリンクから移る場合、値が無い場合と不正な値の場合を分けて試し、
6:40本番用ビルドと公開先でも確認しましょう。
6:45まとめです。
6:46ユースサーチパラムスは、ユーアールエルの検索条件をクライアントコンポーネントで読むためのフックです。
6:52ゲットは最初の値かヌル、ゲットオールは全ての値の配列を返し、戻り値そのものは読み取り専用です。
6:58書き換えるときは、ユーアールエルサーチパラムスでコピーを作って編集し、リプレイスなどで新しいユーアールエルへ移ります。
7:05静的ページでは、フックを使う部品をサスペンスで外側から囲むこと、サーバー側のサーチパラムスとは別物として扱うことを押さえてください。
7:13これでユースサーチパラムスは完了です。
7:16お疲れさまでした。
7:17次回はユースパスネームを学びます。

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

この動画で学べること

useSearchParamsで検索条件を読み、URLSearchParamsのコピーで更新する方法を解説します。静的ページのSuspenseと、複数値の扱いも確認します。

解説記事・サンプルコードを読む：useSearchParamsの使い方：URLの検索条件を読み書きする →