HTMLパラメータ取得の完全ガイド！5つの使い方・注意点・カスタマイズ

はじめに
○HTMLパラメータとは
- ●HTMLパラメータ取得の基本
○クエリストリングの概要
○JavaScriptを使ったHTMLパラメータ取得
- ●5つの使い方とサンプルコード
●注意点
●カスタマイズ方法とサンプルコード
●応用例とサンプルコード
まとめ

はじめに

この記事を読めばHTMLパラメータ取得ができるようになります。

今回は、HTMLパラメータ取得に関する基本的な知識から、具体的な使い方や注意点、カスタマイズ方法を徹底解説します。

また、初心者向けにサンプルコードや応用例も紹介していくので、ぜひ最後までお読みください。

○HTMLパラメータとは

HTMLパラメータとは、WebページのURLに含まれる「?」以降の部分で、キーと値のペアで構成されています。

これにより、Webページ間でデータをやり取りしたり、ページの表示内容を変更することができます。

●HTMLパラメータ取得の基本

HTMLパラメータを取得するためには、クエリストリングとJavaScriptを使用します。

それぞれの概要を理解しておくことが大切です。

○クエリストリングの概要

クエリストリングとは、URLの「?」以降に記述されるキーと値のペアのことを指します。

これを利用することで、Webページ間でデータをやり取りしたり、ページの表示内容を変更することができます。

○JavaScriptを使ったHTMLパラメータ取得

HTMLパラメータ取得には、JavaScriptを使用します。

JavaScriptを使ってURLのクエリストリングを解析し、キーと値のペアを取得することができます。

●5つの使い方とサンプルコード

ここでは、HTMLパラメータ取得の具体的な使い方を5つ紹介します。

それぞれの使い方に対応するサンプルコードも示しますので、ぜひ参考にしてください。

値を取得する

以下のJavaScriptコードは、指定されたキーに対応する値を取得します。

function getParameterByName(name) {
  const url = new URL(window.location.href);
  return url.searchParams.get(name);
}

複数のキーと値を取得する

下記のJavaScriptコードは、URLに含まれるすべてのキーと値のペアを取得します。

function getAllParameters() {
  const url = new URL(window.location.href);
  const params = new Map(url.searchParams.entries());
  return params;
}

特定のキーが存在するか確認する

下記のJavaScriptコードは、指定されたキーがURLに存在するか確認します。

function hasParameter(name) {
  const url = new URL(window.location.href);
  return url.searchParams.has(name);
}

キーと値のペアを追加する

下記のJavaScriptコードは、指定されたキーと値のペアをURLに追加します。

function addParameter(name, value) {
  const url = new URL(window.location.href);
  url.searchParams.append(name, value);
  window.history.pushState({}, '', url.href);
}

キーと値のペアを削除する

下記のJavaScriptコードは、指定されたキーに対応する値をURLから削除します。

function removeParameter(name) {
  const url = new URL(window.location.href);
  url.searchParams.delete(name);
  window.history.pushState({}, '', url.href);
}

●注意点

HTMLパラメータ取得を行う際には、下記の注意点を把握しておくことが重要です。

セキュリティ

URLに機密情報を含めることは避けるべきです。

悪意のある第三者に情報が漏れるリスクがあります。

文字エンコード

URLに含まれる文字は、通常、URLエンコードされています。

JavaScriptで取得したパラメータを使用する際は、適切なデコード処理が必要です。

URLの長さ制限

URLには長さ制限があります。

これを超えると、ブラウザやサーバーによってURLが切り捨てられることがあります。

パラメータを大量に使用する場合は、別の方法（POSTリクエストなど）を検討してください。

●カスタマイズ方法とサンプルコード

次に、HTMLパラメータ取得をカスタマイズする方法を紹介します。

それぞれのカスタマイズ方法に対応するサンプルコードも併せて示します。

パラメータをオブジェクトに変換する

下記のJavaScriptコードは、URLのクエリストリングを解析し、キーと値のペアをオブジェクトに変換します。

function getQueryObject() {
  const queryString = window.location.search.substring(1);
  const pairs = queryString.split('&');
  const result = {};

  pairs.forEach(pair => {
    const [key, value] = pair.split('=');
    result[decodeURIComponent(key)] = decodeURIComponent(value);
  });

  return result;
}

パラメータに基づいて要素の表示を切り替える

下記のJavaScriptコードは、指定されたキーに対応する値を取得し、それに基づいて要素の表示を切り替えます。

function showElementBasedOnParam(key, elementId) {
  const paramValue = getParameterByName(key);
  const element = document.getElementById(elementId);

  if (paramValue === 'true') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
}

●応用例とサンプルコード

最後に、HTMLパラメータ取得の応用例を紹介します。

それぞれの応用例に対応するサンプルコードも併せて示します。

言語設定に基づいて表示を切り替える

下記のJavaScriptコードは、URLのパラメータに言語設定が含まれている場合、それに基づいて表示を切り替えます。

function switchLanguage() {
  const lang = getParameterByName('lang');
  if (lang === 'en') {
    // 英語版の表示処理
  } else if (lang === 'ja') {
    // 日本語版の表示処理
  } else {
    // その他の言語版の表示処理
  }
}

クーポンコードを適用する

下記のJavaScriptコードは、URLのパラメータにクーポンコードが含まれている場合、それを適用して割引価格を表示します。

function applyCoupon() {
  const couponCode = getParameterByName('coupon');
  let discount = 0;

  if (couponCode === 'SAVE10') {
    discount = 10;
  } else if (couponCode === 'SAVE20') {
    discount = 20;
  }

  const originalPrice = 100;
  const finalPrice = originalPrice * (1 - discount / 100);
  document.getElementById('price').innerText = finalPrice;
}

ユーザー情報をもとにページ内容をカスタマイズする

下記のJavaScriptコードは、URLのパラメータにユーザー名が含まれている場合、それをもとにページの表示内容をカスタマイズします。

function customizePage() {
  const userName = getParameterByName('user');
  if (userName) {
    document.getElementById('welcome-message').innerText = `ようこそ、${userName}さん！`;
  }
}