URLエンコーダー＆デコーダー — URL構造パーサー内蔵

URLエンコード（パーセントエンコード）とは？

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

主な機能

使用例

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

使い方

1. 1

   URLまたはエンコード文字列を入力

   デコードエリアにURLを貼り付けてエンコードするか、エンコードエリアにパーセントエンコードされた文字列を貼り付けてデコードします。用途に応じてencodeURIまたはencodeURIComponentモードを選択してください。

2. 2

   結果と解析構造を確認

   入力に合わせてもう一方のエリアが即座に更新されます。URL解析器がURLをプロトコル、ホスト、ポート、パス、クエリパラメータ、フラグメントに分解します——すべて編集可能です。

3. 3

   コピーまたは再構築

   コピーをクリックしてエンコードまたはデコード結果をコピーします。個々のURLコンポーネントを編集し、再構築をクリックして変更した部分から新しいURLを構築できます。

よくあるエラー

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

一般的なユースケース

文字化けURLのデバッグ

サーバーログ、エラーメッセージ、ブラウザ開発者ツールからのパーセントエンコードされたURLをデコードし、元の人間が読めるテキストを確認します。

API開発

REST APIコールのクエリパラメータ値をエンコードし、&、=、スペースなどの特殊文字がリクエストURLを壊さないようにします。

OAuthフロー設定

OAuth認可URLでredirect_uriやその他のURLパラメータを正しくエンコードし、認証失敗を防止します。

国際化URL

中国語、日本語、韓国語、アラビア語などの非ASCII文字を含むURLをエンコード・デコードし、国際化Webアプリケーションに対応します。

マーケティングリンク分析

メールキャンペーンや広告プラットフォームからのトラッキングURLをデコードし、埋め込まれたUTMパラメータやリダイレクトチェーンを理解します。

URL構造の検査

複雑なURLをコンポーネント部分——プロトコル、ホスト、ポート、パス、クエリパラメータ、フラグメント——に解析し、分析と変更を行います。

技術的な詳細

RFC 3986 予約文字と非予約文字

RFC 3986は、エンコード不要な非予約文字（A-Z、a-z、0-9、-、.、_、~）と、URI区切り文字として機能し、データとして使用する場合はパーセントエンコードが必要な予約文字（:、/、?、#、[、]、@、!、$、&、'、(、)、*、+、,、;、=）を定義しています。

UTF-8バイトエンコードフロー

非ASCII文字はまずUnicodeコードポイントに変換され、次にUTF-8バイト（コードポイント範囲に応じて1-4バイト）にエンコードされ、最後に各バイトが%XXとしてパーセントエンコードされます。例：é（U+00E9）→ UTF-8バイト C3 A9 → %C3%A9。絵文字🎉（U+1F389）→ UTF-8バイト F0 9F 8E 89 → %F0%9F%8E%89。

URLとURIの用語

URI（Uniform Resource Identifier）は任意の識別子文字列の一般的な用語です。URL（Uniform Resource Locator）はアクセスメカニズム（https://など）も指定するURIです。RFC 3986のエンコードルールはすべてのURIに適用されます。JavaScriptのAPIはURI用語（encodeURI、decodeURI）を使用し、日常的にはURLが好まれます。

ベストプラクティス

用途に応じて正しいモードを選択

個々のクエリパラメータのキーと値にはencodeURIComponent()を使用してください。完全なURLがあり、構造を壊さずに安全でない文字をエンコードしたい場合にのみencodeURI()を使用してください。&、=やその他の予約文字を含む可能性のあるパラメータ値にencodeURI()を使用しないでください。

二重エンコードを避ける

文字列をエンコードする前に、既にエンコードされているか確認してください。既存の%シーケンスを探します。既にエンコードされた文字列をエンコードすると、%20が%2520に、%3Dが%253Dになります。不明な場合は、まずデコードしてから一度エンコードしてください。

サーバーサイドでデコード

ほとんどのWebフレームワークは、アプリケーションコードが参照する前にURLパラメータを自動的にデコードします。フレームワークが既にデコードしたパラメータを手動でデコードすることは避けてください——元の値にリテラルのパーセントシーケンスが含まれていた場合、問題が発生する可能性があります。

OAuthとAPI署名のための値のエンコード

OAuth 1.0署名ベース文字列と多くのAPI署名アルゴリズムは、厳密なRFC 3986パーセントエンコードを必要とします。encodeURIComponent()を使用し、仕様が要求する場合はエンコードされない残りの文字（!、'、(、)、*など）をパーセントエンコードの等価物に置き換えてください。

よくある質問