JSON

クエリ文字列

JSONからクエリ文字列ツールは何をする？

コードの中でJSON設定を組み立てた — フィルタパラメータ、解析用ペイロード、OAuthのstate — そして今、それをURLに付け足したい。このページがその地味な最後の仕上げを引き受けます。左にJSONを貼ると、右に ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified が返ってきて、リンクやfetch呼び出し、Webhook URLにそのまま放り込めます。配列は繰り返しキーに展開され（最近のサーバーがどれも理解する慣習です）、値は適切にパーセントエンコードされ、先頭の ? も付くのでURLにそのまま貼れます。

変換にはブラウザ組み込みの URLSearchParams を使います — これはサーバー側のフレームワークが返ってきたリクエストをパースするのに使うのと同じ部品です。URLSearchParamsはWHATWG URL Standardに従って application/x-www-form-urlencoded 形式の出力を生成し、JSONは RFC 8259 に従って JSON.parse でパースされます。数値とブール値は文字列に変換され（クエリ文字列に型システムはないため）、null と undefined の値はスキップされ、ネストされたオブジェクトは分かりやすいエラーを投げるので、フラット化できます。

すべてはブラウザ内でローカルに実行されます — アップロードなし、サーバー往復なし、ログなし。逆向きの問題があるなら（クエリ文字列があってJSONにしたい場合）、クエリ文字列からJSONへを使ってください。URL全体をプロトコル、ホスト、パス、検索部分に分解したいなら URLからJSONへまたは URLパーサーの方が向いています。ここで使われているパーセントエンコードのルールは RFC 3986 §2.1 で定義されており、より広いURLパースのモデルは MDNのURL API リファレンスにまとまっています。

JSONをクエリ文字列に変換する方法

3ステップ。それぞれがページ上のボタンに対応しています。

JSONオブジェクトを貼る

左のパネルにJSONを入れます。トップレベルの値はオブジェクトでなければなりません — 配列やプリミティブはクエリパラメータにきれいにマップできません。サンプル をクリックすると、文字列、数値、角括弧キー、配列を含む現実的なECフィルタのペイロードが入ります。サンプル：

{
  "customer": "Ava Chen",
  "status": "active",
  "total[gte]": "49.99",
  "page": 2,
  "tag": ["premium", "verified"]
}

数値とブール値は文字列に変換されます（クエリ文字列に型はありません）。<code>null</code> と <code>undefined</code> の値はスキップされます — そのままだとURLが散らかるだけだからです。

クエリ文字列を読む

右のパネルは入力に合わせて更新されます。上のサンプルからは ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified が生成されます。スペースは + になり（form-encodedスタイル — FAQ参照）、角括弧は %5B/%5D になり、tag 配列は2つの別々の tag= パラメータに展開されます。

コピーまたはダウンロード

コピー でクエリ文字列をクリップボードに送るか、ダウンロード で querystring.txt として保存します。クリア で入力パネルをリセットします。

実際に使う場面

共有可能なフィルタURLを作る

ダッシュボードでユーザーが顧客、ステータス、日付範囲で注文を絞り込めるとします。状態はコンポーネント内でJSONオブジェクトとして保持されています（{customer: "Marco Rivera", status: "active", date_from: "2026-04-01"}）。ビューを共有可能にするには、それをURLに付け足すだけ — ここにJSONを貼ってクエリ文字列をコピーすれば終わりです。ECのカテゴリページ、検索結果、状態を持つフィルタなら何にでも応用できます。

WebhookコールバックURLの組み立て

Stripe、GitHub、ほとんどのWebhook送信元はコールバックURLのクエリ文字列にメタデータを置けます。ユーザーを表すJSONオブジェクト（{userId: "USR-1001", source: "checkout", flow: "onboarding"}）があり、それを https://api.example.com/webhook?... に付け足したい。貼って、コピーして、貼る — 各値を手作業でURLエンコードして、どの文字をエスケープすべきか悩むよりずっと楽です。

OAuthとOpenIDのURL生成

OAuthの認可URLは8〜12個のクエリパラメータからなります：client_id、redirect_uri、scope、state、response_type など。先にJSONで組み立てて（きれいに見るため）ここで変換する方が、文字列を連結してエンコードが正しく当たっていることを祈るより速いです。state パラメータにはnonceや戻り先パスが入ることが多く、それらにも独自のエスケープが必要です。

HTTPクライアントでのAPIリクエスト構築

cURL、Postman、あるいはサクッと書いた fetch() でAPIエンドポイントを試すとき、たいていパラメータはドキュメントのJSONスニペットの形をしています。ここで変換してURLに付け、リクエストを投げる。注文ORD-1001の商品フィルタ {"sku": "SKU-101", "include": "variants"} は1回の貼り付けで ?sku=SKU-101&include=variants になります。

よくある質問

なぜスペースが%20ではなく+でエンコードされるの？

出力がform-encoded（application/x-www-form-urlencoded）だからです。これはどのブラウザも送るし、どのサーバーもクエリ文字列で受け取ることを想定している形式です。RFC 3986では技術的にはURIコンポーネント中で %20 が望ましいとされていますが、スペースを + にするform-encodedの慣習はRFC 3986より古く、クエリ文字列が90年代から使ってきた書き方です。最近のサーバーフレームワークはどちらもデコードします — Express、FastAPI、ASP.NET、Spring、Rails、Django、なんでも。どうしても %20 が必要なら、出力に対して .replace(/\+/g, "%20") を一発掛けてください。

配列はどうエンコードされるの？

繰り返しキーに展開されます。{"tag": ["premium", "verified"]} は tag=premium&tag=verified になります。これはURLSearchParamsが生成する慣習で、受け側で URLSearchParams.getAll() を使えばきれいに往復します。サーバーが角括弧記法（tag[]=premium&tag[]=verified — PHPやRailsでよくある）を期待するなら、JSONのキーを tag ではなく tag[] にしてください。

JSONにネストされたオブジェクトを入れられる？

いいえ — クエリ文字列は設計上フラットです。ネストされたオブジェクトを見つけるとページが分かりやすいエラーを返すので、フラット化してください。一番よくある回避策は角括弧記法のキーです：{"filter": {"status": "active"}} ではなく {"filter[status]": "active"} と書きます。Rails、PHP、qs.jsのようなフレームワークはサーバー側でこれをネストされたオブジェクトに戻してパースします。あるいは概念的にフラット化するのもアリです：本当の曖昧さがないなら {"status": "active"} で十分です。

nullとundefinedの値はどうなる？

スキップされます。{"customer": "Ava Chen", "status": null} は ?customer=Ava+Chen&status= ではなく ?customer=Ava+Chen になります。理由：URL中の status= は「空文字列」を意味し、これは「statusなし」とは別の実在する値です。null を空として送ると情報が失われ紛らわしくなります。本当に status= を送りたいなら {"status": ""} を送ってください。

数値とブール値は型を保持する？

いいえ — クエリ文字列は文字列しか運びません。{"page": 2} は page=2 になり、{"debug": true} は debug=true になります。サーバー側のコードがスキーマを知っていて型に戻す必要があります。これはクエリ文字列（とフォームデータ）の根本です — ワイヤフォーマットには数値の2と文字列の"2"の違いがありません。型付きパラメータが必要なら、リクエストボディにJSONとして入れて送ってください。

キーや値のUnicodeや絵文字はどう扱われる？

きれいに扱われます。URLSearchParamsはバイトをUTF-8でエンコードし、安全集合の外側はパーセントエスケープします。{"name": "中文"} は name=%E4%B8%AD%E6%96%87 になり、{"reaction": "🔥"} は reaction=%F0%9F%94%A5 になります。受信側ではURLSearchParams（やフレームワークのクエリパーサー）がきちんと戻します。エンコーディング設定をいじる必要はありません — UTF-8がURL Standardで定められているからです。

先頭の?は何のため？

出力をURLにそのまま貼れるようにするためです — https://shop.example.com/orders + ?customer=Ava+Chen&page=2 = 動くURL。すでにクエリ文字列があるURLに付け足すなら、? を外して & を使ってください。入力が空だったり {} だったりすれば、出力も空になります（裸の ? は出ません）。

その他のURL & JSONツール

クエリ文字列の組み立ては1つの操作にすぎません。組み合わせて使えるツールはこちら：

JSONからクエリ文字列へ