JavaScriptでHTMLの文字列をアンエスケープ(デコード)する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでHTMLの文字列をアンエスケープ(デコード)する方法について解説しています。ここではdecodeURI()メソッドによるHTMLの文字列のエンコード/デコードの基本を学びましょう。

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

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

 

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

HTMLの文字列をアンエスケープ(デコード)する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

unescape(アンエスケープ)とは

unescape(アンエスケープ)とは、ある環境下で使用できない文字を使用できる文字に変換することです。

逆にエスケープした文字をもとに戻すことをアンエスケープと呼びます。

正確に意味を表すよう、エスケープの代わりにエンコード、アンエスケープの代わりにデコードという用語が一般的に用いられているのが現状です。

 

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

unescape()メソッドとは

unescape()メソッドとは、JavaScriptで以前使用されていたメソッドです。

escape()及びunescape()メソッドが使用されており、エンコード(符号化)された文字列をデコードする役割がありました。

しかし、これらの命令は非ASCII文字列と呼ばれる英数字以外の文字、すなわち漢字やひらがなでは正しく動作しません。

そこで現在ではエンコードを行う場合はencodeURI()、デコードではdecodeURI()メソッドを使用しています。

 

 

 

decodeURI()メソッドでHTMLの文字列をデコードする方法

decodeURI()メソッドの使い方は以下のとおりです。

decodeURI(エンコード済文字列)

 

 

実際に書いてみよう

今回のサンプルプログラムではHTMLの文字列をエンコード/デコードする方法について確認します。

Chromeブラウザーのデベロッパーツールで行いましょう。

 

はじめにもととなるHTMLの文字列を用意します。

const str1 = "<div id='mydiv'>こんにちは!</div>"
console.log(str1);

 

実行結果は以下のとおりです。

<div id='mydiv'>こんにちは!</div>

上記の文字列をエンコードしてみましょう。

const encoded_str = encodeURI(str1);
console.log(encoded_str);

 

実行結果は以下のようになります。

%3Cdiv%20id='mydiv'%3E%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%EF%BC%81%3C/div%3E

最後にエンコードした文字列をデコードしてもとに戻してみます。

const decoded_str = decodeURI(encoded_str);
console.log(decoded_str);

実行結果は以下のとおりです。

<div id='mydiv'>こんにちは!</div>

 

まとめ

今回の記事ではJavaScriptでHTMLの文字列をアンエスケープ(デコード)する方法を学習しました。

デコードによって文字列を読める日本語に変換できるため、ここでマスターしておきましょう。

 

執筆してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。

守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。

その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。

仕事のほとんどをリモートオフィスで行う。

通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

JavaScriptでHTMLの文字列をアンエスケープ(デコード)する方法がよく分かったので良かったです!

田島悠介

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

大石ゆかり

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

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

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