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

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

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

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

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

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

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

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

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

はじめに

この記事では、HTMLパラメータの取得方法について詳しく解説します。

Webページ開発において、URLパラメータの活用は非常に重要な技術です。

パラメータを適切に取得し、処理することで、動的なコンテンツの表示やユーザー体験の向上が可能になります。

初心者の方でも理解しやすいように、基本的な概念から応用例まで、段階的に説明していきます。

●HTMLパラメータとは

HTMLパラメータは、WebページのURLに含まれる重要な情報です。

URLの「?」以降に記述され、キーと値のペアで構成されています。

このパラメータを活用することで、Webページ間でデータをやり取りしたり、ページの表示内容を動的に変更したりすることが可能になります。

例えば、ユーザーの設定を保持したり、検索結果をフィルタリングしたりする際に非常に便利です。

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

HTMLパラメータを取得するためには、クエリストリングとJavaScriptの知識が必要です。

この基本を理解することで、効果的にパラメータを取得し、活用することができます。

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

クエリストリングは、URLの「?」以降に記述される文字列のことを指します。

これは、キーと値のペアで構成されており、「&」記号で区切られています。

例えば、「https://example.com/page?name=John&age=30」というURLがあった場合、「name=John」と「age=30」がクエリストリングの一部となります。

このパラメータを解析することで、Webページは必要な情報を取得し、それに基づいて動作を変更することができます。

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

JavaScriptを使用することで、URLのクエリストリングを簡単に解析し、必要なパラメータを取得することができます。

現代のブラウザでは、URLSearchParamsというAPIが提供されており、これを利用することで効率的にパラメータを処理することが可能です。

このAPIを使うことで、複雑な文字列操作を行うことなく、簡潔なコードでパラメータを取得できます。

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

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

それぞれの方法について、実際のコード例と共に詳しく説明していきます。

この方法を理解し、適切に使用することで、より柔軟なWebアプリケーションの開発が可能になります。

○値を取得する

まず、最も基本的な使い方として、特定のキーに対応する値を取得する方法を紹介します。

下記のJavaScriptコードは、指定されたキーに対応する値を取得する関数です。

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

この関数を使用することで、簡単に特定のパラメータの値を取得することができます。

例えば、「https://example.com/page?name=John」というURLがある場合、getParameterByName('name')を呼び出すと、「John」という値が返されます。

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

次に、URLに含まれるすべてのパラメータを一度に取得する方法を紹介します。

下記のコードは、すべてのキーと値のペアを取得し、Mapオブジェクトとして返す関数です。

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

この関数を使用すると、URLに含まれるすべてのパラメータを一度に取得することができます。

例えば、「https://example.com/page?name=John&age=30」というURLの場合、この関数はMap {"name" => "John", "age" => "30"}を返します。

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

パラメータの存在を確認することも、重要な操作の一つです。

下記のコードは、指定されたキーがURLに存在するかどうかを確認する関数です。

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

この関数を使用することで、特定のパラメータがURLに含まれているかどうかを簡単に確認できます。

例えば、hasParameter('name')を呼び出すと、URLに「name」というパラメータが含まれている場合はtrue、含まれていない場合はfalseが返されます。

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

動的にパラメータを追加することも可能です。

下記のコードは、指定されたキーと値のペアをURLに追加する関数です。

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

この関数を使用すると、現在のURLにパラメータを追加することができます。

例えば、addParameter('category', 'books')を呼び出すと、現在のURLに「&category=books」が追加されます。

ただし、この操作はブラウザの履歴を変更するため、慎重に使用する必要があります。

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

最後に、パラメータを削除する方法を紹介します。

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

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

この関数を使用すると、URLから特定のパラメータを削除することができます。

例えば、removeParameter('category')を呼び出すと、URLから「category」パラメータとその値が削除されます。

この操作も履歴を変更するため、適切に使用する必要があります。

●注意点

HTMLパラメータの取得と操作を行う際には、いくつかの重要な注意点があります。

この点に気をつけることで、より安全で効果的なWebアプリケーションを開発することができます。

セキュリティに関する注意点として、URLに機密情報を含めることは避けるべきです。

URLは簡単に第三者に見られる可能性があるため、パスワードやクレジットカード情報などの機密データをパラメータとして送信することは危険です。

代わりに、POSTリクエストやHTTPS通信を使用するなど、より安全な方法でデータを送信することを検討してください。

文字エンコードに関する注意点もあります。

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

JavaScriptでパラメータを取得する際は、適切なデコード処理を行う必要があります。

前述のgetParameterByName関数では、URLSearchParamsAPIがこの処理を自動的に行ってくれますが、独自の実装を行う場合はdecodeURIComponent関数を使用するなどの対策が必要です。

また、URLの長さには制限があることも覚えておく必要があります。ブラウザやサーバーによって制限は異なりますが、一般的に2,000文字程度とされています。

大量のデータをパラメータとして送信する必要がある場合は、POSTリクエストの使用や、データの分割送信などの代替手段を検討してください。

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

HTMLパラメータの取得をさらに活用するために、いくつかのカスタマイズ方法を紹介します。

この方法を使うことで、より柔軟で効果的なWebアプリケーションを開発することができます。

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

URLのクエリストリングを解析し、キーと値のペアをJavaScriptオブジェクトに変換する方法を紹介します。

下記のコードは、この処理を行う関数の例です。

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;
}

この関数を使用すると、URLのパラメータを簡単にJavaScriptオブジェクトとして扱うことができます。

例えば、「https://example.com/page?name=John&age=30」というURLの場合、この関数は{name: "John", age: "30"}というオブジェクトを返します。

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

URLパラメータの値に基づいて、ページ内の要素の表示を動的に切り替える方法を紹介します。

下記のコードは、指定されたパラメータの値に応じて、特定の要素の表示・非表示を切り替える関数です。

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';
  }
}

この関数を使用することで、URLパラメータの値に応じてページの内容を動的に変更することができます。

例えば、showElementBasedOnParam('showDetails', 'detailsSection')を呼び出すと、URLに「showDetails=true」が含まれている場合にのみ「detailsSection」というIDを持つ要素が表示されます。

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

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

この例を参考にすることで、実際のWebアプリケーション開発においてパラメータをどのように活用できるかがイメージしやすくなるでしょう。

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

多言語対応のWebサイトでは、URLパラメータを使って言語設定を管理することがあります。

下記のコードは、URLのパラメータに含まれる言語設定に基づいて、ページの表示言語を切り替える関数の例です。

function switchLanguage() {
  const lang = getParameterByName('lang');
  if (lang === 'en') {
    document.body.classList.add('english');
    document.body.classList.remove('japanese');
    // 英語版のテキストを表示する処理
  } else if (lang === 'ja') {
    document.body.classList.add('japanese');
    document.body.classList.remove('english');
    // 日本語版のテキストを表示する処理
  } else {
    // デフォルト言語の処理
  }
}

この関数を使用することで、「https://example.com/page?lang=en」のようなURLにアクセスした際に、自動的に英語版の表示に切り替えることができます。

同様に、「lang=ja」の場合は日本語版が表示されます。

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

ECサイトなどでは、URLパラメータを使ってクーポンコードを適用することがあります。

下記のコードは、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.toFixed(2);
}

この関数を使用することで、「https://example.com/product?coupon=SAVE10」のようなURLにアクセスした際に、自動的に10%割引が適用された価格が表示されます。

これで、ユーザーは簡単にクーポンを利用することができ、購買意欲の向上につながる可能性があります。

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

ユーザー固有の情報をURLパラメータとして渡し、それに基づいてページの内容をカスタマイズすることも可能です。

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

function customizePage() {
  const userName = getParameterByName('user');
  if (userName) {
    document.getElementById('welcome-message').innerText = `ようこそ、${userName}さん！`;
    document.getElementById('user-profile').style.display = 'block';
  } else {
    document.getElementById('welcome-message').innerText = 'ようこそ、ゲストさん！';
    document.getElementById('user-profile').style.display = 'none';
  }
}

この関数を使用することで、「https://example.com/dashboard?user=John」のようなURLにアクセスした際に、自動的にJohnさん向けのカスタマイズされた表示が行われます。

これで、ユーザーごとに最適化されたコンテンツを提供することが可能になり、ユーザーエクスペリエンスの向上につながります。

まとめ

HTMLパラメータの取得と活用は、Webアプリケーション開発において非常に重要な技術です。

この記事では、パラメータの基本概念から具体的な取得方法、そして応用例まで幅広く解説しました。

今回紹介した方法やサンプルコードを参考に、ぜひ自分のWebアプリケーションにパラメータを活用した機能を実装してみてください。

パラメータを効果的に使用することで、より柔軟で使いやすいWebサイトやアプリケーションを開発することができるでしょう。

パラメータを使いこなすことで、ユーザーにとってより便利で魅力的なWebサイトやアプリケーションを作ることができます。

ぜひ、この記事で学んだ知識を活かして、素晴らしいWebプロジェクトを作り上げてください。