WEBVTT

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

2
00:00:00.959 --> 00:00:03.836
今回は、ユースパラムスの使い方です。

3
00:00:03.836 --> 00:00:11.826
ブログの記事ページや商品ページのように、ユーアールエルが記事ごとに変わる画面を動的ルートと呼びます。

4
00:00:11.826 --> 00:00:18.379
その変わる部分の値を、クライアントコンポーネントの中で直接読み取る方法を学びます。

5
00:00:18.379 --> 00:00:23.653
ユースパラムスは、ネクスト・ナビゲーションから読み込むフックです。

6
00:00:23.653 --> 00:00:31.164
親から何段もプロップスで受け渡さなくても、値を必要とする部品の中でその場で読める点が特長です。

7
00:00:31.164 --> 00:00:38.036
単一の値と複数階層の値で型が変わる点や、検索条件との使い分けを、順に整理していきます。

8
00:00:38.036 --> 00:00:44.908
このあと、記事のコードをそのままの形で確認し、最後に値の形の判定まで実例で確かめます。

9
00:00:44.908 --> 00:00:45.854
まず前提です。

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

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

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

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

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

15
00:01:18.136 --> 00:01:25.160
ユースパラムスはクライアント側のフックなので、使うファイルはクライアントコンポーネントとして用意します。

16
00:01:25.160 --> 00:01:27.453
引数と戻り値を整理します。

17
00:01:27.453 --> 00:01:32.744
ユースパラムスには、通常の引数として値を渡すのではなく、山かっこで型引数を書き、

18
00:01:32.744 --> 00:01:38.035
想定する形をタイプスクリプトに伝えます。

19
00:01:38.035 --> 00:01:43.679
たとえばスラッグが文字列一つの場合は、その形を型として書きます。

20
00:01:43.679 --> 00:01:49.146
戻り値は、動的ルートの値が名前ごとに収まったオブジェクトです。

21
00:01:49.146 --> 00:01:57.082
ここで大切なのは、型引数はあくまで想定を記述するもので、実行時の入力検証ではないことです。

22
00:01:57.082 --> 00:02:03.079
実際のユーアールエルが想定と違っても、型を書いただけでは弾けません。

23
00:02:03.079 --> 00:02:08.370
通常の角かっこスラッグは文字列、ドット三つを付けたキャッチオールは文字列の配列になる、

24
00:02:08.370 --> 00:02:13.661
という対応をまず押さえてください。

25
00:02:13.661 --> 00:02:20.892
キー名はフォルダー名と一致させる必要があり、名前が食い違うと値は未定義になります。

26
00:02:20.892 --> 00:02:22.136
記事のコードです。

27
00:02:22.136 --> 00:02:28.912
ファイルは、アプリ、パラムデモ、角かっこスラッグというフォルダーのページ・ティーエスエックスです。

28
00:02:28.912 --> 00:02:38.176
先頭にユースクライアントと書いてクライアントコンポーネントにし、ネクスト・スラッシュ・ナビゲーションからユースパラムスを読み込みます。

29
00:02:38.176 --> 00:02:42.877
コンポーネントの中では、スラッグが文字列であるという型を付けてユースパラムスを呼び、

30
00:02:42.877 --> 00:02:47.578
パラムス・スラッグとして取り出して画面に表示します。

31
00:02:47.578 --> 00:02:52.418
角かっこで囲まれたフォルダー名が、そのままパラムスのキー名になります。

32
00:02:52.418 --> 00:02:56.704
フォルダー名とキーの名前が対応する点が、動的ルートの基本です。

33
00:02:56.704 --> 00:02:58.718
実行結果と処理の順序です。

34
00:02:58.718 --> 00:03:05.381
スラッシュ、パラムデモ、スラッシュ、リアクトを開くと、画面にはリアクトと表示されます。

35
00:03:05.381 --> 00:03:09.796
ここにクエスチョンマーク、スラッグイコールネクストという検索条件を追加しても、

36
00:03:09.796 --> 00:03:14.212
パスのスラッグはリアクトのままです。

37
00:03:14.212 --> 00:03:19.480
パスの中の値と、クエスチョン以降の検索条件は、別の情報源だからです。

38
00:03:19.480 --> 00:03:28.621
使いどころとしては、動的な値をページの子へ何段も受け渡す代わりに、クライアントコンポーネントで直接読む場面があります。

39
00:03:28.621 --> 00:03:36.988
ただし、汎用の部品をルートから独立させたい場合は、普通のプロップスを渡す設計のほうが再利用しやすくなります。

40
00:03:36.988 --> 00:03:41.636
直接読む便利さと、部品の独立性は、用途で使い分けてください。

41
00:03:41.636 --> 00:03:44.961
単一セグメントとキャッチオールの型の違いです。

42
00:03:44.961 --> 00:03:51.032
通常の角かっこスラッグは、ユーアールエルの一階層だけを受け取るため、値は文字列です。

43
00:03:51.032 --> 00:03:57.970
ドット三つを付けたキャッチオールは、複数階層をまとめて受け取るため、値は文字列の配列になります。

44
00:03:57.970 --> 00:04:02.595
さらに二重の角かっこで囲んだ省略可能なキャッチオールでは、値が指定されない場合もあるため、

45
00:04:02.595 --> 00:04:07.221
未定義の可能性まで型に含めて考えます。

46
00:04:07.221 --> 00:04:10.835
フォルダーの書き方と型が一対一で対応しているので、ルートの定義を見れば、

47
00:04:10.835 --> 00:04:14.448
受け取る値の形が分かります。

48
00:04:14.448 --> 00:04:20.664
逆に、型だけ変えてフォルダーを変え忘れると、想定と実際が食い違うので注意してください。

49
00:04:20.664 --> 00:04:23.120
値の形を判定する考え方です。

50
00:04:23.120 --> 00:04:29.610
画面のコードは、受け取った値を表示用に整える部分だけを切り出したものです。

51
00:04:29.610 --> 00:04:37.503
配列なら要素をスラッシュでつなぎ、未指定ならその旨を示し、それ以外は文字列として扱います。

52
00:04:37.503 --> 00:04:42.064
リアクトなら文字列リアクト、エーとビーの配列なら配列エースラッシュビー、

53
00:04:42.064 --> 00:04:46.625
未指定なら未指定と判定されます。

54
00:04:46.625 --> 00:04:55.570
キャッチオールを使う画面では、値をそのまま文字列として扱う前に、まず形を確認する手順を入れてください。

55
00:04:55.570 --> 00:05:02.236
形の判定を先に済ませることで、配列を文字列だと思い込んだ表示崩れを防げます。

56
00:05:02.236 --> 00:05:04.596
つまずきやすい使い分けです。

57
00:05:04.596 --> 00:05:07.462
パラムスは検索条件ではありません。

58
00:05:07.462 --> 00:05:11.845
ユーアールエルのクエスチョン以降に付く、キーイコール値の形の検索条件は、

59
00:05:11.845 --> 00:05:16.228
ユースサーチパラムスで読みます。

60
00:05:16.228 --> 00:05:23.392
たとえば記事の識別子はパスの中に置き、並び順やページ番号は検索条件に置く、

61
00:05:23.392 --> 00:05:30.556
といった具合に、ユーアールエルのどの部分が情報源なのかを、画面仕様と合わせて先に決めてください。

62
00:05:30.556 --> 00:05:38.311
情報源を取り違えると、値を変更しても画面が変わらない、といった分かりにくい不具合になります。

63
00:05:38.311 --> 00:05:45.728
パスの値はユースパラムス、検索条件はユースサーチパラムス、と読み取る場所で覚えましょう。

64
00:05:45.728 --> 00:05:48.211
セキュリティと検証の注意点です。

65
00:05:48.211 --> 00:05:51.781
型引数を書いただけでは、不正な値を防げません。

66
00:05:51.781 --> 00:05:58.145
スラッグから商品などのデータを取得する前に、その形式や存在を必ず検証してください。

67
00:05:58.145 --> 00:06:08.389
存在しない値の扱いは、ページのサーバー側やエーピーアイ側で適切に行い、画面側で見えなくするだけのアクセス制御にしないことも大切です。

68
00:06:08.389 --> 00:06:14.753
クライアントで読める値は、利用者が自由に書き換えられる入力だと考えるのが基本です。

69
00:06:14.753 --> 00:06:21.116
表示の分岐と、守るべき判定は分けて設計し、重要な確認はサーバー側に置いてください。

70
00:06:21.116 --> 00:06:24.609
想定外の値が来たときに、エラー画面や存在しない画面へ正しくつなげることも、

71
00:06:24.609 --> 00:06:28.101
検証の一部です。

72
00:06:28.101 --> 00:06:34.620
値を受け取ってから表示するまでの流れの中で、どこで確認するのかを決めておきましょう。

73
00:06:34.620 --> 00:06:37.449
静的出力との関係と確認課題です。

74
00:06:37.449 --> 00:06:43.461
記事のコード単体は、動的ユーアールエルをサーバーで受け付ける例です。

75
00:06:43.461 --> 00:06:48.854
静的出力では、サーバーコンポーネントのページでジェネレートスタティックパラムスを定義し、

76
00:06:48.854 --> 00:06:54.247
生成対象を列挙する必要があります。

77
00:06:54.247 --> 00:07:01.674
そのうえで、フックを使う部分を別のクライアントコンポーネントへ切り出して配置します。

78
00:07:01.674 --> 00:07:08.924
確認課題として、キャッチオールへ変更した別のルートを作り、型を文字列の配列にして二階層以上のユーアールエルを表示し、

79
00:07:08.924 --> 00:07:16.174
省略可能な形では未指定のケースも試してください。

80
00:07:16.174 --> 00:07:21.832
開発サーバーだけでなく、本番用ビルドと公開先でも確認しましょう。

81
00:07:21.832 --> 00:07:22.761
まとめです。

82
00:07:22.761 --> 00:07:29.573
ユースパラムスは、動的ルートの値をクライアントコンポーネントで直接読むためのフックです。

83
00:07:29.573 --> 00:07:39.171
通常の角かっこでは文字列、キャッチオールでは文字列の配列、省略可能なキャッチオールでは未定義の可能性まで含めて型を考えます。

84
00:07:39.171 --> 00:07:49.388
検索条件はユースサーチパラムスで読み、情報源を分けること、型引数は検証ではないので形式と存在の確認を別に行うことを押さえてください。

85
00:07:49.388 --> 00:07:53.568
静的出力では生成対象の列挙と部品の切り出しが必要です。

86
00:07:53.568 --> 00:07:56.045
これでユースパラムスは完了です。

87
00:07:56.045 --> 00:07:57.439
お疲れさまでした。

88
00:07:57.439 --> 00:08:00.380
次回はユースサーチパラムスを学びます。