URLエンコード・デコード

URLエンコード・デコードとは

URLエンコード・デコードツールは、テキストや日本語・特殊文字を含む文字列を**URLで安全に使えるパーセントエンコード形式（%XX）に変換（エンコード）したり、パーセントエンコードされた文字列を元のテキストに復元（デコード）**したりできる無料オンラインツールです。入力と同時にリアルタイムで結果が表示されるため、ボタンを押す手間なく変換結果を確認できます。

URLエンコードは「パーセントエンコーディング」とも呼ばれ、URLの中で使えない文字（日本語・スペース・#・&・=など）を %E3%81%82 のような形式に置き換える仕組みです。Webフォームのクエリパラメータ、APIのリクエストURL、HTTPヘッダーの値など、Web開発のあらゆる場面で登場します。

ブラウザが自動変換してくれる場面もありますが、プログラム内でURLを組み立てる際は自分で正しくエンコードする必要があります。本ツールは encodeURIComponent（URLのパラメータ値用）と encodeURI（URL全体用）の2つのエンコード方式を切り替えて使えるのが特徴で、用途に応じた正確なエンコードが可能です。入力したデータはすべてブラウザ内で処理されるため、機密クエリパラメータやAPIキーを含むURLを貼り付けてもプライバシーの心配がありません。

使い方

1. 「エンコード」タブを選び、テキストエリアに変換したいテキストを入力します。
2. 入力と同時にパーセントエンコードされた結果がリアルタイムで表示されます。
3. デコードしたいときは「デコード」タブを選択し、エンコード済みの文字列を貼り付けます。
4. エンコード方式を変えたい場合は「詳細設定」を開き「コンポーネント用（encodeURIComponent）」か「URL全体用（encodeURI）」を選択します。
5. フォームデータのクエリパラメータを扱う場合は「詳細設定」の「スペースの変換」を + に変更します。
6. 「コピー」ボタンで結果をクリップボードにコピーして利用します。

活用シーン

• APIリクエストURLの組み立て: REST APIのクエリパラメータに日本語やスペースを含む値を渡すとき、encodeURIComponent でエンコードして正しいURLを作成できます。
• デバッグ・ログ解析: サーバーログやブラウザのネットワークタブに表示されたエンコード済みURLを貼り付けてデコードし、元の値を素早く確認できます。
• フォームデータの確認: HTMLフォームの application/x-www-form-urlencoded 形式（スペースが + に変換される）のポストデータをデコードして、送信内容を検証できます。
• メールのリンク生成: メール本文にURLを埋め込む際、日本語を含む部分をエンコードしてリンク切れを防ぎます。
• encodeURIとencodeURIComponentの違い確認: https://example.com/?q=日本語 を2つのモードでエンコードして、:/?= が保持されるか否かの違いを目で確認できます。

技術的な解説

本ツールは純粋なJavaScript（TypeScript）で実装されています。主な技術ポイントは以下の通りです。

• エンコード処理: encodeURIComponent() をデフォルトで使用します。アルファベット・数字・-_.!~*'() 以外のすべての文字をUTF-8バイト列のパーセント表記に変換します。URLのパラメータ値を安全にエンコードするのに適した方式です。
• encodeURIモード: 「URL全体用」を選択すると encodeURI() に切り替わり、:/?#[]@!$&'()*+,;=-._~ はそのまま保持されます。URLの構造を壊さずに日本語部分だけエンコードしたいときに適しています。
• スペースの変換: デフォルトはRFC 3986準拠の %20。詳細設定で + に切り替えると application/x-www-form-urlencoded 形式（HTMLフォームのPOST等）に対応できます。
• デコード処理: decodeURIComponent() でパーセントシーケンスを元のUTF-8文字列に戻します。%GG のような不正なシーケンスが含まれる場合は、英語のみのブラウザエラーではなく日本語でエラー内容を表示します。
• サーバー送信ゼロ: すべての処理はブラウザのJavaScriptランタイム内で完結します。ネットワーク通信は一切発生しません。

関連ツール

• Base64エンコード・デコード — URLエンコードと並んでWeb開発でよく使われるエンコード方式。JWTやAPIトークンの確認に。
• テキスト置換ツール — デコードしたテキストの特定の文字列を一括置換する際に便利です。
• JSON整形ツール — URLのクエリパラメータにJSON文字列を埋め込む前後の整形・確認に使えます。