WEBVTT

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

2
00:00:00.910 --> 00:00:03.792
今回は、ユースパスネームの使い方です。

3
00:00:03.792 --> 00:00:12.589
ブラウザーに表示されているユーアールエルのうち、パスの部分をクライアントコンポーネントの中で読み取る方法を学びます。

4
00:00:12.589 --> 00:00:17.443
前回学んだユースサーチパラムスがクエスチョンの後ろの検索条件を読むのに対して、

5
00:00:17.443 --> 00:00:22.297
今回はスラッシュから始まるパスそのものが対象です。

6
00:00:22.297 --> 00:00:30.335
今いるページが分かれば、ナビゲーションで選択中の項目を目立たせたり、支援技術に現在位置を伝えたりできます。

7
00:00:30.335 --> 00:00:34.582
完全一致と前方一致の使い分け、共有レイアウトへの置き方、書き換えルールがある場合の注意が、

8
00:00:34.582 --> 00:00:38.829
この回のポイントです。

9
00:00:38.829 --> 00:00:43.228
まずは、パスと検索条件の違いを押さえるところから始めます。

10
00:00:43.228 --> 00:00:44.179
まず前提です。

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

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

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

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

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

16
00:01:16.658 --> 00:01:19.784
ユースパスネームはクライアント側のフックです。

17
00:01:19.784 --> 00:01:21.955
戻り値の考え方を整理します。

18
00:01:21.955 --> 00:01:29.709
ユースパスネームを引数なしで呼ぶと、スラッシュ・ドックスのような、現在のパスを表す文字列が返ります。

19
00:01:29.709 --> 00:01:35.446
大切なのは、クエスチョンマークの後ろにあるクエリ文字列、たとえばクエスチョン、

20
00:01:35.446 --> 00:01:41.184
キューイコールリアクトのような検索条件は、ここには含まれないことです。

21
00:01:41.184 --> 00:01:48.627
検索条件が必要な場面では、前回学んだユースサーチパラムスなど、別のエーピーアイを使ってください。

22
00:01:48.627 --> 00:01:56.691
パスは場所、検索条件は絞り込みや並び順、と役割を分けて考えると、どのフックを使うべきか迷わなくなります。

23
00:01:56.691 --> 00:02:00.878
引数はなく、戻り値はパスだけ、というシンプルな形です。

24
00:02:00.878 --> 00:02:05.375
たとえば、スラッシュ・パスデモにクエリを付けたユーアールエルを開いても、

25
00:02:05.375 --> 00:02:09.872
返ってくるのはスラッシュ・パスデモだけです。

26
00:02:09.872 --> 00:02:13.284
この切り分けが、このフックの一番の特徴です。

27
00:02:13.284 --> 00:02:15.027
記事のコードの前半です。

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

29
00:02:20.693 --> 00:02:27.157
先頭にユースクライアントと書いてクライアントコンポーネントにし、ネクスト・スラッシュ・リンクからリンクを、

30
00:02:27.157 --> 00:02:33.622
ネクスト・スラッシュ・ナビゲーションからユースパスネームを読み込みます。

31
00:02:33.622 --> 00:02:39.868
パスデモの中でユースパスネームを引数なしで呼び、結果をパスネームという定数に入れます。

32
00:02:39.868 --> 00:02:44.226
その値を画面にそのまま表示すると、現在のパスを確認できます。

33
00:02:44.226 --> 00:02:52.216
インポート先がネクスト・スラッシュ・ナビゲーションである点と、ユースクライアントが必要な点を確認してください。

34
00:02:52.216 --> 00:02:55.189
コードの後半、ナビゲーションの部分です。

35
00:02:55.189 --> 00:03:04.552
リンクの行き先はスラッシュ・パスデモで、現在地の判定には、パスネームがスラッシュ・パスデモと完全に一致するかどうかを使います。

36
00:03:04.552 --> 00:03:12.578
一致すればアリアカレントにページという値を渡し、一致しなければアンディファインドにして属性自体を付けません。

37
00:03:12.578 --> 00:03:21.645
アリアカレントは、見た目の強調だけでは伝わらない現在位置を、スクリーンリーダーなどの支援技術にも知らせるための仕組みです。

38
00:03:21.645 --> 00:03:28.036
たとえばクエリ付きで開いても、パス部分だけで判定できるため、選択中の表示がぶれません。

39
00:03:28.036 --> 00:03:34.724
色や太字だけに頼らず、意味として現在位置を伝えることが、アクセシビリティの面でも大切です。

40
00:03:34.724 --> 00:03:39.756
複数リンクのサイトへ応用するときは、一致の決め方を先に決めます。

41
00:03:39.756 --> 00:03:48.248
そのページだけを選択扱いにするなら完全一致、配下のページもまとめて選択扱いにするなら前方一致寄りの判定です。

42
00:03:48.248 --> 00:03:53.437
画面のコードにあるイズアンダーは、パスが基準と完全一致するか、基準にスラッシュを付けた文字列で始まる場合に、

43
00:03:53.437 --> 00:03:58.627
真を返す小さな関数です。

44
00:03:58.627 --> 00:04:05.389
たとえばショップの下にある商品ページでは、ショップのリンクを選択中として表示できます。

45
00:04:05.389 --> 00:04:09.870
逆にトップページのような短いパスでは、安易に前方一致を使うと全ページが選択扱いになるため、

46
00:04:09.870 --> 00:04:14.352
完全一致が向いています。

47
00:04:14.352 --> 00:04:15.997
前方一致の落とし穴です。

48
00:04:15.997 --> 00:04:20.931
パスがスラッシュ・ショップで始まるかどうかだけを見ると、スラッシュ・ショッパーという別のページまで、

49
00:04:20.931 --> 00:04:25.866
ショップの配下だと誤って判定してしまいます。

50
00:04:25.866 --> 00:04:29.430
文字列の始まりが同じでも、区切りがなければ別物です。

51
00:04:29.430 --> 00:04:35.461
そこで、完全一致の場合と、スラッシュまで含めた前方一致の場合だけを、配下として扱います。

52
00:04:35.461 --> 00:04:40.875
記事の確認課題にもある通り、スラッシュ・ショップ、スラッシュ・ショップ・スラッシュ・アイテム、

53
00:04:40.875 --> 00:04:46.289
スラッシュ・ショッパーの三つのケースを用意して確かめてください。

54
00:04:46.289 --> 00:04:51.772
末尾スラッシュの有無で完全一致が外れることもあるため、設定も合わせて確認します。

55
00:04:51.772 --> 00:04:53.215
置き方の注意です。

56
00:04:53.215 --> 00:04:59.791
共有レイアウトは、ページ遷移のたびに作り直されるのではなく、維持される仕組みです。

57
00:04:59.791 --> 00:05:08.611
そのため、レイアウト自体の中でユーアールエルを読み続けて、現在位置の表示まで担わせようとしないことが大切です。

58
00:05:08.611 --> 00:05:13.342
記事が勧めるのは、現在位置に反応する小さなクライアントコンポーネントを別に作り、

59
00:05:13.342 --> 00:05:18.073
それをレイアウトの中に配置する形です。

60
00:05:18.073 --> 00:05:25.129
こうすると、共通の枠はサーバー側のまま保ち、パスに反応する部分だけを小さく分離できます。

61
00:05:25.129 --> 00:05:31.544
責務が分かれるため、表示の不具合が起きたときにも、原因を切り分けやすくなります。

62
00:05:31.544 --> 00:05:34.044
書き換えルールがある構成での注意です。

63
00:05:34.044 --> 00:05:40.161
リライツなどで、ブラウザーに表示されるパスと、事前にページを生成したときのパスが異なる場合、

64
00:05:40.161 --> 00:05:46.279
最初の画面表示と、ブラウザー側で読み直したパスが一致せず、初期描画にずれが出ることがあります。

65
00:05:46.279 --> 00:05:50.358
対策の基本は、パスに影響される表示を小さく分けておくことです。

66
00:05:50.358 --> 00:05:57.199
そのうえで必要な場合は、画面が表示されたあと、マウント後に現在位置の表示を更新する形を検討してください。

67
00:05:57.199 --> 00:06:03.382
全体をクライアント側に寄せるのではなく、影響範囲を絞ることが、表示のちらつきを抑える近道です。

68
00:06:03.382 --> 00:06:10.092
特に、最初に表示されるヘッダーやナビゲーションでずれると目立つため、影響範囲の絞り込みが効いてきます。

69
00:06:10.092 --> 00:06:12.105
静的出力と確認課題です。

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

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

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

73
00:06:27.705 --> 00:06:35.169
確認課題として、末尾スラッシュあり・なしの設定を変えて完全一致の条件が適切か試し、

74
00:06:35.169 --> 00:06:42.634
配下を選択扱いにする場合は、ショップ、商品ページ、ショッパーの三ケースで判定を確かめてください。

75
00:06:42.634 --> 00:06:48.337
開発サーバーだけでなく、本番用ビルドと公開先でも確認し、ユーアールエルを直接開く場合と、

76
00:06:48.337 --> 00:06:54.040
画面内のリンクから移る場合を分けて試しましょう。

77
00:06:54.040 --> 00:06:54.898
まとめです。

78
00:06:54.898 --> 00:06:58.690
ユースパスネームは、現在のパスをクライアントコンポーネントで読むためのフックで、

79
00:06:58.690 --> 00:07:02.482
クエリ文字列は含みません。

80
00:07:02.482 --> 00:07:06.703
そのページだけなら完全一致、配下も含めるならスラッシュまで含めた判定を使い、

81
00:07:06.703 --> 00:07:10.924
ショッパーのような誤判定を避けてください。

82
00:07:10.924 --> 00:07:16.432
現在位置の表示は小さなクライアントコンポーネントに分けて配置し、アリアカレントで支援技術にも伝え、

83
00:07:16.432 --> 00:07:21.941
書き換えルールがある構成では初期表示のずれに注意します。

84
00:07:21.941 --> 00:07:28.523
紹介した判定の三ケースは、手元で小さく試してから、実際のナビゲーションへ組み込んでください。

85
00:07:28.523 --> 00:07:30.955
これでユースパスネームは完了です。

86
00:07:30.955 --> 00:07:32.243
お疲れさまでした。

87
00:07:32.243 --> 00:07:34.532
次回はユースルーターを学びます。