Web アドレスのすべての文字は、ブラウザ、サーバー、プロキシ、ログのすべてが同意する、小さくて安全なセットに由来する必要があります。設定外のもの (スペース、アンパサンド、アクセント付き文字、絵文字) をリンクに入れる必要がある場合は、最初に URL エンコードする必要があります。 URL エンコーディング (パーセント エンコーディングとも呼ばれる) は、これらの文字をパーセント記号とその後に続く 16 進数のバイト値で置き換える標準であり、スペースは %20 になり、& は %26 になります。このガイドでは、URL エンコードとは何か、それが必要な文字、%XX 形式の仕組み、およびほとんどの開発者をつまずかせる encodeURIComponent と encodeURI の選択について、コピーできる実際の例とともに説明します。
クイック回答
URL エンコード (パーセント エンコード) は、URL 内の安全でない文字または予約されている文字を、% の後に UTF-8 の文字のバイトを表す 2 つの 16 進数で置き換えます。スペースは %20、アンパサンドは %26、アクセント付きの e (é) は %C3%A9 になります。 URL にドロップする個々の値には encodeURIComponent を使用し、分割したくない完全な URL には encodeURI を使用します。
URLエンコードとは何ですか?
URL エンコードは、限られた普遍的に安全な文字セットのみを使用して、Uniform Resource Locator (URL) 内の文字を表現する方法です。 URL 標準 (RFC 3986) では、ASCII 文字 A ~ Z および a ~ z、数字 0 ~ 9、およびいくつかの記号など、少数の文字のみを文字通りに表示できます。その他のすべて (スペース、ほとんどの句読点、およびすべての非英語文字) は、リンク内を安全に移動できるようにする前に、パーセント エンコードされたシーケンスに変換する必要があります。
その理由は、URL が多くのシステムを通過し、一部の文字がそれらのシステムにとって特別な意味を持つためです。スペースは黙ってドロップするか + に変えることができ、# はフラグメントを開始し、? はフラグメントを開始します。クエリ文字列を開始します。パーセントエンコーディングは、問題のある文字を「これはデータであり、区切り文字ではない」ことを意味するコードに変換することで曖昧さを取り除きます。
予約文字と予約されていない文字
URL の指定により、文字がグループに分割されます。どれがどれであるかを知ることで、何がエンコードが必要で、何をそのままにしておくべきかが正確にわかります。
予約されていない文字 (決してエンコードされない)
これらの文字は、URL 内のどこにでもそのまま使用しても常に安全であり、エンコードしないでください。
- 大文字: A ~ Z
- 小文字: a ~ z
- 数字: 0 ~ 9
- 4 つの記号: ハイフン (-)、アンダースコア (_)、ピリオド (.)、チルダ (~)
予約文字(データとして使用する場合はエンコード)
予約文字は URL 内で特別な役割を果たします。予約文字は、ある部分を別の部分から区切る区切り文字として機能します。彼らはその仕事をしているときだけ安全です。予約文字が区切り文字としてではなく値の中に現れる場合は、区切り文字と間違われないようにエンコードする必要があります。
- パスと権限の区切り文字: / : @
- クエリとフラグメントの区切り文字: ? # & =
- サブデリミタ: ! $ & ' ( ) * + , ; =
たとえば、https://example.com/search?q=cats&sort=new の & は 2 つのクエリ パラメーターを区切るため、リテラルのままになります。ただし、「cats & Dogs」という語句を検索する場合、その値内の & は %26 になる必要があります。そうでない場合、サーバーは &dogs を 2 番目のパラメーターとして読み取ります。
%XX 形式の説明
パーセント エンコーディングは、パーセント記号 (%) の後に 2 つの 16 進数が続くという 1 つの単純なルールに従います。これら 2 桁は、base-16 (00 ~ FF、つまり 10 進数で 0 ~ 255) で書かれた 1 バイトの値です。文字をエンコードするには、そのバイト値を検索し、% の後に書き込みます。
- スペースは 10 進数では 32、16 進数では 20 なので、スペースは %20 になります。
- アンパサンド & は 10 進数 38 = 16 進数 26 なので、& は %26 になります。
- 等号 = は 10 進数の 61 = 16 進数の 3D - したがって、 = は %3D になります。
- 疑問符 ? 10 進数の 63 = 16 進数の 3F です - それで? %3Fになります。
ASCII 範囲 (0 ~ 127) の文字は単一バイトであるため、常に 1 つの %XX シーケンスにエンコードされます。 ASCII 以外の文字は、最初に UTF-8 バイト (2、3、または 4 バイト) に変換され、各バイトは独自の %XX になります。そのため、アクセント付き文字 é (U+00E9) は %C3%A9 にエンコードされます。その UTF-8 形式は 2 バイトの C3 と A9 です。
encodeURIComponent と encodeURI - それぞれをいつ使用するか
JavaScript にはパーセント エンコーディング用の 2 つの組み込み関数が用意されており、間違った関数を選択することが URL エンコーディングで最も一般的な間違いです。違いは、どの予約文字がそのまま残されるかです。
encodeURIComponent - 単一の値の場合
encodeURIComponent は、予約された区切り文字 / ? を含む、予約されていない文字以外のほとんどすべてをエンコードします。 : @ & = + $ #。これは、URL に挿入する単一のデータ (1 つのクエリ パラメーター値、1 つのパス セグメント、またはフォーム フィールド) に使用します。 & と = をエスケープするため、それらを含む値によって周囲のクエリ文字列が分割されることはありません。
encodeURI - URL全体の場合
encodeURI は、すでに組み立てられた完全な URL をエンコードするように設計されています。予約された区切り文字はそのまま残ります (:、/、?、#、&、および = は変更されずにパススルーされます)。そのため、URL の構造は維持されます。スペースなど、決して有効ではない文字のみをエンコードします。不正な文字が含まれる可能性のある完全な URL があり、その部分を変更したくない場合に使用します。
経験則
全体ではなく部分をエンコードします。最初に個々の値に対して encodeURIComponent を実行して URL を構築し、次にそれらを &、=、/、および ? で結合します。自分で区切ります。 encodeURI に到達するのは、クリーンアップする完全な URL 文字列が渡された場合のみです。
2 つの実用的な注意事項: encodeURIComponent は文字をエスケープしません。 ' ( ) * であるため、厳密なパーサーではこれらを手動で置き換える必要がある場合があります。また、既にエンコードされている文字列を決してエンコードしないでください。エンコードすると、すべての % が %25 に変換されるため、%20 が %2520 になります。これは、リンク切れを引き起こす古典的な二重エンコーディングのバグです。
作業例
一般的な文字がエンコード前後でどのように見えるかを次に示します。各行は文字 (つまり、エンコードされた形式) として読み取られます。
- スペース - 単語区切り文字 - %20 (+ はクエリ文字列内のスペースにも使用されます。以下を参照)
- & - アンパサンド - %26
- = - 等号 - %3D
- ? - 疑問符 - %3F
- / - スラッシュ - %2F
- # - ハッシュ/フラグメントの開始 - %23
- + - プラス記号 - %2B
- é - アキュートアクセント付きの e (非 ASCII、2 UTF-8 バイト) - %C3%A9
- 😀 - 絵文字 (4 UTF-8 バイト) - %F0%9F%98%80
スペースと記号を使用した値のエンコード
「猫と犬 = 楽しい」という検索フレーズを単一のクエリ値として渡したいとします。 encodeURIComponent を実行すると、cats%20%26%20dogs%20%3D%20fun が生成されます。すべてのスペース、&、= はエスケープされるため、全体が 3 つの個別のパラメーターではなく 1 つの値として扱われます。
完全なクエリ文字列の例
これをまとめると、クエリとカテゴリを受け取る検索ページを想像してください。各値を個別にエンコードしてから、URL を組み立てます。
- 生のクエリ値: 猫と犬
- 生のカテゴリ値: ペット/動物
- エンコードされたクエリ: cat%20%26%20dogs
- エンコードされたカテゴリ: ペット%2Fanimals
- 最終 URL: https://example.com/search?q=cats%20%26%20dogs&category=pets%2Fanimals
q=... と category=... の間の & と = は区切り文字として機能するためリテラルのままですが、クエリ値内の & とカテゴリ値内の / はデータであるためエンコードされていることに注意してください。これはまさに、encodeURIComponent を使用して各値をエンコードし、各部分を自分で結合することによって得られるものです。
スペース: %20 または +?
URL のパスでは、スペースは常に %20 になります。クエリ文字列では、古いフォーム エンコーディング (application/x-www-form-urlencoded) ではスペースの代わりに + が使用されます。どちらもデコードしてスペースに戻しますが、どこでも互換性があるわけではありません。デコードするときは、元のテキストが正しく復元されるように、ソースで %20 または + が使用されているかどうかを確認してください。
よくある質問
URLエンコードとは簡単に言うと何ですか?
URL エンコードは、特殊文字を % と 2 桁のコードに置き換えることにより、Web アドレスに安全に含める方法です。 URL には限られた文字セットしか含めることができないため、スペース、アンパサンド、アクセント付き文字などのその他の文字は、パーセントでエンコードされた同等の文字に変換され (スペースは %20 になります)、リンクが有効なままになります。
URL に %20 が含まれるのはなぜですか?
%20 は、スペースをパーセントでエンコードした形式です。 URL ではスペースは許可されないため、リンクにスペースが含まれる場合 (多くの場合、ファイル名または検索語から)、%20 に置き換えられます。ページが読み込まれると、サーバーまたはブラウザは %20 をスペースにデコードし直します。
encodeURI と encodeURIComponent の違いは何ですか?
encodeURIComponent は単一の値をエンコードし、予約された区切り文字 (& = ? / #) をエスケープして、1 つのクエリ パラメーターまたはパス セグメントに適した値にします。 encodeURI は URL 全体をエンコードし、それらの区切り文字をそのまま残すので、アドレスの構造が維持されます。部分には encodeURIComponent を使用し、完全な URL には encodeURI を使用します。
URL エンコードが必要な文字はどれですか?
予約されていない文字 (A ~ Z、a ~ z、0 ~ 9、および _ ) のみ。 ~ - 常に安全です。スペース、ほとんどの句読点、予約された区切り文字 (/ ? : @ & = + $ , ; # ! ' ( ) *)、およびアクセント付き文字や絵文字などのすべての非 ASCII 文字など、値内に表示されるその他の文字はすべてエンコードする必要があります。
URL エンコードは暗号化または Base64 と同じですか?
いいえ。URL エンコードは暗号化ではなく、セキュリティは提供されません。URL 内での文字の移動を安全にするだけの完全に元に戻せるテキスト変換であり、誰でも瞬時にデコードできます。また、別の目的でバイナリ データを 64 文字のアルファベットに再エンコードする Base64 とも異なります。
URL エンコードされた文字列をデコードするにはどうすればよいですか?
プロセスを逆にします。すべての %XX シーケンスは、それが表すバイトに変換されて戻され、連続するバイトが UTF-8 として読み取られて、é や絵文字などの文字が復元されます。 JavaScript では、decodeURIComponent がこれを行います。 URL デコーダ ツールはブラウザで同じことを行い、入力に単一の % などの不正な形式のシーケンスが含まれている場合は明らかなエラーを表示します。
URLを即座にエンコードまたはデコードします
無料の URL エンコーダ / デコーダ を使用して、テキストをパーセント エンコードしたり、エンコードされた URL をデコードしたりできます。ワンクリックで encodeURIComponent と encodeURI を切り替えると、すべてがブラウザで実行されます。