SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

usePathnameの使い方：現在のパスでナビゲーションを切り替えるの解説動画

再生時間 7:34動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回は、ユースパスネームの使い方です。
  3. 0:03ブラウザーに表示されているユーアールエルのうち、パスの部分をクライアントコンポーネントの中で読み取る方法を学びます。
  4. 0:12前回学んだユースサーチパラムスがクエスチョンの後ろの検索条件を読むのに対して、
  5. 0:17今回はスラッシュから始まるパスそのものが対象です。
  6. 0:22今いるページが分かれば、ナビゲーションで選択中の項目を目立たせたり、支援技術に現在位置を伝えたりできます。
  7. 0:30完全一致と前方一致の使い分け、共有レイアウトへの置き方、書き換えルールがある場合の注意が、
  8. 0:34この回のポイントです。
  9. 0:38まずは、パスと検索条件の違いを押さえるところから始めます。
  10. 0:43まず前提です。
  11. 0:44この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
  12. 0:50ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
  13. 0:56タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
  14. 1:02配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
  15. 1:09ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
  16. 1:16ユースパスネームはクライアント側のフックです。
  17. 1:19戻り値の考え方を整理します。
  18. 1:21ユースパスネームを引数なしで呼ぶと、スラッシュ・ドックスのような、現在のパスを表す文字列が返ります。
  19. 1:29大切なのは、クエスチョンマークの後ろにあるクエリ文字列、たとえばクエスチョン、
  20. 1:35キューイコールリアクトのような検索条件は、ここには含まれないことです。
  21. 1:41検索条件が必要な場面では、前回学んだユースサーチパラムスなど、別のエーピーアイを使ってください。
  22. 1:48パスは場所、検索条件は絞り込みや並び順、と役割を分けて考えると、どのフックを使うべきか迷わなくなります。
  23. 1:56引数はなく、戻り値はパスだけ、というシンプルな形です。
  24. 2:00たとえば、スラッシュ・パスデモにクエリを付けたユーアールエルを開いても、
  25. 2:05返ってくるのはスラッシュ・パスデモだけです。
  26. 2:09この切り分けが、このフックの一番の特徴です。
  27. 2:13記事のコードの前半です。
  28. 2:15ファイルは、アプリ、パスデモというフォルダーのページ・ティーエスエックスです。
  29. 2:20先頭にユースクライアントと書いてクライアントコンポーネントにし、ネクスト・スラッシュ・リンクからリンクを、
  30. 2:27ネクスト・スラッシュ・ナビゲーションからユースパスネームを読み込みます。
  31. 2:33パスデモの中でユースパスネームを引数なしで呼び、結果をパスネームという定数に入れます。
  32. 2:39その値を画面にそのまま表示すると、現在のパスを確認できます。
  33. 2:44インポート先がネクスト・スラッシュ・ナビゲーションである点と、ユースクライアントが必要な点を確認してください。
  34. 2:52コードの後半、ナビゲーションの部分です。
  35. 2:55リンクの行き先はスラッシュ・パスデモで、現在地の判定には、パスネームがスラッシュ・パスデモと完全に一致するかどうかを使います。
  36. 3:04一致すればアリアカレントにページという値を渡し、一致しなければアンディファインドにして属性自体を付けません。
  37. 3:12アリアカレントは、見た目の強調だけでは伝わらない現在位置を、スクリーンリーダーなどの支援技術にも知らせるための仕組みです。
  38. 3:21たとえばクエリ付きで開いても、パス部分だけで判定できるため、選択中の表示がぶれません。
  39. 3:28色や太字だけに頼らず、意味として現在位置を伝えることが、アクセシビリティの面でも大切です。
  40. 3:34複数リンクのサイトへ応用するときは、一致の決め方を先に決めます。
  41. 3:39そのページだけを選択扱いにするなら完全一致、配下のページもまとめて選択扱いにするなら前方一致寄りの判定です。
  42. 3:48画面のコードにあるイズアンダーは、パスが基準と完全一致するか、基準にスラッシュを付けた文字列で始まる場合に、
  43. 3:53真を返す小さな関数です。
  44. 3:58たとえばショップの下にある商品ページでは、ショップのリンクを選択中として表示できます。
  45. 4:05逆にトップページのような短いパスでは、安易に前方一致を使うと全ページが選択扱いになるため、
  46. 4:09完全一致が向いています。
  47. 4:14前方一致の落とし穴です。
  48. 4:15パスがスラッシュ・ショップで始まるかどうかだけを見ると、スラッシュ・ショッパーという別のページまで、
  49. 4:20ショップの配下だと誤って判定してしまいます。
  50. 4:25文字列の始まりが同じでも、区切りがなければ別物です。
  51. 4:29そこで、完全一致の場合と、スラッシュまで含めた前方一致の場合だけを、配下として扱います。
  52. 4:35記事の確認課題にもある通り、スラッシュ・ショップ、スラッシュ・ショップ・スラッシュ・アイテム、
  53. 4:40スラッシュ・ショッパーの三つのケースを用意して確かめてください。
  54. 4:46末尾スラッシュの有無で完全一致が外れることもあるため、設定も合わせて確認します。
  55. 4:51置き方の注意です。
  56. 4:53共有レイアウトは、ページ遷移のたびに作り直されるのではなく、維持される仕組みです。
  57. 4:59そのため、レイアウト自体の中でユーアールエルを読み続けて、現在位置の表示まで担わせようとしないことが大切です。
  58. 5:08記事が勧めるのは、現在位置に反応する小さなクライアントコンポーネントを別に作り、
  59. 5:13それをレイアウトの中に配置する形です。
  60. 5:18こうすると、共通の枠はサーバー側のまま保ち、パスに反応する部分だけを小さく分離できます。
  61. 5:25責務が分かれるため、表示の不具合が起きたときにも、原因を切り分けやすくなります。
  62. 5:31書き換えルールがある構成での注意です。
  63. 5:34リライツなどで、ブラウザーに表示されるパスと、事前にページを生成したときのパスが異なる場合、
  64. 5:40最初の画面表示と、ブラウザー側で読み直したパスが一致せず、初期描画にずれが出ることがあります。
  65. 5:46対策の基本は、パスに影響される表示を小さく分けておくことです。
  66. 5:50そのうえで必要な場合は、画面が表示されたあと、マウント後に現在位置の表示を更新する形を検討してください。
  67. 5:57全体をクライアント側に寄せるのではなく、影響範囲を絞ることが、表示のちらつきを抑える近道です。
  68. 6:03特に、最初に表示されるヘッダーやナビゲーションでずれると目立つため、影響範囲の絞り込みが効いてきます。
  69. 6:10静的出力と確認課題です。
  70. 6:12ブラウザーでの処理自体は、静的サイトでも利用できます。
  71. 6:16ただし、遷移先のページは事前に生成されている必要があり、クライアントでの操作が、
  72. 6:22サーバー機能や認可の代わりになるわけではありません。
  73. 6:27確認課題として、末尾スラッシュあり・なしの設定を変えて完全一致の条件が適切か試し、
  74. 6:35配下を選択扱いにする場合は、ショップ、商品ページ、ショッパーの三ケースで判定を確かめてください。
  75. 6:42開発サーバーだけでなく、本番用ビルドと公開先でも確認し、ユーアールエルを直接開く場合と、
  76. 6:48画面内のリンクから移る場合を分けて試しましょう。
  77. 6:54まとめです。
  78. 6:54ユースパスネームは、現在のパスをクライアントコンポーネントで読むためのフックで、
  79. 6:58クエリ文字列は含みません。
  80. 7:02そのページだけなら完全一致、配下も含めるならスラッシュまで含めた判定を使い、
  81. 7:06ショッパーのような誤判定を避けてください。
  82. 7:10現在位置の表示は小さなクライアントコンポーネントに分けて配置し、アリアカレントで支援技術にも伝え、
  83. 7:16書き換えルールがある構成では初期表示のずれに注意します。
  84. 7:21紹介した判定の三ケースは、手元で小さく試してから、実際のナビゲーションへ組み込んでください。
  85. 7:28これでユースパスネームは完了です。
  86. 7:30お疲れさまでした。
  87. 7:32次回はユースルーターを学びます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

usePathnameで現在のパスを読み、選択中のナビゲーションを表示します。クエリ文字列との違いと、書き換えルールがある場合の注意点を学びます。

解説記事・サンプルコードを読む：usePathnameの使い方：現在のパスでナビゲーションを切り替える →