🌐 JA

🔗 URLエンコーダー/デコーダー

URLを安全にエンコードまたはデコードします。クエリパラメータの特殊文字、日本語、スペースなどを処理して、正しいURLを生成します。

ガイド

詳しく見る

01

1. URLエンコーディングとは?

URLエンコーディング(パーセントエンコーディング)は、URL内で安全でない文字を%と16進数コードに変換する処理です。URLはASCII文字のみを許可するため、日本語、特殊文字、スペースなどはエンコーディングが必要です。例えば、スペースは%20、@は%40、日本語「こんにちは」は%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AFに変換されます。RFC 3986標準で定義されており、A-Z、a-z、0-9、-、_、.、~以外の文字はエンコードする必要があります。クエリパラメータ、パス、ハッシュなど、URLの各部分ごとにエンコーディングのルールが異なります。

02

2. 特殊文字エンコーディングの必要性

URLでは特殊文字が特別な意味を持つため、値として使用するにはエンコーディングが必須です。例えば、&はパラメータの区切り文字なので、値に&を含めるには%26にエンコードする必要があります。=はキーと値の区切り文字、?はクエリの開始、#はフラグメントの開始を意味します。スペースも+または%20にエンコードします。日本語や特殊文字をエンコードしないと、サーバーが正しくパースできなかったり、404エラーが発生したりします。特に検索語やユーザー入力値をURLに含める場合は、必ずエンコードしてください。

03

3. クエリパラメータのエンコーディング

クエリパラメータは、URLで最も頻繁にエンコーディングが必要になる部分です。例:https://example.com/search?q=検索語&category=IT。ここで「検索語」と「IT」はどちらもエンコードする必要があります。JavaScriptのencodeURIComponent()を使用すると、=、&、?などもエンコードされ、クエリパラメータの値として安全に渡せます。encodeURI()はURL全体をエンコードするときに使いますが、=、&、?はエンコードしないため、クエリの値には適していません。常にキーと値を個別にencodeURIComponent()でエンコードしてください。

04

4. encodeURI vs encodeURIComponent

JavaScriptには2種類のURLエンコーディング関数があります。encodeURI()はURL全体をエンコードし、:、/、?、&、=のようなURL構造文字はエンコードしません。完全なURLをエンコードするときに使用します。encodeURIComponent()はURLの部分(パラメータ値など)をエンコードし、構造文字もすべてエンコードします。クエリパラメータやパスセグメントのような個別のコンポーネントに使用します。ほとんどの場合、encodeURIComponent()を使うほうが安全です。それぞれdecodeURI()とdecodeURIComponent()でデコードできます。

05

5. 国際化ドメイン名(IDN)

日本語や他の言語のドメイン名(例:日本.com)はPunycodeに変換されます。PunycodeはUnicodeドメインをASCIIで表現する方法で、xn--という接頭辞を使用します。例:「日本.com」は「xn--wgv71a.com」に変換されます。ブラウザは自動的にこの変換を行いますが、コードで直接処理する場合はPunycodeライブラリが必要です。URLのパスやクエリは通常のパーセントエンコーディングを使用しますが、ドメインはPunycodeを使用する点に注意してください。

06

6. URLエンコーディングのベストプラクティス

URLエンコーディングの際の注意点があります。XSS攻撃を防ぐため、ユーザー入力は常にエンコードしてください。すでにエンコードされたURLを重複してエンコードしないよう注意してください(二重エンコーディングの問題)。URLを構成するときは、各部分を個別にエンコードしてから結合してください。fetch()やaxiosのようなHTTPクライアントは自動的にエンコードすることが多いので、重複を避けてください。サーバー側は自動デコードをサポートしているため、多くの場合明示的なデコードは不要です。URLをログに記録したりデバッグしたりするときは、デコードされた形式を確認するほうが読みやすいです。