JavaScriptでlocation.searchを使う方法を実例10選で徹底解説

●location.searchとは？

そもそもlocation.searchとはどのようなものなのでしょうか。

簡単に言うと、URLの「?」以降の部分、つまりクエリ文字列を表すプロパティです。

例えば、「https://example.com/search?q=JavaScript&sort=desc」というURLがあったとします。

このとき、location.searchの値は「?q=JavaScript&sort=desc」となります。

○location.searchの基本的な使い方

では、実際にlocation.searchを使ってみましょう。

まずは、クエリパラメータを取得する方法から見ていきます。

○サンプルコード1：クエリパラメータの取得

// URLが「https://example.com/search?q=JavaScript&sort=desc」の場合
const queryString = location.search;
console.log(queryString); // 出力結果：?q=JavaScript&sort=desc

このように、location.searchを使えば、現在のURLからクエリ文字列を簡単に取得できます。

ただ、このままでは使いづらいですよね。そこで、クエリ文字列をオブジェクトに変換してみましょう。

const queryString = location.search;
const params = new URLSearchParams(queryString);
console.log(params.get('q')); // 出力結果：JavaScript
console.log(params.get('sort')); // 出力結果：desc

URLSearchParamsを使うと、クエリ文字列をパースして、各パラメータの値を取得できます。

これで、URLパラメータを簡単に扱えるようになりました。

○サンプルコード2：クエリパラメータの設定

次に、クエリパラメータを設定する方法を見ていきましょう。

といっても、これもURLSearchParamsを使えば簡単です。

const params = new URLSearchParams();
params.set('q', 'JavaScript');
params.set('sort', 'desc');
const newUrl = `${location.origin}${location.pathname}?${params.toString()}`;
console.log(newUrl); // 出力結果：https://example.com/search?q=JavaScript&sort=desc

このように、URLSearchParamsのsetメソッドを使ってパラメータを設定し、toStringメソッドでクエリ文字列に変換します。

あとは、originとpathnameと組み合わせれば、新しいURLが完成です。

○サンプルコード3：複数のクエリパラメータの処理

実際のWebサイトでは、複数のクエリパラメータを扱うことも多いでしょう。

そんなときは、URLSearchParamsのforEachメソッドが便利です。

const queryString = '?q=JavaScript&sort=desc&page=1';
const params = new URLSearchParams(queryString);
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 出力結果：
// q: JavaScript
// sort: desc
// page: 1

forEachを使えば、各パラメータに対して処理を行えます。

これを応用すれば、複雑なURLパラメータ操作もスムーズに行えるようになるでしょう。

●location.searchの実践的な活用法

基本的なlocation.searchの使い方は理解できたと思います。

でも、実際のWebサイト制作では、もっと複雑な処理が必要になることもありますよね。

そこで、ここからはlocation.searchのより実践的な活用法を見ていきましょう。

○サンプルコード4：ページネーションへの応用

まず、ページネーションへの応用例です。

Webサイトの検索結果ページなどで、よく見かけるのがページネーションですよね。

location.searchを使えば、ページ番号をURLパラメータで管理できます。

const params = new URLSearchParams(location.search);
const currentPage = parseInt(params.get('page'), 10) || 1;
const newPage = currentPage + 1;
params.set('page', newPage);
const newUrl = `${location.pathname}?${params.toString()}`;
console.log(newUrl);
// 現在のURLが'/search?q=JavaScript&page=1'の場合、
// 出力結果は'/search?q=JavaScript&page=2'

このコードでは、現在のページ番号を取得し、次のページ番号を設定しています。

これを応用すれば、「次のページ」や「前のページ」へのリンクを動的に生成できるでしょう。

○サンプルコード5：フィルタリング機能の実装

次は、フィルタリング機能の実装例です。

例えば、ECサイトの商品一覧ページで、価格帯やカテゴリなどのフィルター機能を付けたいとします。

そんなときにも、location.searchが活躍します。

const params = new URLSearchParams(location.search);
const priceMin = parseInt(params.get('price_min'), 10);
const priceMax = parseInt(params.get('price_max'), 10);
const category = params.get('category');
// 取得した値を使ってフィルタリング処理を行う
const filteredProducts = allProducts.filter(product => {
  const isInPriceRange = (!priceMin || product.price >= priceMin) && (!priceMax || product.price <= priceMax);
  const isInCategory = !category || product.category === category;
  return isInPriceRange && isInCategory;
});
console.log(filteredProducts);

このように、URLパラメータからフィルター条件を取得し、それをもとに商品をフィルタリングしています。

これにより、ユーザーはURLを共有するだけで、同じフィルター条件の商品一覧を表示できるようになります。

○サンプルコード6：動的なコンテンツ表示の切り替え

3つ目の例は、動的なコンテンツ表示の切り替えです。

1つのページの中で、URLパラメータに応じてコンテンツを動的に切り替えたい場合があります。

そんなときは、次のようなコードを使います。

const params = new URLSearchParams(location.search);
const tab = params.get('tab') || 'default';
const contentElement = document.getElementById('content');
switch (tab) {
  case 'info':
    contentElement.innerHTML = '<h2>インフォメーション</h2><p>こちらはインフォメーションです。</p>';
    break;
  case 'contact':
    contentElement.innerHTML = '<h2>お問い合わせ</h2><p>こちらはお問い合わせフォームです。</p>';
    break;
  default:
    contentElement.innerHTML = '<h2>デフォルトコンテンツ</h2><p>こちらはデフォルトのコンテンツです。</p>';
}

このコードでは、URLパラメータ「tab」の値に応じて、ページ内のコンテンツを動的に切り替えています。

これにより、1つのURLで複数のコンテンツを表示できるようになります。

○サンプルコード7：外部サイトとのパラメータ連携

最後は、外部サイトとのパラメータ連携です。

自社サイトから外部サイトへリンクする際に、パラメータを渡したいことがあると思います。

そんなときは、次のようなコードを使います。

const params = new URLSearchParams();
params.set('utm_source', 'mysite');
params.set('utm_medium', 'affiliate');
params.set('utm_campaign', 'summer_sale');
const externalUrl = `https://example.com/landing?${params.toString()}`;
console.log(externalUrl);
// 出力結果は'https://example.com/landing?utm_source=mysite&utm_medium=affiliate&utm_campaign=summer_sale'

このコードでは、外部サイトのURLにUTMパラメータを付加しています。

UTMパラメータを使えば、外部サイトでのユーザー行動を詳細に追跡できます。

アフィリエイトリンクなどに活用できそうです。

●よくあるエラーと対処法

ここまで、location.searchの基本的な使い方から実践的な活用法まで見てきました。

でも、実際にコードを書いていると、思わぬエラーに遭遇することもありますよね。

そこで、ここでは、location.searchを使う際によくあるエラーとその対処法を紹介します。

○クエリパラメータが存在しない場合の処理

まず、クエリパラメータが存在しない場合の処理です。

例えば、URLが「https://example.com」のように、クエリ文字列がない場合を考えてみましょう。

const params = new URLSearchParams(location.search);
const value = params.get('key');
console.log(value); // 出力結果：null

この場合、getメソッドはnullを返します。

したがって、クエリパラメータを使う前に、必ず存在チェックを行うことが大切です。

const params = new URLSearchParams(location.search);
const value = params.get('key');
if (value !== null) {
  console.log(`キー「key」の値は「${value}」です。`);
} else {
  console.log('キー「key」は存在しません。');
}

このように、条件分岐を使ってクエリパラメータの存在をチェックすれば、エラーを防ぐことができます。

○不正なクエリパラメータへの対策

次に、不正なクエリパラメータへの対策です。

ユーザーが手動でURLを改変したり、外部からの不正なリンクを踏んでしまったりすると、想定外のクエリパラメータが渡ってくることがあります。

例えば、数値を期待しているパラメータに文字列が渡ってきた場合などです。

const params = new URLSearchParams('?page=abc');
const page = parseInt(params.get('page'), 10);
console.log(page); // 出力結果：NaN

このような場合、parseInt関数はNaNを返します。

NaNはNumber型の一種ですが、「数値ではない」ことを表します。

NaNかどうかは、isNaN関数を使ってチェックできます。

const params = new URLSearchParams('?page=abc');
const page = parseInt(params.get('page'), 10);
if (isNaN(page)) {
  console.log('不正なページ番号です。');
} else {
  console.log(`現在のページ番号は${page}です。`);
}

このように、parseInt関数とisNaN関数を組み合わせることで、不正な数値パラメータをチェックできます。

文字列パラメータの場合は、想定される値のリストを用意しておき、それに含まれているかどうかをチェックするのが一般的です。

const params = new URLSearchParams('?sort=abc');
const sort = params.get('sort');
const allowedSorts = ['asc', 'desc'];
if (!allowedSorts.includes(sort)) {
  console.log('不正なソート順です。');
} else {
  console.log(`現在のソート順は${sort}です。`);
}

このコードでは、allowedSorts配列に許可されたソート順のリストを定義しています。

includes メソッドを使って、クエリパラメータの値がこのリストに含まれているかどうかをチェックしています。

○エンコーディングの問題と解決策

最後に、エンコーディングの問題と解決策を紹介します。

クエリ文字列に日本語などのマルチバイト文字を含める場合、正しくエンコーディングされていないと問題が起こります。

const params = new URLSearchParams('?name=山田太郎');
const name = params.get('name');
console.log(name); // 出力結果：山田太郎

このコードでは、一見問題なさそうに見えます。

しかし、URLSearchParamsコンストラクタは、渡されたクエリ文字列がエンコードされていることを期待しています。

正しくは、次のようにエンコードされているべきです。

const params = new URLSearchParams('?name=%E5%B1%B1%E7%94%B0%E5%A4%AA%E9%83%8E');
const name = params.get('name');
console.log(name); // 出力結果：山田太郎

したがって、クエリ文字列を手動で構築する場合は、encodeURIComponent関数を使ってエンコードする必要があります。

const name = '山田太郎';
const encodedName = encodeURIComponent(name);
const url = `https://example.com?name=${encodedName}`;
console.log(url); // 出力結果：https://example.com?name=%E5%B1%B1%E7%94%B0%E5%A4%AA%E9%83%8E

逆に、クエリパラメータからデコードされた値を取得したい場合は、decodeURIComponent関数を使います。

const params = new URLSearchParams('?name=%E5%B1%B1%E7%94%B0%E5%A4%AA%E9%83%8E');
const encodedName = params.get('name');
const name = decodeURIComponent(encodedName);
console.log(name); // 出力結果：山田太郎

これで、マルチバイト文字を含むクエリパラメータも正しく扱えるようになりました。

●location.searchの応用例

ここまでlocation.searchの基本的な使い方から実践的な活用法、さらにはエラー対処法まで幅広く学んできました。

でも、location.searchの可能性はまだまだ無限大です。

ここでは、もう少し発展的なlocation.searchの応用例を3つ紹介します。

JavaScriptのスキルを磨きたい方は、ぜひ参考にしてみてくださいね。

○サンプルコード8：履歴管理への活用

まず、履歴管理への活用例です。

Webアプリケーションでは、ユーザーのアクションに応じてページ遷移を行うことが多いですよね。

でも、ブラウザの戻るボタンを押したときに、前の状態が復元されないと、ユーザーは戸惑ってしまうかもしれません。

そんなときは、URLパラメータを使って状態を保持しておくのが有効です。

window.addEventListener('popstate', (event) => {
  const params = new URLSearchParams(location.search);
  const page = params.get('page') || 1;
  const perPage = params.get('perPage') || 10;
  // ページ番号とページあたりのアイテム数を使って、前の状態を復元する処理を書く
});

const params = new URLSearchParams();
params.set('page', 2);
params.set('perPage', 20);
const newUrl = `${location.pathname}?${params.toString()}`;
window.history.pushState(null, '', newUrl);

このコードでは、popstateイベントを使って、ブラウザの戻るボタンが押されたことを検知しています。

イベントハンドラの中で、URLパラメータからページ番号とページあたりのアイテム数を取得し、前の状態を復元します。

また、新しいページに遷移するときは、pushStateメソッドを使ってURLを変更しています。

これにより、ブラウザの履歴にエントリが追加されます。

このように、URLパラメータと履歴APIを組み合わせることで、ユーザーにとって自然なページ遷移を実現できます。

○サンプルコード9：A/Bテストでの使用例

次は、A/Bテストでの使用例です。

Webサイトの最適化を行う際、複数のバージョンを比較するA/Bテストは欠かせません。

でも、サーバーサイドでユーザーを振り分けるのは大変ですし、JavaScriptで動的にコンテンツを切り替えるのもあまりスマートではありません。

そこで、URLパラメータを使ってA/Bテストを行う方法を紹介します。

const params = new URLSearchParams(location.search);
const version = params.get('version') || 'A';
if (version === 'A') {
  // バージョンAの処理を書く
} else if (version === 'B') {
  // バージョンBの処理を書く
}

このコードでは、URLパラメータ「version」の値に応じて、表示するコンテンツを切り替えています。

バージョンAとバージョンBで異なる処理を行えば、A/Bテストが実現できます。

テスト対象のユーザーには、バージョンを指定したURLを送るだけで済みます。

例えば、「https://example.com?version=A」や「https://example.com?version=B」のようなURLです。

サーバーサイドの変更は不要ですし、JavaScriptのコードも簡潔に書けます。

URLパラメータを活用すれば、A/Bテストの敷居がグッと下がりますね。

○サンプルコード10：シェアボタンへの組み込み

最後は、シェアボタンへの組み込み例です。

記事やブログ記事には、TwitterやFacebookなどのSNSにシェアするためのボタンが付いていることが多いですよね。

でも、ただURLをシェアしても、伝えたい情報が十分に伝わらないかもしれません。

そんなときは、URLパラメータを使って、シェアする際のメッセージを指定するのが効果的です。

const params = new URLSearchParams();
params.set('text', '記事のタイトル');
params.set('url', location.href);
params.set('hashtags', 'tag1,tag2');
const shareUrl = `https://twitter.com/share?${params.toString()}`;
window.open(shareUrl, '_blank', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1');

このコードでは、URLパラメータを使って、ツイート内容を動的に生成しています。

記事のタイトルやURL、ハッシュタグを指定することで、より詳細な情報をシェアできます。

生成されたURLは、Twitterのシェア用URLです。

window.openメソッドを使って、別ウィンドウでこのURLを開くことで、ツイート画面を表示しています。

同様の手法は、他のSNSでも応用できます。

URLパラメータを活用することで、シェア時のユーザー体験を向上させられるでしょう。

まとめ

おさらいですが、クエリパラメータの取得や設定、複数パラメータの処理など、location.searchの基本はしっかり押さえておくことが大切です。

それができれば、ページネーションやフィルタリング、動的なコンテンツ表示など、より実践的な場面でもlocation.searchを活用できるようになります。

今回紹介した応用例を参考に、オリジナルのアイデアを実装してみてください。

履歴管理やA/Bテスト、シェアボタンなど、location.searchを使えばWebサイトの可能性が大きく広がります。

ユーザー視点に立って、使いやすさを追求していきましょう。