URLエンコード（パーセントエンコーディング）の使い方
URL エンコード 開発 Web
結論
クエリパラメータの値はencodeURIComponent。URL全体ならencodeURI。日本語・スペース・記号は%XX形式に変換する。
URLエンコードとは
URLには英数字と一部の記号（-_.~など）しかそのまま使えません。スペース、日本語、& = ? # などは、そのまま書くとURLの構造と衝突して正しく解釈されません。そこで「%XX」形式（XXは16進2桁）に変換するのがURLエンコードです。
例：スペース→%20、日本語「検索」→%E6%A4%9C%E7%B4%A2（UTF-8のバイト列を%XXに）
なぜ必要か
| 文字・状況 | 理由・例 |
|---|---|
| スペース | URLでは使えない。%20または+に変換。検索キーワード「hello world」→`hello+world` |
| 日本語 | UTF-8でバイト列に変換してから%XX形式に。APIのパラメータで必須。 |
| & = ? # | URLの区切り文字として使われる。クエリの値に含める場合はエンコード必須。 |
| API連携 | 検索キーワードやパラメータをURLに載せる際、必ずエンコードする。 |
encodeURIComponent と encodeURI の違い
| 関数 | 用途・エンコードするもの |
|---|---|
| **encodeURIComponent** | クエリパラメータの**値**に使う。&、=、?、#もエンコードするので、値として安全に埋め込める。 |
| **encodeURI** | URL全体をエンコード。:、/、?、#はエンコードしない。パス全体を扱うときに使う。 |
クエリの値だけをエンコードするなら、必ずencodeURIComponentを使う。 encodeURIだと&や=がエンコードされず、パラメータの区切りが崩れる。
実践例
検索キーワード「開発 ツール」をクエリに含める場合：
https://example.com/search?q=%E9%96%8B%E7%99%BA+%E3%83%84%E3%83%BC%E3%83%ABスペースは+または%20。多くのサーバーは+をスペースとして解釈する。
デコードするとき
サーバー側や、URLSearchParamsでパラメータを取り出すときは、自動でデコードされる。JavaScriptで手動ならdecodeURIComponent。エンコードとデコードをセットで覚えておくと、トラブルを防ぎやすい。
🧪 URLエンコードツールで試す
変換結果をすぐ確認できます
試す