スライドショースライドショー

【JavaScript入門】すぐわかる!URLエンコードの方法まとめ

みなさんこんにちは!Kotonoです。

今回はJavaScriptにおけるURLのエンコーディング・デコーディングについて解説したいと思います。

この記事では

  • URLのエンコードとは
  • URLとURIの違いについて
  • URLエンコーディングの方法
  • URLデコーディングの方法

といった基本的な内容から、より実践的な内容に関してもわかりやすく解説していきたいと思います。

URLのエンコードとは

みなさんはURLのエンコーディングを行ったことはありますか?

そもそも、「エンコード」とは何かわかりますか?

エンコードとは、データを他のフォーマット(形式)に変換することです。URLのエンコードとは、URLにおいて使用出来ない文字の変換を行うプロセスのことです。

例えば、URLには日本語は使用出来ないので変換を行わなければいけません。使用不可な文字は、使用できる文字の特殊な組み合わせとして表します。

基本的には、「%」の後ろに使用できない文字の文字コードを16進数で表したものを連結します。

URLとURI、URNの違いについて

URLURIの違いとは何でしょうか。

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関数に関する詳しい説明は以下のリンクを参照してください。

【JavaScript入門】エスケープ処理とescape関数の使い方まとめ
更新日 : 2019年4月24日

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エンコードに関する知識をどんどん深めていってくださいね。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説