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エンコードを試す

関連記事

この記事は 開発ツール・基礎 テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
Base64とは？仕組みから使い方まで解説Base64とは？仕組みから使い方まで解説
Base64デコードで日本語が文字化けする原因と対処法Base64デコードで日本語が文字化けする原因と対処法
JSON 整形ツールの使い方JSON 整形ツールの使い方｜オンラインで安全に整形・圧縮
JSONの「Unexpected token」エラー原因と対処法JSONの「Unexpected token」エラー原因と対処法
ハッシュ生成 - SHA-256/384/512をローカルで安全に計算ハッシュ生成 - SHA-256/384/512をローカルで安全に計算
MD5 ハッシュ生成MD5 ハッシュ生成｜md5 hashの使い方の使い方と注意点まとめ実務ガイド実践ガイド
正規表現でよく使うパターン10選正規表現でよく使うパターン10選｜開発で役立つRegex
Markdown記法チートシートMarkdown記法チートシート｜コピペで使える一覧
Gitコマンドよく使う一覧Gitコマンドよく使う一覧｜初心者向けクイックリファレンス
Git Worktree 並行開発ワークフロー完全ガイドGit Worktree 並行開発ワークフロー完全ガイド｜複数ブランチ同時作業・IDE設定・CI連携（2026）
.envファイルのベストプラクティス.envファイルのベストプラクティス｜機密情報を安全に管理する
HTMLエスケープ（サニタイズ）が必要な理由HTMLエスケープ（サニタイズ）が必要な理由｜XSS攻撃を防ぐ基礎知識