クエリビルダー

ツール概要：Query Builder

Query Builder は、URL の query パラメータをキーと値の行として管理し、query string や完全な URL をリアルタイムで生成できるツールです。API テスト、広告リンク、検索条件、ページネーション URL の調整に向いています。

Query Builder とは？

Query Builder は、?page=1&sort=desc&tag=dev のような文字列を手作業で編集する代わりに、構造化された行単位の操作に変えます。各パラメータを追加、複製、削除しやすく、重複キーや空値、エンコードの扱いも分かりやすくなります。

使い方

1. 完全な URL を作りたい場合は、最初にベース URL を入力します。
2. raw query string を貼り付けて解析するか、手動でパラメータ行を追加します。
3. 各キーと値を編集します。
4. 値をエンコードするか、空行を除外するか、結果に ? を付けるかを選びます。
5. 生成された query string または完全な URL をコピーします。

よくある利用シーン

• API リクエスト URL の組み立て
• UTM 付きのキャンペーンリンク作成
• ページネーション、並び替え、絞り込み条件の確認
• 空のパラメータを除外して URL を再生成
• ドキュメントで query パラメータ構造を説明

❓ FAQ

Q1: 同じキーを複数回使えますか？
A: はい。重複したキーも行の順序を保ったまま出力されます。

Q2: ベース URL なしで query string だけ作れますか？
A: はい。query 部分だけを生成できます。

Q3: 一部の行が結果に出ないのはなぜですか？
A: 「空値をスキップ」を有効にすると、キーが空の行は除外されます。

✨ 主な機能

• query パラメータをキー/値行で視覚的に編集
• 既存の raw query string を解析して行に変換
• query string と完全な URL を同時に生成
• 値の自動エンコードを切り替え可能
• 空行の除外を切り替え可能
• tag=js&tag=vue のような重複キーに対応

📖 使用例

基本的な query 作成

入力行:

page = 2
sort = newest
tag = tools

生成結果:

?page=2&sort=newest&tag=tools

完全な URL を作成

ベース URL:

https://example.com/search

入力行:

q = query builder
lang = ja

生成結果:

https://example.com/search?q=query%20builder&lang=ja

重複キー

入力行:

tag = javascript
tag = vue
tag = nuxt

生成結果:

?tag=javascript&tag=vue&tag=nuxt

🎯 活用場面

1. API デバッグ

ページネーション、フィルタ、並び替えを調整しながら、リクエスト URL を素早く組み立てられます。

2. マーケティングリンク

utm_source、utm_medium、utm_campaign を含む URL を手作業なしで作成できます。

3. 検索・絞り込みページ

商品フィルタ、検索キーワード、並び順の query パラメータを整理して生成できます。

4. ドキュメントや学習用途

query パラメータの構造を、行ベースの分かりやすい形で説明できます。

💡 使い方のコツ

• ベース URL とパラメータを分けておくと、別ドメインでも同じ設定を再利用しやすくなります。
• 値に空白、記号、非 ASCII 文字が含まれる場合はエンコードを有効にしてください。
• 本番用リンクをコピーする前に「空値をスキップ」を有効にすると安全です。
• 同じキーを複数回求めるサービスでは、値を結合せずに行を分けて保持してください。