【JavaScript】URLのハッシュ(#)の変更を検知して処理を実行する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでURLのハッシュ(#)の変更を検知して処理を実行する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

URLのハッシュ (#) の変更を検知する

JavaScriptでURLのハッシュ(#)の変更を検知する場合は、windonwのhashchangeイベントを使用します。hashchangeはURLのハッシュ(#)が変更されたときに発火するイベントで、addEventListenerのメソッド内で使用することができます。

構文は下記の通りです。

window.addEventListener('hashchange', function, false);

2番目の引数に関数を指定することで、URLのハッシュ(#)が変更された場合の処理を実行することができます。

URLのハッシュ(#)の変更をして処理を実行する

前項の内容が概ねすべてですが、簡単なサンプルスクリプトをご紹介します。aタグにページ内リンクを設定して起き、クリックするとURLのハッシュ(#)の値が更新されるようにします。JavaScriptではURLのハッシュ(#)が変更されたらアラートを表示し、変更後にハッシュ(#)を出力します。

HTML

<a href="#test1">test1</a>
<a href="#test2">test2</a>
<a href="#test3">test3</a>
<a href="#test4">test4</a>
<a href="#test5">test5</a>

JavaScript

const myFunc = ()=>{
    alert('ハッシュ値：' + location.hash);
}

window.addEventListener('hashchange', myFunc, false);

実行結果

See the Pen 7410 by ryohei (@intotheprogram) on CodePen.

実行結果に表示されている埋め込み内のリンクをクリックすると、アラートが表示され、ハッシュ(#)の値が出力されます。簡単な処理ではありますが、ハッシュ(#)の変更を検知して処理を実行することができていますね。

最後に

JavaScriptでハッシュ(#)の変更を検知して処理するケースとして考えられるのは、要素の表示を変更する、コンバージョンを計測するなどがあります。ハッシュ(#)の変更はhashchangeイベントで検知することができますので、覚えておくと良いかもしれませんね。

以上、JavaScriptでURLのハッシュ(#)の変更を検知して処理を実行する方法のご紹介でした！