【JS応用｜実務向け】URL APIでハッシュ操作を安全に！ハッシュフラグメントの正しい扱い方

導入：なぜURL.prototype.hashが重要なのか

Web開発において、URLのフラグメント（#以降の部分）を扱う機会は非常に多いです。SPA（シングルページアプリケーション）のルーティングや、特定のセクションへのスクロール位置指定などに利用されます。しかし、文字列操作（splitやreplace）でハッシュを解析しようとすると、エンコードの問題やクエリパラメータとの混同など、予期せぬバグを引き起こすリスクがあります。JavaScriptの標準APIであるURLオブジェクトを使用することで、これらを安全かつ簡潔に処理できるようになります。

基礎知識：URLインターフェースとは

URL APIは、URLを解析、構築、修正するための標準化されたインターフェースです。従来のwindow.locationオブジェクトはブラウザの現在のURLを操作するのに対し、URLオブジェクトは任意のURL文字列をオブジェクトとして扱い、プロパティ経由で操作可能です。その中のひとつであるhashプロパティは、URL内の「#」から始まる部分を取得および設定するために提供されています。

実装・解決策：URLオブジェクトを用いたハッシュ操作

URLオブジェクトを使用する最大のメリットは、ブラウザが自動的にURL形式のバリデーションやエンコードを行ってくれる点です。ハッシュを抽出したい場合は、まずURLオブジェクトを生成し、そのhashプロパティにアクセスします。ハッシュが含まれていない場合は空文字が返り、ハッシュがある場合は「#」を含めた文字列が取得されます。

サンプルプログラム：ハッシュを安全に操作する例

// 対象となるURL文字列
const urlString = "https://example.com/products?id=123#section-456";

try {
  // URLオブジェクトを生成
  const url = new URL(urlString);

  // 1. ハッシュを取得
  console.log("現在のハッシュ:", url.hash); // 出力: #section-456

  // 2. ハッシュを安全に変更
  // URLオブジェクトを使えば、文字列結合で起こりがちなミスを防げる
  url.hash = "new-section-789";

  // 3. 変更後のURLを確認
  console.log("更新後のURL:", url.toString()); 
  // 出力: https://example.com/products?id=123#new-section-789

  // 4. ハッシュを削除する場合
  url.hash = "";
  console.log("ハッシュ削除後:", url.toString());
  // 出力: https://example.com/products?id=123
} catch (e) {
  console.error("無効なURL形式です", e);
}

応用・注意点：現場で陥りやすいバグの回避

実務でハッシュを扱う際、以下の点に注意してください。

1. 「#」の有無
URL.hashは常に「#」を含んだ値を返します。もし「#」を除いた値だけを取得したい場合は、slice(1)を使用するか、URLSearchParamsなどの他のAPIと併用する際に注意が必要です。

2. エンコード・デコード
URL.hashに値をセットすると、ブラウザは自動的に必要な文字をエンコードします。手動でデコードしようとせず、decodeURIComponent()を適切に使用することで、文字化けを防ぐことができます。

3. SPAフレームワークとの共存
ReactやVueなどのルーティングライブラリを使用している場合、直接location.hashを操作するとルーターの状態と同期が取れなくなることがあります。基本的にはルーターが提供するナビゲーションメソッドを使用し、URLオブジェクトは「URLの解析・構築」というデータ加工の目的で利用するのがベストプラクティスです。