usePathname

usePathname() 関数 を分かりやすく

「usePathname」とは、どういうものなんでしょうか。これはNext.jsやJamstackなどのフレームワーク、あるいはTypeScriptなどの言語で使われる概念ですよね。一言で言うと、それは現在のURLのパス部分を取得するためのツールです。

なんでこんなものが必要かと思うかもしれませんよね。例え話を使って説明しましょう。

例えば、あなたが大きなショッピングモールに行ったとします。どこか特定の店を探しているのですが、そのショッピングモールはとても大きく、たくさんの店が入っています。地図があれば良いのですが、持っていないとします。その場合、どうしますか？

まず、店の名前を知っているので、それを使って探すことができます。しかし、それだけでは、具体的にどこに行けばいいのかわかりませんよね。そこで役立つのが「現在地」です。「現在地」を知ることで、どこからスタートし、どの方向に進むべきかがわかります。これは「現在地」が自分の位置を特定し、目的地への経路を決めるための大切な情報であるからです。

これと同じように、ウェブサイトを操作する際には、「現在地」を知ることが重要です。しかし、ウェブサイトの場合、「現在地」は物理的な場所ではなく、URLのパスとして表現されます。このパスを知ることで、現在どのページを表示しているのか、またどのページに遷移するべきかといった情報を得ることができます。

「usePathname」は、まさにこの「現在地」を知るためのツールなんです。この機能を使うと、現在のURLのパスを取得できます。これは例えば、ナビゲーションメニューで現在のページをハイライトするためや、特定のページで特定の動作をするために必要な情報です。

「そもそもこれ使う意味あるん？」って方いるかと思いますが、あります。だいぶヤバいやつです。めっちゃ便利なんですよ！これがあることで、ウェブサイトのナビゲーションをスムーズにし、ユーザー体験を向上させることができるんですね。

ここまで大丈夫ですか？

公式のドキュメントによれば、usePathnameはNext.jsのClient Componentフックで、現在のURLのパス名を読み取ることができます。

具体的には、usePathnameはパラメータを取らず、現在のURLのパス名を文字列として返します。例えば、URLが/dashboardの場合、usePathnameは'/dashboard'を返します。また、/dashboard?v=2のようなクエリパラメータがある場合でも、usePathnameはパス名部分（ここでは'/dashboard'）のみを返します。

また、usePathnameは主にクライアントコンポーネントで使用され、サーバーコンポーネントではサポートされていないことを覚えておいてください。Fallbackルートがレンダリングされている時や、ページがNext.jsによって自動的に静的に最適化されている場合、usePathnameはnullを返すことがあります。

そして、「そもそもこれいつ使うん？」って方いるかと思います。実際には、ルートが変更されたときに何かをするために使用することができます。例えば、URLが変わったときに特定のアクションをトリガーするような場合などです。

以上がusePathnameの基本的な使い方ですが、ここまで大丈夫ですか？これがあると、ウェブサイトのナビゲーションをめっちゃ便利にするんですよ！それにより、ユーザーの経験も大いに向上します。

結論

usePathname() 関数は、現在のパスを表す文字列を返します。新しいフックですね。このフックを使用するには、コンポーネントがクライアント側にある必要があります。これは、「use client」を先頭に置くことで実行されます。usePathname は、現在の URL のパス名を読み取ることができるクライアント コンポーネントフックです。この文字列は、ルートパス、クエリ文字列、およびフラグメントで構成されます。

次のコードは公式ドキュメントのコードを引用しています。

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <>Current pathname: {pathname}</>
}

このコードは、Next.js のクライアント側で動作するコンポーネントです。このコンポーネントは、現在のパスを取得し、それをレンダリングします。

このコードでは、次の手順を実行します。

1. usePathname() 関数を使用して、現在のパスを取得します。
2. pathname 変数に現在のパスを格納します。
3. <>Current pathname: {pathname}</> タグをレンダリングします。このタグは、現在のパスをレンダリングします。 このコードの結果、現在のパスがブラウザの URL バーに表示されます。

next/navigation を分かりやすく

next/navigation は、Next.js でナビゲーションを管理するために使用できるライブラリです。このライブラリは、次の機能を含む多くの機能を提供します。

• リンクの作成とレンダリング
• ナビゲーションバーの作成
• モーダルダイアログの作成
• フッターの作成

next/navigation ライブラリは、Next.js のクライアント側とサーバー側の両方で動作します。

戻り値

この表は、usePathname() 関数が、URL のルートパスのみを返すことを示しています。クエリ文字列とフラグメントは除外されます。