みなさんこんにちは！Kotonoです。
今回はJavaScriptにおけるURLのエンコーディング・デコーディングについて解説したいと思います。
この記事では
- URLのエンコードとは
- URLとURIの違いについて
- URLエンコーディングの方法
- URLデコーディングの方法
といった基本的な内容から、より実践的な内容に関してもわかりやすく解説していきたいと思います。
URLのエンコードとは
みなさんはURLのエンコーディングを行ったことはありますか？
そもそも、「エンコード」とは何かわかりますか？
エンコードとは、データを他のフォーマット（形式）に変換することです。URLのエンコードとは、URLにおいて使用出来ない文字の変換を行うプロセスのことです。
例えば、URLには日本語は使用出来ないので変換を行わなければいけません。使用不可な文字は、使用できる文字の特殊な組み合わせとして表します。
基本的には、「%」の後ろに使用できない文字の文字コードを16進数で表したものを連結します。
URLとURI、URNの違いについて
URLとURIの違いとは何でしょうか。
URLはUniform Resource Locatorの略で、ホームページアドレスとも呼ばれます。
URLは主に、インターネット上にあるファイルの位置を表します。
URNはUniform Resource Nameの略で、インターネット上にあるファイルを特定するための識別番号ようなものです。
URNは一般的にはユーザーとはあまり関わりのないものです。
基本的には、URLはインターネット上の住所、URNはWeb側が認識している名前と理解しておくと十分です。
最後に、URIはUniform Resource Identifierの略で、URLとURNを含む総称のことです。
URLが住所、URNが名前だとすれば、URIは宛先というようなイメージです。
こうして、厳密にはURL、URI、URNはそれぞれ違いがありますが、Webの世界ではURLとURIは同一として認識されています。
URLエンコードの方法
では早速、JavaScriptにおける「URLエンコード」の方法をご紹介いたします。
URLエンコードに使える関数は主に三つあります。
encodeURI関数
はじめにご紹介したいのは、encodeURI関数です。
encodeURI関数の基本的な構文は以下の通りです。
encodeURI(変換したいURI)
引数には変換したいURIの文字列を指定し、戻り値として特定の文字が変換されたURI文字列が返ってきます。
では実際に使用してみましょう。
以下のコードをご覧ください。
var uri = "https://www.sejuku.net/あ"; var res1 = encodeURI(uri); console.log(res1)
実行結果は以下の通りです。
https://www.sejuku.net/%E3%81%82
上のコードでは、変数uriに文字列として https://www.sejuku.net/あ を格納し、それをencodeURI関数の引数として指定しました。
変数res1にencodeURI関数の戻り値を格納し、それをconsole.log関数で出力してみました。
するとご覧いただけるように、日本語文字である「あ」は「%E3%81%82」に変換されたURIが表示されました。
実際、「あ」はUTF-8の場合、文字コードを16進数で表したものが「E3 81 82」なので「%E3%81%82」に変換されました。
またencodeURIは、URI において特別な意味を持つ予約文字「/」「:」「&」「+」「=」などに関してはエンコードを行わないようになっています。
実際、「あ」以前のURIは変換されていません。
encodeURIComponent関数
encodeURIComponent関数は、encodeURIとは違い、URI において特別な意味を持つ予約文字「/」「:」「&」「+」「=」などもエンコードします。
以下のコードをご覧ください。
var uri = "https://www.sejuku.net/あ"; var res1 = encodeURIComponent(uri); console.log(res1)
実行結果は以下の通りです。
https%3A%2F%2Fwww.sejuku.net%2F%E3%81%82
ご覧いただけるように、「あ」文字の変換のみではなく、httpsの後のコロン記号やスラッシュなども変換されました。
encodeURIComponentは、URI全体ではなくURIを構成する部分パーツのエンコーディングに最適な関数です。
上のコードのように、URI全体をencodeURIComponentでエンコードしてしまうと、無効なURIが返されてしまうので注意してください。
escape関数
最後に、escape関数のご紹介です。
escape関数はencodeURI関数などが現れる前までは広く使用されていましたが、ブラウザやバージョンによって挙動が変わるため、現在は推奨されていません。
escape関数に関する詳しい説明は以下のリンクを参照してください。
URLデコードの方法
これまでは「エンコード」の方法をご紹介してきました。
そこで、今度はエンコードされたURIを元のURIに戻す「デコード」について解説していきます。URIをデコードするにはdecodeURIやdecodeURIComponentなどといった関数で行うことができます。
以下のコードをご覧ください。
var uri = "https://www.sejuku.net/あ"; var encode1 = encodeURI(uri); var decode1 = decodeURI(encode1) var encode2 = encodeURIComponent(uri); var decode2 = decodeURIComponent(encode2) console.log(decode1) console.log(decode2)
実行結果は以下の通りです。
https://www.sejuku.net/あ https://www.sejuku.net/あ
上のコードでは、変数uriに格納されたURIをencodeURI関数を使用して変換したものを変数encode1に、encodeURIComponentを使用したものを変数encode2に格納しました。
そしてencode1をdecodeURI関数の引数として指定、encode2をdecodeURIComponent関数の引数として指定し、それらの戻り値をconsole.log関数で表示させてみました。
ご覧いただけるように、両方とも元のURIは https://www.sejuku.net/あ なので、そのように表示されましたね。
まとめ
今回は、JavaScriptにおけるURLのエンコード・デコードについて解説しました。
URLを扱うことは多く、その際にエンコードやデコードの方法を知っていると便利です。
ただし、注意点として「encodeURI」「encodeURIComponent」は半角スペースを「%20」と変換するため、他言語とURIエンコード形式が異なる場合があるので覚えておきましょう(他言語だと「+」で変換するものがある→デコード時に別途変換が必要)
みなさんもこの記事を通して、URLエンコードに関する知識をどんどん深めていってくださいね。
