WEBVTT

1
00:00:00.000 --> 00:00:00.881
こんにちは。

2
00:00:00.881 --> 00:00:03.967
今回は、ユースサーチパラムスの使い方です。

3
00:00:03.967 --> 00:00:08.741
ユーアールエルのクエスチョンの後ろに付く、キーイコール値の形の検索条件を、

4
00:00:08.741 --> 00:00:13.516
クライアントコンポーネントの中で読み取る方法を学びます。

5
00:00:13.516 --> 00:00:19.246
前回学んだユースパラムスがパスの値を読むのに対して、今回は検索条件が対象です。

6
00:00:19.246 --> 00:00:24.094
並び順や絞り込みのように、画面の状態をユーアールエルに残しておくと、リンクで共有したり、

7
00:00:24.094 --> 00:00:28.942
再読み込みしても同じ表示に戻したりできます。

8
00:00:28.942 --> 00:00:34.524
このフックは読み取り専用なので、書き換えはコピーを作って行うこと、複数値の扱い、

9
00:00:34.524 --> 00:00:40.107
そして静的ページで必要になるサスペンスの置き方が、この回のポイントです。

10
00:00:40.107 --> 00:00:43.780
記事のコードを確認しながら、順に整理していきます。

11
00:00:43.780 --> 00:00:44.745
まず前提です。

12
00:00:44.745 --> 00:00:51.227
この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。

13
00:00:51.227 --> 00:00:57.157
ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。

14
00:00:57.157 --> 00:01:03.776
タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。

15
00:01:03.776 --> 00:01:10.258
配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。

16
00:01:10.258 --> 00:01:17.704
ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。

17
00:01:17.704 --> 00:01:21.152
ユースサーチパラムスはクライアント側のフックです。

18
00:01:21.152 --> 00:01:23.128
戻り値の考え方を整理します。

19
00:01:23.128 --> 00:01:27.926
ユースサーチパラムスが返すのは、読み取り専用の検索パラメーターです。

20
00:01:27.926 --> 00:01:33.007
値を一つ取り出すゲットは、最初に見つかった値か、無ければヌルを返します。

21
00:01:33.007 --> 00:01:36.323
同じ名前で複数指定された値を全て取り出すゲットオールは、値を配列で返し、

22
00:01:36.323 --> 00:01:39.640
無ければ空の配列です。

23
00:01:39.640 --> 00:01:44.861
直接書き換えることはできないので、変更したいときはユーアールエルサーチパラムスでコピーを作り、

24
00:01:44.861 --> 00:01:50.083
そのコピーを編集して、新しいユーアールエルへ移ります。

25
00:01:50.083 --> 00:01:54.740
読み取りはフック、書き換えはコピー、と役割を分けて覚えてください。

26
00:01:54.740 --> 00:01:58.480
たとえば並び順のように単一の条件ではゲット、タグのように複数を許す条件ではゲットオール、

27
00:01:58.480 --> 00:02:02.220
という選び方です。

28
00:02:02.220 --> 00:02:03.908
記事のコードの前半です。

29
00:02:03.908 --> 00:02:09.536
ファイルは、アプリ、クエリデモというフォルダーのページ・ティーエスエックスです。

30
00:02:09.536 --> 00:02:15.093
先頭にユースクライアントと書いてクライアントコンポーネントにし、リアクトからサスペンスを、

31
00:02:15.093 --> 00:02:20.651
ネクスト・スラッシュ・ナビゲーションから三つのフックを読み込みます。

32
00:02:20.651 --> 00:02:26.560
クエリコントロールズの中でユースサーチパラムスを呼び、ゲットでソートを取り出します。

33
00:02:26.560 --> 00:02:33.876
値がオールドのときだけオールド、それ以外はニューと判定して、想定外の値でも安全な既定値に倒す書き方です。

34
00:02:33.876 --> 00:02:36.830
現在の並び順は、この判定結果で表示します。

35
00:02:36.830 --> 00:02:42.880
インポート先がネクスト・スラッシュ・ナビゲーションである点も、最初に確認してください。

36
00:02:42.880 --> 00:02:45.950
コードの後半、並び順を変更する処理です。

37
00:02:45.950 --> 00:02:55.312
チェンジソートでは、まず現在の検索パラメーターを文字列にして、ユーアールエルサーチパラムスの新しいオブジェクトを作ります。

38
00:02:55.312 --> 00:02:59.302
これが、読み取り専用の値を壊さないためのコピーです。

39
00:02:59.302 --> 00:03:06.976
次にセットでソートを切り替え、ルーターのリプレイスに、現在のパスとコピーの文字列をつないで渡します。

40
00:03:06.976 --> 00:03:12.194
たとえばタグイコールリアクトが残ったまま、ソートだけが追加されます。

41
00:03:12.194 --> 00:03:15.878
リプレイスなので、戻るボタンの履歴は増えません。

42
00:03:15.878 --> 00:03:19.868
元のオブジェクトを直接変えようとしない点が大切です。

43
00:03:19.868 --> 00:03:22.368
最後に、画面全体の組み立てです。

44
00:03:22.368 --> 00:03:30.182
既定エクスポートのクエリデモは、見出しとサスペンスを返し、その内側にクエリコントロールズを置きます。

45
00:03:30.182 --> 00:03:35.183
フォールバックには、条件を読み込み中という代替表示を指定します。

46
00:03:35.183 --> 00:03:40.966
フックを呼ぶ部品と、それを囲むサスペンスは、別のコンポーネントに分けます。

47
00:03:40.966 --> 00:03:46.435
スラッシュ、クエリデモに、クエスチョンマーク、タグイコールリアクトを付けて開き、

48
00:03:46.435 --> 00:03:51.905
ボタンを押せば、タグを残したままソートが追加される流れです。

49
00:03:51.905 --> 00:03:56.750
表示部分と条件を読む部分を分ける形が、記事のコードの骨格です。

50
00:03:56.750 --> 00:04:02.376
この分け方をしておくと、静的ページでもサスペンスの境界が自然に作れます。

51
00:04:02.376 --> 00:04:05.786
複数値の扱いを、画面のコードで確認します。

52
00:04:05.786 --> 00:04:14.391
タグがリアクトとネクストのように複数指定されたユーアールエルでは、ゲットが返すのは最初のリアクトだけです。

53
00:04:14.391 --> 00:04:17.800
一方、ゲットオールは両方を配列で返します。

54
00:04:17.800 --> 00:04:23.808
最初の値だけで良いのか、指定された全部が必要なのかで、使い分けてください。

55
00:04:23.808 --> 00:04:30.952
また、値が存在しない場合は、ゲットはヌル、ゲットオールは空の配列と、返り方が異なります。

56
00:04:30.952 --> 00:04:35.823
ヌルチェックと配列の長さの確認を混同しないようにしましょう。

57
00:04:35.823 --> 00:04:40.531
複数指定が仕様に含まれる条件では、ゲットオールが基本です。

58
00:04:40.531 --> 00:04:47.188
タグを一つだけ読むつもりでゲットを使うと、二つ目以降が静かに捨てられてしまいます。

59
00:04:47.188 --> 00:04:48.877
つまずきやすい点です。

60
00:04:48.877 --> 00:04:54.713
静的ページでこのフックを使う場合、本番ビルドではサスペンスの境界が必要です。

61
00:04:54.713 --> 00:05:02.544
開発サーバーでは動いても、本番ビルドで失敗することがあるので、開発だけの確認で完了としないでください。

62
00:05:02.544 --> 00:05:04.848
もう一つ大切なのは置き方です。

63
00:05:04.848 --> 00:05:09.454
サスペンスは、フックを呼ぶ子コンポーネントの外側に置きます。

64
00:05:09.454 --> 00:05:14.138
同じ関数の中でフックを呼んだあと、戻り値のジェイエスエックスをサスペンスで囲んでも、

65
00:05:14.138 --> 00:05:18.822
そのフックの実行自体は囲めていません。

66
00:05:18.822 --> 00:05:22.814
部品を分けて外から囲む、という順序を守ってください。

67
00:05:22.814 --> 00:05:28.496
境界が無いままビルドすると、対象ページの生成でエラーになる場合があります。

68
00:05:28.496 --> 00:05:31.442
サーバー側のサーチパラムスとの違いです。

69
00:05:31.442 --> 00:05:37.038
ページに渡されるサーチパラムスは、プロミスで解決する通常のオブジェクトです。

70
00:05:37.038 --> 00:05:43.665
このフックの戻り値のように、ゲットやゲットオールといったメソッドを持つわけではありません。

71
00:05:43.665 --> 00:05:47.053
実行場所も、サーバーとブラウザーで異なります。

72
00:05:47.053 --> 00:05:50.882
どちらで読むべきかは、値を使う場所で決めてください。

73
00:05:50.882 --> 00:05:57.804
あわせて注意したいのは、ユーアールエルの値は利用者が自由に書き換えられる入力だということです。

74
00:05:57.804 --> 00:06:03.695
認可やデータベースのクエリの安全性を、ユーアールエルの値だけで保証はできません。

75
00:06:03.695 --> 00:06:07.524
形式と範囲の検証は、サーバー側でも必ず行いましょう。

76
00:06:07.524 --> 00:06:09.327
静的出力と確認課題です。

77
00:06:09.327 --> 00:06:13.383
ブラウザーでの処理自体は、静的サイトでも利用できます。

78
00:06:13.383 --> 00:06:18.340
ただし、遷移先のページは事前に生成されている必要があり、クライアントでの操作が、

79
00:06:18.340 --> 00:06:23.298
サーバー機能や認可の代わりになるわけではありません。

80
00:06:23.298 --> 00:06:29.232
確認課題として、同じタグを複数指定してゲットとゲットオールを比較し、ソート以外の条件が消えていないこと、

81
00:06:29.232 --> 00:06:35.166
リプレイスで戻る履歴が増えないことを確かめてください。

82
00:06:35.166 --> 00:06:40.499
ユーアールエルを直接開く場合と、画面内のリンクから移る場合、値が無い場合と不正な値の場合を分けて試し、

83
00:06:40.499 --> 00:06:45.832
本番用ビルドと公開先でも確認しましょう。

84
00:06:45.832 --> 00:06:46.566
まとめです。

85
00:06:46.566 --> 00:06:52.686
ユースサーチパラムスは、ユーアールエルの検索条件をクライアントコンポーネントで読むためのフックです。

86
00:06:52.686 --> 00:06:58.438
ゲットは最初の値かヌル、ゲットオールは全ての値の配列を返し、戻り値そのものは読み取り専用です。

87
00:06:58.438 --> 00:07:05.659
書き換えるときは、ユーアールエルサーチパラムスでコピーを作って編集し、リプレイスなどで新しいユーアールエルへ移ります。

88
00:07:05.659 --> 00:07:13.737
静的ページでは、フックを使う部品をサスペンスで外側から囲むこと、サーバー側のサーチパラムスとは別物として扱うことを押さえてください。

89
00:07:13.737 --> 00:07:16.062
これでユースサーチパラムスは完了です。

90
00:07:16.062 --> 00:07:17.163
お疲れさまでした。

91
00:07:17.163 --> 00:07:19.244
次回はユースパスネームを学びます。