location.searchとは？初心者が今すぐ使いこなせる基本と実践ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

location.searchとは？

location.search はブラウザの location オブジェクトの一部で、現在のURLのクエリ文字列だけを取り出す働きをします。クエリ文字列とは URL の ? 以降の部分で、名前と値のペアが & でつながっています。例えば https://example.com/search?q=location.search&lang=ja というURLの location.search は ?q=location.search&lang=ja になります。

この部分を使うと、検索条件に応じてページの内容を変えたり、特定の動作を実行したりできます。初心者の方はまず location.search が何を返しているのかを確認する習慣をつけましょう。

ポイント クエリ文字列を扱うときは安全第一です。外部から渡される値をそのまま使わず、必要に応じて読み取り専用にするか、あるいは URLSearchParams で簡単に分解して使いましょう。

クエリ文字列とは？

クエリ文字列は URL の ? の後ろに続く部分で、名前と値の組み合わせです。例として ?name=太郎&age=12 の場合 name は太郎、age は 12 です。location.search はこの ?name=太郎&age=12 の部分を文字列として返します。この情報を使うと同じページでも条件に合わせて表示を変えられます。

説明	クエリ文字列全体
例	?name=太郎&age=12
用途	ページの動的な表示・挙動の分岐

URLSearchParams を使って読み取る方法はとても分かりやすいです。以下のコードを参考にしてください。

例: const params = new URLSearchParams(location.search); const name = params.get('name');

このように get を使えば任意のパラメータの値を取得できます。別の方法として has もあり、getAll、has、set などのメソッドを組み合わせると複数の値を扱えます。

続いて URL を変更したい場合の操作方法です。現在のページをリロードしてしまう点に注意してください。

例: const p = new URLSearchParams(location.search); p.set('page','2'); location.search = '?' + p.toString();

この操作はページを再読み込みしますので、必要に応じて保存しておくか、リロードを避けたい場合は SPAs で hash か履歴 API を使うと良いでしょう。

location.hash との違いも覚えておくと役立ちます。location.hash は URL の # 以降の部分で、ページ内のアンカーやスクロール位置制御に使われます。location.search はサーバーに渡すクエリ情報なので、目的が異なります。

よくある誤解として、クエリ文字列をそのまま信じて URL の不正を生むケースがあります。実践では入力値を検証し、必要な場合はサニタイズを行うことが大切です。

まとめ

location.search は URL の ? 以降の情報を読み書きする強力な道具です。初心者はまず読取りから始め、URLSearchParams を使って安全かつ簡潔に値を取得しましょう。適切に扱えば、検索条件に応じたページ表示や動作の分岐が容易になります。

location.searchの同意語

クエリ文字列: URL の '?' 以降に続く、パラメータ名と値の組み合わせを連ねた文字列のこと。先頭には '?' が付き、location.search はこの部分を含んだ文字列を返します。
URLのクエリ部: URL の中で、パラメータを表す部分。'?' の後ろに続く文字列の総称を指します。
クエリストリング: クエリ文字列の別表現。英語由来の用語で、技術文書などでよく使われます。
URLのクエリパラメータ文字列: URL のクエリ部に含まれる全パラメータの文字列を指します。
クエリパラメータ: URL に付随する名前と値のペアの集合。location.search が表すのは、このパラメータ群を文字列として結合したものです。
検索パラメータ文字列: クエリ文字列と同義の言い換え。URL の '? ' 以降の文字列を指す表現です。
Locationオブジェクトのsearchプロパティ: ブラウザの Location オブジェクトにある search プロパティのこと。ここには '? ' 以降のクエリ文字列が格納されます。

location.searchの対義語・反対語

location.pathname: 検索クエリ（? 以降）ではなく、URL のパス部分を指す。例えば /articles/ のようにリソースの階層を表す。
location.hash: 検索クエリとは別の識別子で、# 以降にあるフラグメントを指す。
location.href: 現在のページの完全な URL を文字列として返す。検索クエリを含むこともあるが、全体像を示す。
location.origin: URL の原点。プロトコルとホスト（場合によりポート）をまとめた部分。
location.protocol: URL の通信スキーム（http:, https: など）を指す。
location.host: ホスト名とポート番号を含む部分。パスやクエリとは別の領域。
検索クエリなし: URL にクエリ文字列が含まれていない状態。location.search が空のときと同等。

location.searchの共起語

Locationオブジェクト: ブラウザが提供する window.location の総称。現在のURL情報を参照・操作するためのAPI群。
location.href: 現在の完全なURL文字列。取得でURLを読み取り、代入でページ遷移を行える。
location.search: URLのクエリ文字列部分。先頭の ? を含むことが多い文字列。
location.hash: URLのハッシュ部分（# 以降）。ページ内のアンカー参照や状態管理に使われることがある。
location.pathname: URLのパス部分（例: /path/index.html）。
location.origin: URLの原点情報。スキーム・ホスト・ポートを含む部分。
URL: ウェブ上の資源を表す識別子。new URL(...) で分解・組み立ても可能なオブジェクト/文字列。
クエリ文字列: URL の ? 以降に並ぶパラメータ列のこと。パラメータ名と値の組み合わせで構成される。
パラメータ: クエリ文字列に含まれる各項目（キーと値）のこと。
パラメータ名: クエリ文字列のキー部分。例: ?foo=bar の foo。
パラメータ値: クエリ文字列の値部分。例: ?foo=bar の bar。
URLSearchParams: クエリ文字列を操作するためのWeb API。get/ set/ append/ delete/ has などの操作が可能。
URLSearchParams.get: 指定したパラメータ名の値を取得する方法。
URLSearchParams.set: 指定したパラメータの値を設定。存在しなければ追加される。
URLSearchParams.append: 同じキー名で複数の値を追加する場合に使用。
URLSearchParams.delete: 指定したパラメータを削除する操作。
URLSearchParams.has: 指定したパラメータの存在を判定する。
encodeURIComponent: クエリ文字列の値をエンコードして、安全に URL に含められるようにする関数。
decodeURIComponent: エンコードされた値を元の文字列に戻す関数。
エンコード: URL に含める文字を安全な形式に変換する処理（主にパーセントエンコード）。
パーセントエンコード: 文字を %XX の形で表現するエンコード方式。URL の一部として使われる。
新しいURLの作成: new URL(...) を使って基準URLから新しいURLオブジェクトを作成する操作。
baseURL: new URL の際に第二引数として使われる基準URL。相対URLを解決する際に用いられる。
解析/パース: クエリ文字列を読み解き、使いやすい形（オブジェクトなど）に変換する作業。
デバッグ: location.search を確認するなど、開発時に挙動を検証する作業。
ブラウザAPI: location、URL、URLSearchParams など、クライアントサイドの標準API群。
windowオブジェクト: location を含むグローバルオブジェクト。ブラウザの実行環境で提供される。
セキュリティ: クエリ文字列はユーザー入力を含む可能性があるため、検証・サニタイズが重要。
ハッシュ変更イベント: hashchange イベントを使って location.hash の変化を検知する手段。
SPA活用: 単一ページアプリでURLのクエリを状態管理に活用する設計手法。

location.searchの関連用語

location.search: URLのクエリ文字列部分を指すプロパティ。先頭に ? が付き、現在のページの検索パラメータを取得・変更するのに使われます。
location.hash: URLのフラグメント（#以降の文字列）。ページ内リンクやSPAのルーティングに使われ、サーバには送信されません。
window.location: 現在表示中のURLを表す Location オブジェクト。プロパティを読み書きしてURLを参照・変更できます。
URL: URL全体を扱う組み込みオブジェクト。new URL('https://example.com/path?q=1') のように使い、クエリの取得・組み立てを行えます。
URLSearchParams: URLのクエリ文字列を簡単に操作するAPI。get/set/append/deleteなどのメソッドでパラメータを扱えます。
searchParams: URLオブジェクトに付随する URLSearchParams のインスタンスを指します。クエリパラメータを反復処理できます。
search: URLのクエリ文字列全体（先頭の ? を含む）。location.searchや new URL(...).search で取得します。
pathname: URLのパス部分（例: /path/to/page）。
origin: URLの起点。プロトコル + '//' + ホストの組み合わせ（例: https://example.com:443）です。
protocol: URLの通信プロトコル部分（例: 'http:' や 'https:'）。
host: ホスト名とポートを含む部分（例: example.com:443）です。
hostname: ホスト名だけを指します（例: example.com）。
port: ポート番号を文字列で返します（例: '443'）。空文字の場合もあります。
pushState: History APIのメソッド。現在のページを再読み込みせずに新しいURLを履歴に追加します。
replaceState: History APIのメソッド。現在の履歴エントリを置換してURLを変更します。
history: Historyオブジェクト。pushState/replaceStateの他、backやforward、goを使えます。
encodeURIComponent: URIの部品を安全にエンコードする関数。スペースは%20などに変換します。
decodeURIComponent: エンコードされたURI部品を復元します。
encodeURI: URL全体をエンコードします。区切り文字は残すことが多いです。
decodeURI: エンコードされたURLを復元します。
query string: URLの ? 以降のパラメータ文字列。キーと値は '=' で結ばれ、'&' で区切られます。
fragment identifier: URLの#以降の部分。SPAのルーティングやページ内ジャンプに使われます。
UTM parameters: utm_source/utm_medium/utm_campaign など、広告やキャンペーンの計測用パラメータです。
GET parameters: HTTPのGETリクエストでURLに付くパラメータ。サーバへ送信されます。
Base URL: 相対URLを解決する基準となるURL。new URL('/path', 'https://example.com') のように使います。
クエリ文字列の解析: クエリ文字列をキーと値に分解して扱いやすい形にする処理のこと。
パラメータのエンコード: URLに含める値を安全にするために文字をエンコードすること。
パーセントエンコーディング: URLエンコードの正式名称。特殊文字を %XX 形式で表します。
canonical URL: SEOで同一内容のURLが複数ある場合に、正規のURLを示す指針。重複コンテンツ対策として重要です。
同一オリジンポリシー: 異なるオリジン間のデータアクセスを制限するブラウザの安全機構。LocationやURLの扱いにも影響します。
セキュリティ: XSSリスク: クエリパラメータをそのまま表示すると外部からの悪意あるコードが実行される可能性があるため、出力時のエスケープが必須です。
polyfill: 古いブラウザでURL関連APIを使えるようにする代替実装（ポリフィル）です。
キャッシュバスティング: URLのクエリパラメータを変えることでブラウザのキャッシュを無効化するテクニック。主に静的資産で使われます。
クエリの解析と処理の違い: サーバーサイドとクライアントサイドでパラメータをどう解釈するかの設計を指す概念。
URL構造の理解: URLは scheme://host:port/path?query#fragment の順に構成され、それぞれ意味が異なります。