JavaScriptでクエリパラメータを取得する方法を完全解説 URLSearchParamsの使い方を初心者向けに丁寧に説明

1. クエリパラメータとは何かを理解しよう

1. クエリパラメータとは何かを理解しよう

JavaScriptでクエリパラメータを取得する方法を学ぶ前に、まずはクエリパラメータの意味を理解しましょう。クエリパラメータとは、URLの後ろに付く追加情報のことです。例えば、検索サイトでキーワード検索をすると、URLの後ろに文字がたくさん付きます。あれがクエリパラメータです。

URLとは、インターネット上の住所のようなものです。そしてクエリパラメータは、その住所に付け足すメモのような役割をします。例えば、商品のページで色やサイズを指定するときにも使われます。

クエリパラメータは、疑問符のあとに書かれます。そして、複数ある場合はアンパサンドで区切ります。この仕組みを理解すると、JavaScriptでの取得方法がとても分かりやすくなります。

2. URLSearchParamsとは何か

2. URLSearchParamsとは何か

URLSearchParamsとは、JavaScriptに標準で用意されている機能です。特別なライブラリをインストールする必要はありません。ブラウザ環境でそのまま使うことができます。

初心者の方は、標準機能という言葉が難しく感じるかもしれません。これは最初から用意されている便利な道具という意味です。工具箱の中に最初から入っている工具のようなものだと考えてください。

URLSearchParamsを使うと、URLのクエリパラメータを一つずつ取り出したり、値を確認したりできます。文字列を自分で分解するよりも安全で簡単です。

3. 基本的なクエリパラメータの取得方法

3. 基本的なクエリパラメータの取得方法

それでは実際にJavaScriptでクエリパラメータを取得する方法を見ていきましょう。現在表示しているページのURLから取得する場合は、location.searchを使います。

const params = new URLSearchParams(location.search);
const name = params.get("name");

console.log(name);

上記のコードでは、URLの中にあるnameというクエリパラメータの値を取得しています。getというメソッドは、指定した名前の値を取り出す機能です。

taro

このように、JavaScriptで簡単にクエリパラメータを取得できます。初心者の方でも、この形を覚えておけば問題ありません。

4. 複数のクエリパラメータを取得する方法

4. 複数のクエリパラメータを取得する方法

クエリパラメータは一つだけとは限りません。複数ある場合もよくあります。その場合もURLSearchParamsを使えば簡単に取得できます。

const params = new URLSearchParams(location.search);

const age = params.get("age");
const city = params.get("city");

console.log(age);
console.log(city);

25
osaka

このように、必要な名前を指定してgetを呼び出すだけです。JavaScriptのクエリパラメータ取得はとてもシンプルです。

5. すべてのクエリパラメータを確認する方法

5. すべてのクエリパラメータを確認する方法

どんなクエリパラメータがあるのか分からない場合もあります。そのようなときは、entriesという機能を使って一覧表示できます。

const params = new URLSearchParams(location.search);

for (const [key, value] of params.entries()) {
  console.log(key + " : " + value);
}

name : taro
age : 25
city : osaka

このコードでは、for文という繰り返し処理を使っています。繰り返し処理とは、同じ作業を何度も行う仕組みのことです。すべてのクエリパラメータを一つずつ確認できます。

6. クエリパラメータが存在するか確認する方法

6. クエリパラメータが存在するか確認する方法

指定したクエリパラメータがあるかどうかを確認したい場合もあります。その場合はhasというメソッドを使います。

const params = new URLSearchParams(location.search);

if (params.has("id")) {
  console.log("idは存在します");
} else {
  console.log("idは存在しません");
}

idは存在します

このように条件分岐を使えば、安全にクエリパラメータを扱うことができます。条件分岐とは、もしこうならこうするという判断の仕組みです。

7. URLを指定してクエリパラメータを取得する方法

7. URLを指定してクエリパラメータを取得する方法

現在のページではなく、特定のURLからクエリパラメータを取得したい場合もあります。その場合は文字列を直接渡します。

const url = "https://example.com/?product=book&price=1000";
const params = new URLSearchParams(url.split("?")[1]);

const product = params.get("product");
const price = params.get("price");

console.log(product);
console.log(price);

book
1000

このように、JavaScriptのURLSearchParamsを使えば、さまざまな場面でクエリパラメータを取得できます。Web開発やフロントエンド開発では非常によく使われる基本技術です。

JavaScript初心者の方は、まずはgetとhasの使い方をしっかり覚えましょう。そこから応用へ進むことで、より高度なWebアプリケーション開発ができるようになります。

まとめ

まとめ

今回は、JavaScriptでクエリパラメータを取得する方法について、URLSearchParamsの使い方を中心に丁寧に解説しました。クエリパラメータとは何かという基本から始まり、location.searchを使った取得方法、getメソッドによる値の取り出し、hasメソッドによる存在確認、entriesを使った一覧取得まで学びました。JavaScriptでURLのクエリパラメータを安全に扱うためには、文字列操作で無理やり分解するのではなく、URLSearchParamsを活用することが重要です。

JavaScript初心者にとって、URLやクエリパラメータという言葉は難しく感じるかもしれません。しかし、Web開発やフロントエンド開発では頻繁に登場する基本技術です。検索機能、ログイン処理、商品ページの表示切り替え、ページネーション処理など、多くの場面でクエリパラメータが使われています。JavaScriptでクエリパラメータを取得できるようになると、実践的なWebアプリケーション開発に一歩近づきます。

特に重要なのは、URLSearchParamsのget、has、entriesの三つの使い方です。getは特定のキーから値を取得するための基本メソッドです。hasはパラメータが存在するかどうかを確認するためのメソッドです。entriesはすべてのクエリパラメータを一覧で確認するための便利な方法です。これらを組み合わせることで、JavaScriptで柔軟にURLの情報を扱うことができます。

また、現在表示しているページのURLだけでなく、特定のURL文字列からクエリパラメータを取得する方法も学びました。これは外部リンクの解析や、動的に生成されたURLの処理などで活用できます。JavaScriptでURLSearchParamsを使うことで、コードの可読性が高まり、保守性も向上します。初心者のうちから正しい方法を身につけることは、将来的に大きな差になります。

サンプルプログラムで総復習

ここで、JavaScriptでクエリパラメータを取得する流れを総復習してみましょう。基本形をしっかり理解することで、応用も簡単になります。

const params = new URLSearchParams(location.search);

if (params.has("category")) {
  const category = params.get("category");
  console.log("選択されたカテゴリは " + category + " です");
} else {
  console.log("カテゴリは指定されていません");
}

for (const [key, value] of params.entries()) {
  console.log(key + " = " + value);
}

選択されたカテゴリは book です
category = book
page = 2

このように、JavaScriptでクエリパラメータを取得する処理はとてもシンプルです。URLSearchParamsを使えば、初心者でも直感的に扱うことができます。Web制作やフロントエンド開発の現場でも標準的に使われている方法なので、ぜひ繰り返し練習してください。