URLデコードとエンコードの違い：完全ガイド

2026年1月13日

Web開発、API、あるいは単にURLをコピーする作業をしたことがあれば、URLエンコーディングとデコーディングに遭遇したことがあるでしょう。しかし、それらの正確な違いは何で、いつそれぞれを使用すべきでしょうか？

基本を理解する

本質的に、URLエンコーディングとデコーディングは、データをURL経由で安全に送信できるようにするために連携する逆のプロセスです。

URLエンコーディングとは？

URLエンコーディング（パーセントエンコーディングとも呼ばれる）は、文字をURL内で安全に送信できる形式に変換するプロセスです。これが必要な理由は、URLにはASCII文字セットから厳密に選ばれた文字のセットしか使用できないためです。

例:

元の文字列: Hello World! How are you?
エンコード後:  Hello%20World%21%20How%20are%20you%3F

各特殊文字は、その16進数ASCII値が続く % に置き換えられます：

スペース → %20
! → %21
? → %3F

URLデコーディングとは？

URLデコーディングは逆のプロセスです - パーセントエンコードされた文字を元の形式に戻します。エンコードされたURLを受け取り、その実際の内容を読む必要がある場合に不可欠です。

例:

エンコード済み:  %E4%B8%AD%E6%96%87%E6%B5%8B%E8%AF%95
デコード後:  中文测试

いつそれぞれを使用するか

エンコーディングを使用する場合：

ユーザー入力を含むURLを構築する場合

const search = "hello world & goodbye";
const url = `https://api.example.com/search?q=${encodeURIComponent(search)}`;
// 結果: https://api.example.com/search?q=hello%20world%20%26%20goodbye

APIリクエストを作成する場合
- 特殊文字を含むクエリパラメータ
- フォームデータの送信
- URL内の認証トークン
共有可能なリンクを生成する場合
- ソーシャルメディアの共有リンク
- メールキャンペーンのURL
- 動的コンテンツを含むディープリンク
URLの破損を防ぐ場合
- &、=、?、# などの文字はURL内で特別な意味を持ちます
- エンコーディングにより、これらがURL構造として解釈されることを防ぎます

デコーディングを使用する場合：

クエリパラメータを読み取る場合

const params = new URLSearchParams(window.location.search);
const search = params.get('q'); // 自動的にデコードされる

APIリクエストをデバッグする場合
- 実際のパラメータ値を表示する
- 送信されているデータを理解する
- エンコーディングの問題をトラブルシューティングする
ユーザーにデータを表示する場合
- URLから読みやすいテキストを表示する
- デコードされたフォームデータを提示する
- 検索クエリを表示する
サーバーデータを処理する場合
- URLパラメータから実際の値を抽出する
- URL内のエンコードされたJSONを解析する
- 多言語コンテンツを処理する

主要な違い

側面	エンコーディング	デコーディング
目的	データをURLセーフにする	元のデータを取得する
方向	テキスト → パーセントエンコード	パーセントエンコード → テキスト
いつ	データを送信する前	データを受信した後
文字	特殊文字を `%XX` に変換	`%XX` を文字に戻す
使用例	URLを構築する	URLを読み取る

多層エンコーディング：よくある問題

URLが複数回エンコードされ、混乱を招くことがあります。これは以下の場合に発生します：

すでにエンコードされたURLが再度エンコードされる
データが複数のシステムやプロキシを経由する
異なるアプリケーション間でコピー＆ペーストする
自動化ツールが繰り返しエンコーディングを適用する

二重エンコーディングの例

元の文字列:    Hello World
1回目:  Hello%20World
2回目:  Hello%2520World    ← %25 = パーセント記号自体！
3回目:  Hello%252520World  ← さらに悪化...

問題点: スペースの代わりに、%2520 となり、これは %20 にデコードされ、スペースにはなりません！

解決策: 私たちのURLデコーダーは、自動的に複数の層を検出し、結果が安定するまでデコードするので、手動で複数回デコードする必要はありません。

避けるべきよくある間違い

1. 二重エンコーディング

間違ったアプローチ:

let text = "Hello World";
text = encodeURIComponent(text);  // "Hello%20World"
text = encodeURIComponent(text);  // "Hello%2520World" ❌

正しいアプローチ:

const text = "Hello World";
const encoded = encodeURIComponent(text);  // "Hello%20World" ✅

2. 必要な時にエンコードしない

間違い:

https://api.example.com/search?q=hello world&category=test

スペースがURL構造を破壊し、& が新しいパラメータを開始します。

正しい:

https://api.example.com/search?q=hello%20world&category=test

3. 間違った関数を使用する

JavaScriptは異なる目的のために異なるエンコーディング関数を提供しています：

URLパラメータ用（最も頻繁に使用）:

encodeURIComponent("hello world?")  // "hello%20world%3F" ✅
decodeURIComponent("hello%20world%3F")  // "hello world?" ✅

完全なURL用（控えめに使用）:

encodeURI("https://example.com/search?q=hello world")
// "https://example.com/search?q=hello%20world"
// :/?をエンコードしないことに注意 - これらはURL内で有効だから

主な違い: encodeURIComponent() はより多くの文字をエンコードし、パラメータ値に安全です。

実用的なコード例

JavaScript: 検索URLの構築

function buildSearchURL(query, filters) {
  const baseURL = 'https://api.example.com/search';
  const params = new URLSearchParams({
    q: query,                    // 自動的にエンコードされる
    category: filters.category,
    sort: filters.sort
  });
  
  return `${baseURL}?${params.toString()}`;
}

// 使用例
const url = buildSearchURL('hello world!', { 
  category: 'tech & science',
  sort: 'date'
});
// 結果: https://api.example.com/search?q=hello+world%21&category=tech+%26+science&sort=date

JavaScript: URLパラメータの読み取り

function getSearchParams() {
  const params = new URLSearchParams(window.location.search);
  
  return {
    query: params.get('q'),        // 自動的にデコードされる
    category: params.get('category'),
    page: parseInt(params.get('page')) || 1
  };
}

Python: エンコーディングとデコーディング

from urllib.parse import quote, unquote

# エンコーディング
text = "Hello World!"
encoded = quote(text)  # 'Hello%20World%21'

# デコーディング
encoded = "Hello%20World%21"
decoded = unquote(encoded)  # 'Hello World!'

URLをテストする

エンコーディングとデコーディングの動作を確認したいですか？これらのツールを試してください：

URLデコーダー - 多層サポートでパーセントエンコードされたURLをデコード
URLエンコーダー - URL内で使用するテキストを安全にエンコード
URLパーサー - URLコンポーネントとパラメータを視覚化

ベストプラクティスのまとめ

✅ すべきこと:

URLに追加する前にユーザー入力を常にエンコードする
クエリパラメータの値には encodeURIComponent() を使用する
サーバー側でパラメータを読み取る際はデコードする
特殊文字を使用してURLをテストする
組み込みのURLエンコーディング関数を使用する

❌ してはいけないこと:

文字列置換で手動でエンコードする
すでにエンコードされたデータを二重エンコードする
特殊文字のエンコードを忘れる
エンコーディング標準を混在させる
URL内に機密データを入れる（エンコードされていても）

まとめ

URLエンコーディングとデコーディングの違いを理解することは、Web開発の基本です。覚えておきましょう：

URLを送信または構築する際はエンコードする
URLデータを読み取るまたは表示する際はデコードする
使用する言語に適したエンコーディング関数を使用する
特殊文字や国際的なテキストでテストする
二重エンコーディングを避ける

これらの概念をマスターすれば、どんなWebプロジェクトでもURLを自信を持って処理できるようになります！

URLを素早くエンコードまたはデコードする必要がありますか？無料ツールを使用してください：URLデコーダー | URLエンコーダー | URLパーサー