encodeURIとencodeURIComponentの違い｜URL全体・クエリパラメータの使い分け

JavaScriptでURLを組み立てるとき、encodeURIとencodeURIComponentのどちらを使うべきか迷うことがあります。結論からいうと、URL全体にはencodeURI、検索キーワードやパラメータ値にはencodeURIComponentを使うのが基本です。

この記事の要点

URL全体をそのまま使いたい場合は、encodeURIを使います。
検索語やクエリパラメータの値をURLに入れる場合は、encodeURIComponentを使います。
&や=を含む値をencodeURIで処理すると、URLの区切りとして誤解されることがあります。

変換結果をすぐに比較したい方へ

URLエンコード・デコード変換ツールで方式を切り替えて確認できます。

URLエンコード変換ツールを使う

違いの結論

encodeURIとencodeURIComponentの大きな違いは、URLの構造に使う記号を残すかどうかです。encodeURIはURL全体向けなので、:、/、?、&、=などを残します。

一方、encodeURIComponentはURLの部品向けです。クエリパラメータの値の中に&や=が入っても、URLの区切りとして解釈されないようにエンコードします。

やりたいこと	使うもの	理由
完成済みのURL全体を変換したい	`encodeURI`	`https://` や `?` などURLの構造を残せるため
検索キーワードをURLに入れたい	`encodeURIComponent`	`&` や `=` を値として安全に扱えるため
複数のクエリパラメータを作りたい	`URLSearchParams`	手動で連結するよりミスが少ないため

encodeURIを使う場面

encodeURIは、すでにURLとして組み立てられている文字列全体をエンコードするときに向いています。URL構造を保ったまま、日本語やスペースなどを変換できます。

encodeURI("https://shinsu.jp/検索?q=日本語 URL")→ https://shinsu.jp/%E6%A4%9C%E7%B4%A2?q=%E6%97%A5%E6%9C%AC%E8%AA%9E%20URL

ただし、クエリパラメータの値に&や=が含まれる場合は、値の部分だけ先にencodeURIComponentで処理する方が確実です。

encodeURIComponentを使う場面

encodeURIComponentは、URLの一部を安全に埋め込むために使います。検索語、タグ名、ファイル名、APIへ渡す値など、URL構造ではなくデータとして扱いたい部分に向いています。

encodeURIComponent("東京&大阪=比較")→ %E6%9D%B1%E4%BA%AC%26%E5%A4%A7%E9%98%AA%3D%E6%AF%94%E8%BC%83

クエリパラメータの例

検索語をqというパラメータに入れる場合、値だけをencodeURIComponentで変換してからURLへ連結します。

検索語として東京&大阪=比較を受け取ります。
値の部分をencodeURIComponentで変換します。
?q=の後ろへ変換済みの値を連結します。

作成されるURL

https://example.com/search?q=%E6%9D%B1%E4%BA%AC%26%E5%A4%A7%E9%98%AA%3D%E6%AF%94%E8%BC%83

この場合、&や=は区切り記号ではなく検索語の一部として扱われます。

JavaScriptでの使い分け例

検索フォームやタグ検索のURLを作るなら、値だけをencodeURIComponentで変換します。URLの区切り文字までまとめて変換しないのがポイントです。

const keyword = "東京&大阪=比較";const url = "https://example.com/search?q=" + encodeURIComponent(keyword);console.log(url);// https://example.com/search?q=%E6%9D%B1%E4%BA%AC%26%E5%A4%A7%E9%98%AA%3D%E6%AF%94%E8%BC%83

複数のクエリパラメータを扱う場合は、URLSearchParamsを使うと連結ミスを減らせます。

const params = new URLSearchParams();params.set("q", "東京&大阪=比較");const url = "https://example.com/search?" + params.toString();console.log(url);

スペースと+の違い

encodeURIとencodeURIComponentは、半角スペースを%20へ変換します。フォーム送信で使われるapplication/x-www-form-urlencodedでは、スペースを+で表すことがあります。

JavaScriptでクエリ文字列を組み立てる場合は、手作業で+へ置換するより、URLSearchParamsを使うと形式の違いを扱いやすくなります。

よくある間違い

どちらの関数も「URLエンコードする」という意味では似ていますが、使う場所を間違えるとURLとして扱いにくい文字列になったり、検索条件が別のパラメータとして解釈されたりします。

URL全体に`encodeURIComponent`を使ってしまう

encodeURIComponent("https://shinsu.jp/検索?q=日本語");// https%3A%2F%2Fshinsu.jp%2F%E6%A4%9C%E7%B4%A2%3Fq%3D%E6%97%A5%E6%9C%AC%E8%AA%9E

この結果は、https://の:や/まで変換されています。保存用の文字列として扱うなら別ですが、そのままクリックして開けるURLとしては不向きです。

パラメータ値に`encodeURI`を使ってしまう

クエリパラメータの値に&が含まれている場合、encodeURIは&を残します。そのため、本当は検索語の一部として渡したかった文字が、別のパラメータの区切りとして解釈されることがあります。

すでにエンコード済みの文字列をもう一度エンコードする二重エンコードや、URLエンコードをHTML・SQLの安全対策と混同する点にも注意が必要です。

二重エンコードに注意

%E6%97%A5をもう一度エンコードすると%25E6%2597%25A5のように変わります。入力がすでにエンコード済みか確認してください。

よくある質問

URL全体をエンコードするならどちらを使いますか？

URL全体を渡す場合はencodeURIが向いています。https://、/、?、&、=などURL構造に必要な記号を残します。

クエリパラメータの値にはどちらを使いますか？

クエリパラメータの値にはencodeURIComponentを使います。&や=を値の一部として扱えるようにエンコードできます。

URLSearchParamsを使えばencodeURIComponentは不要ですか？

多くの場合、クエリパラメータの組み立てにはURLSearchParamsを使うと安全です。値のエンコードを自動で扱えるため、手動でencodeURIComponentを連結するよりミスを減らせます。

日本語のURLにはどちらを使えばいいですか？

完成済みのURL全体を扱うならencodeURI、日本語の検索語やタグ名などをURLの一部として入れるならencodeURIComponentを使います。

encodeURIComponentでURL全体を変換するとどうなりますか？

https://のコロンやスラッシュまでエンコードされ、URLとしてそのまま開く文字列ではなくなります。

スペースは+になりますか？

JavaScriptのencodeURIとencodeURIComponentではスペースは%20になります。フォーム形式では+を使うことがあります。