ひとことで言うと
クエリ文字列とは、URL内の「?」より後ろに続く「キー=値」の組み合わせです。例えばhttps://example.com/page?lang=ja&v=2のうち、lang=jaとv=2がクエリ文字列です。複数のパラメータは&で区切ります。サーバーサイドのプログラムはこれを読み取って処理を切り替えますが、静的HTMLファイルの場合はJavaScriptがURLを解析しない限りページ表示に影響しません。
クエリ文字列はHTTPリクエストのGETパラメータとして送信されるため、ブラウザのアドレスバー・サーバーのアクセスログ・Refererヘッダに記録されます。セッションIDやパスワードをクエリ文字列に含めてはいけない理由もここにあります。URLを他人と共有した瞬間にそのURLに含まれる全情報が見える状態になります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
AIで生成した静的HTMLをギガサイト便で公開するとき、アクセス解析用のUTMパラメータ(?utm_source=slack など)を付けて共有するのが代表的な使い方です。ページのHTMLを変更せずにアクセス元を計測できるため、複数チャネルで同一ページを共有するときの効率が上がります。
JavaScriptが使われている静的サイトでは、クエリ文字列を使ってページの初期状態を制御することもあります。例えば?mode=darkでダークモード表示、?lang=enで英語表示というURLを発行しておき、用途別に共有するパターンです。ただしこの挙動はJS実装に依存するため、AIが生成したHTMLに同様の処理が含まれているかをソースで確認する必要があります。
よくある誤解
「クエリ文字列を変えればページが変わる」と思う人がいますが、静的HTML(サーバーサイド処理なし・JS処理なし)ではクエリ文字列を変えても同じページが表示されます。URLパラメータを読み取る処理が実装されていなければ無視されるだけです。
「クエリ文字列はURLフラグメント(#以降)と同じ」という混同もよくあります。両者の最大の違いはサーバーへの送信有無です。クエリ文字列はサーバーに送信されアクセスログに残りますが、URLフラグメント(#以降)はブラウザ内だけで処理されサーバーには届きません。
安全に使うための注意点
クエリ文字列にメールアドレス・氏名・社内IDなどの個人情報を含めないよう徹底してください。URLはブラウザの履歴・サーバーログ・サードパーティのアナリティクスツールに記録されるため、クエリ文字列に個人情報があると情報漏洩リスクが高まります。個人に紐づいた情報はPOSTリクエストのbodyかCookieで扱うのが基本です。
外部の人と共有するURLにクエリ文字列でアクセストークンを含めるのも危険です。ブラウザのリファラとして別サイトに情報が送信されることがあります。アクセス制御が必要な共有にはギガサイト便のようなサービス側での認証機能を使い、URLパラメータにトークンを乗せる自己実装は避けてください。
よくある質問
クエリ文字列に日本語を使うことはできますか?
使えますが、URLエンコードが必要です。「?name=田中」はブラウザが自動エンコードして「?name=%E7%94%B0%E4%B8%AD」に変換します。プログラムからURLを生成する際はencodeURIComponent()などの関数でエンコードしてから使ってください。
クエリ文字列の長さに上限はありますか?
HTTP仕様に厳密な上限はありませんが、ブラウザやサーバーによって2000〜8000文字程度の制限があります。大量のデータをURLで渡すのではなく、POSTリクエストやLocalStorageなど別の手段を検討してください。
静的HTMLページでクエリ文字列をJavaScriptで読む方法は?
window.location.searchで「?key=value」の文字列を取得し、new URLSearchParams(window.location.search).get('key')で特定のキーの値を取り出せます。AIに「URLのクエリパラメータでlangを切り替えるコードを追加して」と依頼すれば自動生成できます。