JavaScriptでURLフラグメント（#ハッシュ）を簡単に操作する方法！初心者向け解説

1. URLフラグメントとは何か？

1. URLフラグメントとは何か？

URLフラグメントとは、ウェブページのURLで#から始まる部分のことです。例えば、https://example.com/page#section1の場合、#section1がフラグメントです。これはページ内の特定の場所を指し示すために使われます。ユーザーがページ内リンクをクリックしたときにスクロール位置を指定したり、JavaScriptで状態を管理することもできます。

2. JavaScriptでハッシュを読み取る方法

2. JavaScriptでハッシュを読み取る方法

JavaScriptで現在のURLのフラグメントを取得するには、location.hashを使います。これは文字列として返されます。

console.log(location.hash); // 現在のハッシュを表示

（例）#section1

このように表示されます。URLに#がなければ空文字列が返ります。

3. ハッシュを変更する方法

3. ハッシュを変更する方法

ハッシュを変更するとページ内のスクロール位置を移動させたり、状態を切り替えることができます。location.hashに値を代入するだけで簡単に変更できます。

location.hash = "section2"; // ハッシュを#section2に変更
console.log(location.hash); // #section2と表示される

4. ハッシュ変更を検知する方法

4. ハッシュ変更を検知する方法

ユーザーがリンクをクリックしたりJavaScriptでハッシュを変更したときに処理を行いたい場合、hashchangeイベントを使います。

window.addEventListener("hashchange", function() {
  console.log("ハッシュが変わりました:", location.hash);
});

このコードをページに入れると、ハッシュが変更されるたびにコンソールに新しい値が表示されます。

5. ページ読み込み時にハッシュをチェックする方法

5. ページ読み込み時にハッシュをチェックする方法

ページを開いたときにすでにハッシュがある場合、それを読み取って特定の処理を行うこともできます。

window.addEventListener("load", function() {
  if (location.hash) {
    console.log("現在のハッシュ:", location.hash);
  }
});

例えば、#aboutというハッシュがある場合にそのセクションにスクロールする処理を追加できます。

6. JavaScriptでハッシュを使った簡単なページ内移動

6. JavaScriptでハッシュを使った簡単なページ内移動

ハッシュを使ってページ内のセクションに移動する簡単な例です。

document.querySelectorAll("a[href^='#']").forEach(function(anchor) {
  anchor.addEventListener("click", function(e) {
    e.preventDefault(); // デフォルトのジャンプを防ぐ
    location.hash = this.getAttribute("href").substring(1);
  });
});

このコードは、すべてのハッシュリンクに対してクリックしたときにハッシュを更新し、ページ内移動を制御します。

7. ハッシュを使った状態管理の例

7. ハッシュを使った状態管理の例

ハッシュはページの状態を管理するのにも使えます。例えば、タブの切り替え状態をURLに保存することが可能です。

function showTab(tabName) {
  location.hash = tabName; // URLに状態を反映
  document.querySelectorAll(".tab").forEach(tab => tab.style.display = "none");
  document.getElementById(tabName).style.display = "block";
}

window.addEventListener("hashchange", function() {
  showTab(location.hash.substring(1));
});

// 初期表示
if (location.hash) {
  showTab(location.hash.substring(1));
} else {
  showTab("home");
}

これにより、URLを共有しても同じタブが表示されるので便利です。

8. ハッシュ操作の注意点とブラウザ互換性

8. ハッシュ操作の注意点とブラウザ互換性

ハッシュの操作は古いブラウザでもサポートされていますが、以下の点に注意しましょう。
- location.hashは文字列なので、値の先頭に#を付ける必要はありません。
- スクロール位置を自動で移動させたくない場合は、イベントで制御する必要があります。
- 外部サイトのリンクではハッシュの変更は影響しません。

9. まとめの前に覚えておきたいポイント

9. まとめの前に覚えておきたいポイント

JavaScriptでURLフラグメント（#ハッシュ）を操作することで、ページ内の移動や状態管理が簡単にできます。
初心者の方はまず以下のポイントを覚えておきましょう。
- location.hashで現在のハッシュを取得できる
- location.hash = "値"でハッシュを変更できる
- hashchangeイベントでハッシュの変化を検知できる
- ページ読み込み時にハッシュをチェックして初期状態を設定できる

まとめ

まとめ

本記事では、JavaScriptでURLフラグメント（#ハッシュ）を初心者でもわかりやすく操作する方法について詳しく解説しました。URLフラグメントはページ内リンクや状態管理に便利で、location.hashを使えば現在のハッシュを取得したり、簡単に変更したりすることができます。また、hashchangeイベントを活用することで、ユーザーの操作やJavaScriptによる変更に応じて動的に処理を行うことが可能です。ページ読み込み時のハッシュチェックを組み合わせれば、初期表示の状態をURLに応じて設定することもでき、タブ切り替えなどの状態管理にも活用できます。さらに、ページ内移動をスムーズにしたり、URL共有時に同じ状態を再現したりすることで、ユーザー体験を向上させることができます。 初心者の方でも、基本的な操作方法やイベントの使い方を理解することで、ウェブページ内のナビゲーションや状態管理を自由に制御できるようになります。

サンプルコードまとめ

以下は、これまで紹介したハッシュ操作の基本例をまとめたサンプルです。

// ハッシュの取得
console.log(location.hash);

// ハッシュの変更
location.hash = "section2";

// ハッシュ変更の検知
window.addEventListener("hashchange", function() {
console.log("ハッシュが変わりました:", location.hash);
});

// ページ読み込み時にハッシュをチェック
window.addEventListener("load", function() {
if (location.hash) {
console.log("現在のハッシュ:", location.hash);
}
});

// ページ内リンクをクリックしたときのハッシュ操作
document.querySelectorAll("a[href^='#']").forEach(function(anchor) {
anchor.addEventListener("click", function(e) {
e.preventDefault();
location.hash = this.getAttribute("href").substring(1);
});
});

// タブ切り替えの例
function showTab(tabName) {
location.hash = tabName;
document.querySelectorAll(".tab").forEach(tab => tab.style.display = "none");
document.getElementById(tabName).style.display = "block";
}

window.addEventListener("hashchange", function() {
showTab(location.hash.substring(1));
});

if (location.hash) {
showTab(location.hash.substring(1));
} else {
showTab("home");
}