URLエンコード・デコード(パーセントエンコーディング)
URLに使えない文字(日本語や記号)を%XX形式に変換したり、元に戻したりします。
URLエンコード・デコードについて
URLには、使える文字が決まっており、日本語や一部の記号は、「%E6%A4%9C…」のようなパーセントエンコーディングに変換する必要があります。検索キーワードをURLに含めるときや、パラメーターの値に記号を含めるときに使います。
パラメーターの値として使う場合(encodeURIComponent)と、URL全体として使う場合(encodeURI)で、変換する文字の範囲が違います。デコードで、エンコードされたURLを、元の読みやすい文字列に戻すこともできます。
こんなときに使えます
- 日本語の検索キーワードを含むURLを作る
- エンコードされたURLの、中身を読めるようにする
- APIのリクエストパラメーターの確認
使うときのポイント
- クエリの値は、encodeURIComponentの形式で変換するのが基本
- スペースは、%20または+で表される
計算例
入力欄の初期値のまま計算すると、次の結果になります。条件は、処理がエンコード、対象がパラメーターの値(encodeURIComponent)、入力が検索 キーワード&test=1です。数値を変えると、この結果もそれに合わせて変わります。
結果: %E6%A4%9C%E7%B4%A2%20%E3%82%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89%26test%3D1
使い方
- 処理(エンコードかデコード)と対象を選びます。
- 文字列を入力すると、結果が表示されます。
計算方法・仕組み
encodeURIComponentは、?・&・=・/なども含めてほぼすべての記号を変換します(パラメーターの値向け)。encodeURIは、URLの区切りに使う記号を残して変換します(URL全体向け)。
知っておきたい基礎知識
URLに使える文字は、英数字と一部の記号に限られており、日本語や、スペース、一部の記号は、そのままでは使えません。パーセントエンコーディングは、そうした文字を「%E3%81%82」のように、%と16進数で表す方式です。検索キーワードをURLに含めるときなどに、自動で使われています。
エンコードの対象が違う、2つの関数があります。encodeURIComponentは、?・&・=・/などの記号も含めて、ほとんどの記号を変換し、パラメーターの値に向いています。encodeURIは、URLの区切りに使う記号をそのまま残して変換し、URL全体に向いています。使い分けを間違えると、リンクが正しく動かなくなります。
間違えやすいポイント
- URL全体に、パラメーター用のエンコードをかけると、「://」まで変換され、壊れてしまう
- 二重にエンコードすると、「%」自体が、さらに変換されてしまう
- スペースは、「%20」または「+」で表され、場面によって使い分けが必要
よくある質問
- 日本語のURLは、そのまま使えませんか?
- ブラウザは、日本語のURLを見た目は日本語のまま表示しますが、実際の通信では、エンコードされた形が使われます。
- デコードは、どんなときに使いますか?
- ブラウザのアドレスバーや、ログに現れる「%E3…」のような文字列を元の文字に戻して、内容を確認したいときに使います。