JavaScript hashchange イベント

概要: このチュートリアルでは、JavaScript の hashchange イベントとその効果的な処理方法について学習します。

JavaScript hashchange イベントの概要

URL ハッシュは、URL 内のシャープ記号 (#) に続くすべてです。たとえば、次の URL があるとします。

https://javascripttutorial.dokyumento.jp/javascript-dom/javascript-hashchange/#headerCode language: JavaScript (javascript)

この URL では、ハッシュは header です。

ハッシュが footer に変更されると、hashchange イベントが発生します。

https://javascripttutorial.dokyumento.jp/javascript-dom/javascript-hashchange/#footerCode language: JavaScript (javascript)

この例では、ハッシュは #header から #footer に変更されます。

hashchange イベントにイベントリスナーをアタッチするには、window オブジェクトの addEventListener() メソッドを呼び出します。

window.addEventListener('hashchange',() =>{
    console.log('The URL has has changed');
});Code language: JavaScript (javascript)

現在の URL ハッシュを取得するには、location オブジェクトの hash プロパティにアクセスします。

window.addEventListener('hashchange',() => {
    console.log(`The current URL hash is ${location.hash}`);
});Code language: JavaScript (javascript)

さらに、window オブジェクトの onhashchange プロパティにイベントリスナーを割り当てることで、hashchange イベントを処理できます。

window.onhashchange = () => {
    // handle hashchange event here
};Code language: JavaScript (javascript)

JavaScript hashchange イベントの例

hashchange イベントは、シングルページアプリケーション (SPA) を作成したり、ページ全体をリロードせずにコンテンツを動的に更新したりするのに役立ちます。

次の例は、hashchange イベントを使用して、URL ハッシュに基づいて div のコンテンツを更新する方法を示しています。

まず、いくつかのナビゲーションリンクとメインセクションを含む単純な HTML ファイル (index.html) を作成します。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript HashChange Example</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/app.js" defer></script>
    </head>
    <body>
        <header>
            <nav>
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#contact">Contact</a>
            </nav>
        </header>
        <main id="content">
            <h1>HashChange Event Demo!</h1>
            <p>Click the links above to change the content.</p>
        </main>
    </body>
</html>Code language: HTML, XML (xml)

次に、hashchange イベントを処理し、それぞれコンテンツを更新する JavaScript ファイル app.js を作成します。

const updateContent = () => {
  const content = document.getElementById('content');
  const hash = window.location.hash.substring(1); // Remove the '#' from the hash

  switch (hash) {
    case 'home':
      content.innerHTML = `
          <h1>Home</h1>
          <p>Welcome to the home page.</p>
        `;
      break;
    case 'about':
      content.innerHTML = `
          <h1>About</h1>
          <p>Learn more about us on this page.</p>
        `;
      break;
    case 'contact':
      content.innerHTML = `
          <h1>Contact</h1>
          <p>Get in touch with us.</p>
        `;
      break;
  }
};

// Event listener for hashchange
window.addEventListener('hashchange', updateContent);
Code language: JavaScript (javascript)

出力

まとめ

hashchange イベントは、URL ハッシュが変更されると発生します。
イベントハンドラーを登録するには、addEventListener() メソッドを呼び出すか、window オブジェクトの onhashchange プロパティにイベントハンドラーを割り当てます。

このチュートリアルは役に立ちましたか？