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

HTMLパラメータ取得の完全ガイド、初心者でもわかりやすい解説HTML
この記事は約7分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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

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

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

○HTMLパラメータとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 値を取得する

    以下のJavaScriptコードは、指定されたキーに対応する値を取得します。
function getParameterByName(name) {
  const url = new URL(window.location.href);
  return url.searchParams.get(name);
}
  1. 複数のキーと値を取得する

    下記のJavaScriptコードは、URLに含まれるすべてのキーと値のペアを取得します。
function getAllParameters() {
  const url = new URL(window.location.href);
  const params = new Map(url.searchParams.entries());
  return params;
}
  1. 特定のキーが存在するか確認する

    下記のJavaScriptコードは、指定されたキーがURLに存在するか確認します。
function hasParameter(name) {
  const url = new URL(window.location.href);
  return url.searchParams.has(name);
}
  1. キーと値のペアを追加する

    下記のJavaScriptコードは、指定されたキーと値のペアをURLに追加します。
function addParameter(name, value) {
  const url = new URL(window.location.href);
  url.searchParams.append(name, value);
  window.history.pushState({}, '', url.href);
}
  1. キーと値のペアを削除する

    下記の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パラメータ取得をカスタマイズする方法を紹介します。

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

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

    下記の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;
}
  1. パラメータに基づいて要素の表示を切り替える

    下記の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パラメータ取得の応用例を紹介します。

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

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

    下記のJavaScriptコードは、URLのパラメータに言語設定が含まれている場合、それに基づいて表示を切り替えます。
function switchLanguage() {
  const lang = getParameterByName('lang');
  if (lang === 'en') {
    // 英語版の表示処理
  } else if (lang === 'ja') {
    // 日本語版の表示処理
  } else {
    // その他の言語版の表示処理
  }
}
  1. クーポンコードを適用する

    下記の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;
}
  1. ユーザー情報をもとにページ内容をカスタマイズする

    下記のJavaScriptコードは、URLのパラメータにユーザー名が含まれている場合、それをもとにページの表示内容をカスタマイズします。
function customizePage() {
  const userName = getParameterByName('user');
  if (userName) {
    document.getElementById('welcome-message').innerText = `ようこそ、${userName}さん!`;
  }
}

まとめ

これで、HTMLパラメータ取得の詳細な解説が完了しました。

今回紹介した方法やサンプルコードを活用して、ウェブページにパラメータを利用した機能を実装してみてください。