URLとURI
本記事では、JavaScriptを使ってURLの文字列のエンコード／デコードについて解説していきます。
記事内でURLとは別に、URIという単語が出現するため、URLとURIの違いについて知っておいた方が良いでしょう。
そのため、まずはURLとURIについて簡単に解説します。
URLとは
URL（Uniform Resource Locator）とは、ファイルがWEB上のどこにあるかの場所を表すものになります。
「https://」または「http://」から始まるのがURLであり、URLという名前も一般的であるため、こちらは問題ないでしょう。
URIとは
URLの他にURN（Uniform Resource Name）というものがあり、URLがWEB上の場所を表すとすると、URNはWEB上の名前を表すものになります。
URNは普段目にする機会がないため、詳しく知らないという人も多いのではないでしょうか。
そのURNと、URLを合わせた総称がURI（Uniform Resource Identifier）です。
URLはURIを構成する要素であるため、本記事内では「URI＝URL」であると認識しておいても問題ありません。
JavaScriptでURLの文字列をエンコードする
JavaScriptでURLの文字列をエンコードするためには、以下二つの方法があります。
- encodeURIComponent()
- encodeURI()
「Component」という単語がつくかどうかの違いは、「?」「&」などのURLで特定の意味を持つ記号をエンコードするかの違いになります。
| Component | 「?」「&」など記号 |
| あり | エンコードする |
| なし | エンコードしない |
encodeURIComponent()
const url = 'example.com/index.html?test=テスト&sample=サンプル#anchor';
const result = encodeURIComponent(url);
console.log(result);
//example.com%2Findex.html%3Ftest%3D%E3%83%86%E3%82%B9%E3%83%88%26sample%3D%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%23anchorencodeURI()
const url = 'example.com/index.html?test=テスト&sample=サンプル#anchor';
const result = encodeURI(url);
console.log(result);
// example.com/index.html?test=%E3%83%86%E3%82%B9%E3%83%88&sample=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB#anchor
JavaScriptでURLの文字列をデコードする
JavaScriptでURLの文字列をデコードするためには、以下二つの方法があります。
- decodeURIComponent()
- decodeURI()
「Component」という単語がつくかどうかの違いは、エンコードの時と同様に「?」「&」などのURLで特定の意味を持つ記号をデコードするかの違いになります。
| Component | 「?」「&」など記号 |
| あり | デコードする |
| なし | デコードしない |
decodeURIComponent()
const string = 'example.com%2Findex.html%3Ftest%3D%E3%83%86%E3%82%B9%E3%83%88%26sample%3D%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%23anchor';
const result = decodeURIComponent(string);
console.log(result);
// 'example.com/index.html?test=テスト&sample=サンプル#anchor'decodeURI()
const string = 'example.com/index.html?test=%E3%83%86%E3%82%B9%E3%83%88&sample=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB#anchor';
const result = decodeURI(string);
console.log(result);
// 'example.com/index.html?test=テスト&sample=サンプル#anchor'componentがつくかは、「?」「&」などの記号をエンコードするかの違い
まとめ
JavaScriptでの、URLのの文字列のエンコード／デコードについてまとめると以下になります。
| エンコード or デコード | 「?」「&」など記号 | |
| encodeURIComponent() | エンコード | エンコードする |
| encodeURI() | エンコード | エンコードしない |
| decodeURIComponent() | デコード | デコードする |
| decodeURI() | デコード | デコードしない |
コメント