JavaScriptでURLのハッシュを取得するにはどうすればいいですか？

JavaScriptでURLのハッシュを取得する方法

JavaScriptでURLのハッシュを取得する方法

WebページのURLには、ハッシュと呼ばれる#記号で始まる部分があります。ハッシュは、ページ内の特定のセクションを識別するために使用されます。例えば、「https://www.example.com/page#section2」というURLの場合、「#section2」がハッシュです。JavaScriptでは、このハッシュ情報を取得するために「hashプロパティ」を使用します。

location.hashプロパティ

location.hashプロパティは、現在表示されているページのURLのハッシュ部分を返します。ハッシュ記号（#）を含む文字列として返されます。もしハッシュが存在しない場合は、空文字列が返されます。

基本的な使い方

location.hashプロパティを使用するには、locationオブジェクトにアクセスし、その後にhashプロパティを指定します。例えば、現在表示されているページのURLのハッシュをコンソールに出力するには、次のように記述します。


  <script>
    console.log(location.hash); 
  </script>

このコードを実行すると、現在のページのURLに「#section2」というハッシュが含まれている場合は、コンソールに「#section2」と表示されます。

ハッシュの値を取得する

ハッシュには、単なる識別子だけでなく、追加の情報を埋め込むことも可能です。例えば、「#key1=value1&key2=value2」のように、キーと値のペアで情報を渡すことができます。このような場合、location.hashプロパティからハッシュ全体を取得した後、適切な方法でパースする必要があります。

クエリ文字列のパース

ハッシュがクエリ文字列の形式になっている場合、URLSearchParamsオブジェクトを利用して簡単にパースできます。


  <script>
    const hash = location.hash.substring(1); // #を取り除く
    const params = new URLSearchParams(hash); 

    console.log(params.get('key1')); // "value1"
    console.log(params.get('key2')); // "value2"
  </script>

使用例

location.hashプロパティは、以下のような場合に役立ちます。

ケース 説明
ページ内リンク ハッシュを利用してページ内の特定のセクションへのリンクを作成し、location.hashでリンク先を判別する
状態の保存 ハッシュにページの状態を表す情報を埋め込み、ページ遷移後も状態を保持する
動的なコンテンツの読み込み ハッシュによって読み込むコンテンツを変化させる

参考文献

  • <a href="https://developer.mozilla.org/ja/docs/Web/API/Location/hash">Location.hash - Web API | MDN</a>

関連QA

Q1: ハッシュが変わってもページがリロードされないのはなぜですか？

A1: ハッシュはブラウザによってサーバーに送信されず、クライアントサイドのみで処理されます。そのため、ハッシュが変わってもページのリロードは発生しません。

Q2: ハッシュの値を変更するにはどうすれば良いですか？

A2: location.hashプロパティに新しい値を代入することで、ハッシュの値を変更できます。ただし、これによってページがスクロールする可能性があります。

Q3: ハッシュの変更を検知するにはどうすれば良いですか？

A3: `hashchange`イベントを监听することで、ハッシュの変更を検知できます。このイベントは、ハッシュの値が変更されるたびに発生します。

その他の参考記事:jquery hash