JavaScriptでURLをエンコードする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでURLをエンコードする方法について解説しています。最初にエンコード、デコードとはどういうものかについて説明します。次にencodeURI関数を使ってURLをエンコードする方法、encodeURIComponent関数を使ってURLをエンコードする方法を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでURLをエンコードする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでししょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

URLをエンコードする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

エンコード、デコードとは

エンコードは変換、デコードは変換したものを戻すことを指します。

変換が必要な理由は、webサイトなどのアドレスのURLなどは使える文字や規格が決まっているため、使えない文字の変換が必要になるためです。

また、変換したURLを受け取った側はそのURLを戻して使うという形になります。

 

encodeURI関数を使ってURLをエンコードする方法

JavaScriptには標準でURLをエンコードする関数「encodeURI」が用意されています。

今回は例としてGoogleでテックアカデミーを検索するURLをエンコードしてみましょう。

const url = 'https://www.google.com/search?q=テックアカデミー';
const encodeUrl = encodeURI(url);
//encodeUrlは、https://www.google.com/search?q=%E3%83%86%E3%83%83%E3%82%AF%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC

解説

URLには全角文字(上のソースでは「テックアカデミー」)が使えません。

encodeURI(【変換するURL】)とすることでエンコードできるでしょう。

エンコードされたURLはテックアカデミーの部分を「%E3%83・・・」などといった具合に変換しています。

変換されたURLをChromeブラウザのアドレスバーに貼り付けると下記の画像のように、「テックアカデミー」という文字に戻ります。

逆にChromeブラウザのアドレスバーのURLをコピーして、メモ帳などに貼り付けるとエンコードされたURLです。

 

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

encodeURIComponent関数を使ってURLをエンコードする方法

encodeURIComponent関数の使い方は、先程のencodeURIと同じです。

その違いは、encodeURIで変換された全角文字に加え/(スラッシュ)や?(ハテナ)などURLで意味を持つ文字も変換されます。

先程のURL「https://www.google.com/search?q=テックアカデミー」をencodeURIで変換したものとencodeURIComponentで変換したものを比べて見ましょう。

encodeURIの場合

https://www.google.com/search?q=%E3%83%86%E3%83%83%E3%82%AF%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC

encodeURIComponentの場合

https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3D%E3%83%86%E3%83%83%E3%82%AF%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC

主な使い分けとしては、encodeURIはURL全体に使用するような場合にURLとして機能させる範囲で変換します。

対して、encodeURIComponentは入力画面などでホームページのURLを入力するような場合に、安全に通信するために全体を変換してからPOSTでサーバーに送るケースに使われます。

また、URLのパラメータ部分(?以降の文字)のみに適用する場合などに使用することが可能です。

 

URLをデコードする方法

encodeURI関数でエンコードされた文字は、decodeURI関数でデコード可能です。

そして、encodeURIComponent関数でエンコードされた文字は、decodeURIComponent関数でデコード可能です。

使い方(ソースの書き方)に関しては、関数名が変わるだけであるため使いやすいといえるでしょう。。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。