JavaScript　クエリ情報経由でデータを送信する方法

JavaScriptを使って、クエリ情報を通じてデータを送信する方法を解説します。

クエリ情報経由でデータを送信するにはどんな方法がありますか？

JavaScriptでデータを取得し、クエリ情報としてURLに付加することで、データを送信することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

クエリ情報とは

クエリ情報は、URLの末尾に記述されるキーと値のペアで構成される文字列のことです。クエリ情報は、Webページやアプリケーションに関する様々な情報をURLに付加することで、その情報を共有したり、データの検索やフィルタリングなどの目的で使用することができます。

クエリ情報は、URLの「？」以降に記述され、複数のキーと値は「&」で区切られます。例えば、以下のURLには「q=JavaScript」というキーと値のペアが含まれています。

https://example.com/search?q=JavaScript

javascriptCopy codehttps://example.com/search?q=JavaScript

クエリ情報を取得するには、JavaScriptのlocationオブジェクトのsearchプロパティを使います。searchプロパティは、現在のページのURLの末尾に含まれるクエリ情報を文字列で返します。また、URLSearchParamsオブジェクトを使うことで、クエリ情報を簡単に扱うことができます。

クエリ情報を使ったデータ送信の方法

JavaScriptを使ってクエリ情報を通じてデータを送信する方法には、以下のような方法があります。

フォームのsubmitイベントをキャンセルし、JavaScriptでデータを取得し、クエリ情報としてURLに付加することで、データを送信することができる。
XMLHttpRequestやfetch APIを使って、クエリ情報を含んだURLに対してリクエストを送信することもできる。

クエリ情報を取得する方法

JavaScriptで現在のページのクエリ情報を取得するには、locationオブジェクトのsearchプロパティを使います。searchプロパティは、現在のページのURLの末尾に含まれるクエリ情報を文字列で返します。具体的には、以下のようなコードで取得できます。

const queryString = window.location.search;

取得したクエリ情報は、URLSearchParamsオブジェクトを使って簡単に扱うことができます。URLSearchParamsオブジェクトは、クエリ情報をパースして、キーと値のペアに分解し、簡単に扱えるようにするためのオブジェクトです。

以下は、URLSearchParamsオブジェクトを使って、取得したクエリ情報を扱う例です。

const queryString = window.location.search;
const searchParams = new URLSearchParams(queryString);

// クエリ情報から値を取得する
const q = searchParams.get('q'); // 'JavaScript'

// クエリ情報をオブジェクトに変換する
const paramsObj = Object.fromEntries(searchParams.entries());
// { q: 'JavaScript' }

URLSearchParamsオブジェクトは、getメソッドを使って、クエリ情報から指定したキーに対応する値を取得することができます。また、entriesメソッドを使って、クエリ情報を配列に変換した後、Object.fromEntriesメソッドを使って、オブジェクトに変換することもできます。

クエリ情報を使ったデータ送信のサンプルプログラム

以下のサンプルプログラムは、フォームに入力されたデータをクエリ情報としてURLに付加する方法を示しています。

<form id="my-form">
  <input type="text" name="name" placeholder="名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <button type="submit">送信</button>
</form>

const form = document.getElementById('my-form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // フォームのデフォルトの動作をキャンセルする

  const formData = new FormData(form); // フォームのデータを取得する
  const searchParams = new URLSearchParams(formData); // FormDataオブジェクトをURLSearchParamsオブジェクトに変換する
  const queryString = searchParams.toString(); // URLSearchParamsオブジェクトを文字列に変換する

  const url = window.location.href + '?' + queryString; // クエリ情報をURLに付加する
  window.location.href = url; // ページを再読み込みする
});

このプログラムでは、フォームのsubmitイベントをキャンセルして、フォームに入力されたデータを取得し、FormDataオブジェクトに変換します。FormDataオブジェクトは、フォームに入力されたデータを簡単に取得するためのオブジェクトです。

次に、URLSearchParamsオブジェクトにFormDataオブジェクトを変換します。URLSearchParamsオブジェクトは、クエリ情報を簡単に扱うためのオブジェクトです。FormDataオブジェクトをURLSearchParamsオブジェクトに変換することで、クエリ情報を簡単に作成することができます。

最後に、URLSearchParamsオブジェクトを文字列に変換して、URLの末尾に付加し、ページをリロードすることで、データを送信します。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

JavaScriptを使って、クエリ情報を通じてデータを送信する方法を解説しました。

クエリ情報はURLの末尾に記述されるキーと値のペアで構成される文字列である。
JavaScriptを使ってクエリ情報を通じてデータを送信する方法には、フォームを使ってURLに付加する方法と、XMLHttpRequestやfetch APIを使う方法がある。
locationオブジェクトのsearchプロパティを使って現在のページのクエリ情報を取得できる。
URLSearchParamsオブジェクトを使うことで、クエリ情報を簡単に扱うことができる。