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

こんにちは、ryohei(@ityryohei)です!

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

JavaScriptでURLのハッシュ(#)が変更された処理したいな。良い方法ないかな?

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

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

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

JavaScriptでURLのハッシュ(#)の変更を検知する場合は、windonwhashchangeイベントを使用します。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のハッシュ(#)の変更を検知して処理を実行する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍