URLエンコード・デコード
URL文字列を即座にエンコードおよびデコード。
テキストはURLエンコード(パーセントエンコーディング)されます
URLエンコーディングとは?
URLエンコーディングは、パーセントエンコーディングとも呼ばれ、URI(Uniform Resource Identifiers)内の情報をエンコードするためのメカニズムです。これにより、URL構造を壊したり解析エラーを引き起こしたりすることなく、特殊文字や非ASCII文字をURLで安全に送信できます。
エンコーディングでは、パーセント記号(%)に続いて2桁の16進数値を使用します。たとえば、空白文字は%20になり、@記号は%40になります。この形式は、URI構文の標準であるRFC 3986で定義されています。
RFC 3986は、どの文字が「予約済み」(URL内で特別な意味を持つ)で、どの文字が「非予約済み」(エンコードなしで使用して安全)であるかを指定します。予約文字は、特別な意味を持つURLの部分で使用する場合、エンコードする必要があります。
URLエンコーディングを使用するタイミング
URLエンコーディングは、いくつかのシナリオで不可欠です:
- クエリパラメータ:URLクエリ文字列(?の後)の値は、空白、特殊文字、非ASCIIテキストを処理するためにエンコードする必要があります
- パスセグメント:URLにユーザー生成コンテンツや特殊文字を含むファイル名が含まれる場合
- 特殊文字:&、=、?、#、空白などの文字は、URL内で特別な意味を持つため、エンコードする必要があります
- 国際文字:é、ñ、漢字などの非ASCII文字は、UTF-8パーセントエンコーディングを使用してエンコードする必要があります
- HTMLフォーム:GETメソッドで送信されたフォームデータは、クエリ文字列で自動的にURLエンコードされます
URLエンコーディングのルール
エンコードが必要な文字を理解することで、有効なURLを作成できます:
一般的なエンコード例
URLエンコーディングの実例をいくつか示します:
よくあるURLエンコーディングの間違い
URLエンコーディングを使用する際は、次のよくあるエラーを避けてください:
- 二重エンコード:すでにエンコードされた文字列をエンコードすると、%20の代わりに%2520になります。再度エンコードする前に、文字列がすでにエンコードされているかどうかを常に確認してください。
- URL全体のエンコード:プロトコルやドメインを含むURL全体ではなく、エンコードが必要な部分(クエリ値、パスセグメント)のみをエンコードしてください。
- スラッシュのエンコード:パス内のスラッシュ(/)はエンコードしないでください。クエリパラメータ値内でのみエンコードしてください。
- クエリパラメータのみのエンコード:クエリ文字列だけでなく、特殊文字を含むパスセグメントもエンコードする必要があることを忘れないでください。
- 大文字と小文字の区別:パーセントエンコーディングでは大文字の16進数(A-F)が使用されますが、小文字(a-f)も有効です。エンコーディングには一貫性を持たせてください。
encodeURIComponent 対 encodeURI
JavaScriptは、異なる目的を持つ2つのエンコード関数を提供します:
予約文字を含むほぼすべてをエンコードします。クエリパラメータ値、フォームデータ、またはURLコンポーネントの一部となる文字列をエンコードする場合に使用します。
URIをエンコードしますが、URI内で意味を持つ文字(:、/、?、#など)は保持します。機能的な状態を維持したいURI全体をエンコードする場合に使用します。
開発者向けURLエンコーディングガイド
Web開発のベストプラクティス:
- urlEncoder.content.developerGuide.javascript
- urlEncoder.content.developerGuide.python
- urlEncoder.content.developerGuide.php
- urlEncoder.content.developerGuide.java
- urlEncoder.content.developerGuide.csharp
URLエンコーディングとSEO
検索ランキングへの影響:
- urlEncoder.content.seoGuide.readableUrls
- urlEncoder.content.seoGuide.slugs
- urlEncoder.content.seoGuide.parameters
- urlEncoder.content.seoGuide.canonical
urlEncoder.faq.title
urlEncoder.faq.q1.question
urlEncoder.faq.q1.answer
urlEncoder.faq.q2.question
urlEncoder.faq.q2.answer
urlEncoder.faq.q3.question
urlEncoder.faq.q3.answer
urlEncoder.faq.q4.question
urlEncoder.faq.q4.answer
urlEncoder.faq.q5.question
urlEncoder.faq.q5.answer