TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでHTMLの文字列をアンエスケープ(デコード)する方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

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

 

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします！

 

目次

 

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

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

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

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

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の文字列をアンエスケープ(デコード)する方法を学習しました。

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

 

1時間でできる無料体験！

執筆してくれたメンター

太田和樹（おおたかずき）

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

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

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

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

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

地方在住。

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでformタグのaction値を操作する方法を現役エンジニアが解説【初心者向け】

JavaScriptでformタグのaction値を操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptでエスケープ処理を行う方法【初心者向け】

JavaScriptで書くエスケープ処理を行う方法について解説しています。 セキュリティ対策のためにも知っておきたい知識なので、書き方を覚えておきましょう...
JavaScript

JavaScriptのconsole.logでデバックする方法を現役エンジニアが解説【初心者向け】

JavaScriptのconsole.logでデバックする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
JavaScript

JavaScriptのtextareaオブジェクトの操作方法を現役エンジニアが解説【初心者向け】

JavaScriptのtextareaオブジェクトの操作方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また...
JavaScript

JavaScriptの関数スコープについて現役エンジニアが解説【初心者向け】

JavaScriptの関数スコープについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。  ...
JavaScript

JavaScriptのinstanceof演算子の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのinstanceof演算子の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

あわせてよく読まれている記事

PHPのエスケープ処理について現役エンジニアが解説【初心者向け】

PHPのエスケープ処理について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次unescape(アンエスケープ)とはunescape()メソッドとはdecodeURI()メソッドでHTMLの文字列をデコードする方法実際に書いてみようまとめ執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPでダブルクォーテーションを表示しようとしたらエラーがでます。どうしたらいいですか？ ソースコード： <?php echo "私は"りんご"が好きです"; ?> エラー画面： PHP Parse error: syntax error, unexpected identifier "りんご", expecting "," or ";" in /workspace/Main.php on line 2 田島悠介 PHPでのダブルクォーテーションは「文字列の始まりや終了」を表す特別な意味がある記号だから、そのままでは表示できないんだ。 ダブルクォーテーションのような、特別な記号の働きをなくすエスケープ処理が必要だね。 大石ゆかり エスケープ？何の処理ですか？ 田島悠介 エスケープ処理をすると機能を無効にしたり、違う機能をさせたりできるんだ。 「エスケープ」の英語には「脱出する」という意味があるから、本来の機能から「脱出」させるのがエスケープ処理と覚えるのもいいね。 大石ゆかり そういえば、スマホのゲームに「エスケープ」ってタイトルが付いたゲームがありましたけど脱出ゲームでしたね。 田島悠介 プログラミング言語でのエスケープ処理には特殊記号を表示することと、HTMLタグなどの命令を無効にする2つの役割があるんだよ。 大石ゆかり そうなんですね。その「エスケープ処理」について教えてください！ 田島悠介 じゃあ、特殊記号を表示させる方法から見ていこうか。   この記事は、エスケープ処理の概要や、PHPプログラムでエスケープ処理を行う方法について解説しています。PHPを使用した開発にまだ慣れていないという方でも、理解できる内容になっています。 エスケープ処理とは エスケープ処理とは、特殊記号（あるいはタグなどの命令）で行われる処理を回避して単なる文字として表示したり、逆に普通の文字に改行などの特別な機能を持たせます。 たとえば、「”」（ダブルクォーテーション）をPHPのコードから文字列として表示させたい場合、通常なら「”」は文字列の始まりか終わりを指す特殊記号なのでPHPでは表示ができません。 特殊記号を表示するには、バックスラッシュ(\)または円記号に続けて特殊記号を記述します。 バックスラッシュのようなエスケープ処理に使う文字をエスケープ文字といいます。 エスケープ処理には特殊記号を表示させるだけでなく、HTMLコードやJavaScriptの命令を無効化して安全に表示する使い方もあります。 このようなエスケープ処理はPHPに限らず、他のプログラム言語でも共通に存在する処理です。 ※バックスラッシュ(\)を入力しても円記号(¥)がそのまま表示される場合もありますが、PHPでは円記号はバックスラッシュと同じ役割です。 ※ダブルクォーテーションをWebページ上に表示するには、HTMLの特殊文字コード「&quot;」を使う方法もあります。   バックスラッシュの入力方法について Windowsで標準的なキーボード配列の場合、バックスラッシュ(\)は日本語キーボードだとバックスペースキーの左側のキー（キーボードの刻印は「¥」）を押すか、右下にある「\」キー（日本語かな表記だと「ろ」の刻印のキー）を押します。 ※Windowsでは使用しているアプリやフォント（書体）により、バックスラッシュが円記号で表示される場合があります。 ※バックスラッシュの入力はPHPの命令と同じように漢字入力オフ（漢字が入力できない状態）で入力してください。 ※URLで使われるスラッシュ(/)と、エスケープ文字のバックスラッシュ(\)は違う記号なので注意してください。   またMacの場合だと、「option」キーを押しながら右上の「¥」キーを押すだけで、半角のバックスラッシュが入力できます。 【参考】文字列の囲み方 PHPで文字列を囲むには、(“)ダブルクォーテーションで囲む方法と(‘)シングルクォーテーションで囲む方法があります。 (“)ダブルクォーテーションを文字列の中で使用する場合、(‘)シングルクォーテーションで囲んで「’私は”りんご”が好きです’」のように指定します。 違う記号で囲む方法は、コードの中で文字列を囲む記号が統一できないので、エスケープ処理をするのがおすすめです。   特殊記号を表示する PHPでダブルクォーテーションを含んだ文字列をバックスラッシュでエスケープして表示します。 サンプルコード ダブルクォーテーションを含んだ「私は”りんご”が好きです」という文章を表示します。 ソースコード <?php echo "私は\"りんご\"が好きです"; ?> 実行結果 解説 上記のプログラムでは、「”」の前にバックスラッシュ(\)を使用して「”」を単に文字として扱うようにしています。 このようにダブルクォーテーションのような特別な意味を持つ文字の前に「\」のエスケープ文字を使用して「文字列の開始と終了」という特別な効果を打ち消す処理がエスケープ処理です。   エスケープシーケンス 上記のように、特殊な記号を文字として出力するためにエスケープ文字を使用した文字の組み合わせをエスケープシーケンスといいます。 エスケープシーケンスを使用することで、文字列の途中で「改行」したり「タブ」を挿入したりといった特殊な処理を行うことも可能です。 エスケープシーケンスを有効にするにはダブルクォーテーションで文字列を囲みます。 以下は、主なエスケープシーケンスの一覧です。 \n 改行 \’ シングルクォーテーション(‘) \” ダブルクォーテーション(“) \¥ 円記号 \$ ドル記号 \t 水平タブ \\ バックスラッシュ ※PHPの他のエスケープシーケンスについて、詳しくは公式のドキュメント「エスケープシーケンス」をご覧ください。 ※エスケープシーケンスが含まれた文字列をシングルクォーテーションで囲むと、「\’」「\\」以外のエスケープシーケンスは機能せずエスケープ文字が表示されてしまいます。   エスケープシーケンスを使った例 それでは、実際にエスケープシーケンスを使用する例を見ていきましょう。 サンプルコード エスケープシーケンスを使った例として、以下の記号の表示をしてみましょう。 (‘)シングルクォーテーション 改行 タブ ドル記号 バックスラッシュ ソースコード //preタグで通常のテキストとして表示 echo "<pre>"; // ダブルクォーテーションの表示 echo 'PHPの文字列は「"」か「\'」で囲みます。'; // 改行 echo "\n"; echo "\nりんご\nみかん\nれもん\n"; echo "\n"; // タブ echo "1\t2\t3\n"; echo "りんご\tみかん\tれもん\n"; echo "\n"; // ドル記号 echo "りんごの価格：\$1\n"; echo "\n"; //バックスラッシュ echo "PHPで改行するには「\\n」と記述します"; //preタグの終わり echo "</pre>"; 実行結果 解説 2行目のpreタグは出力した改行などをHTML表示でも反映させるためのタグです。 5行目では文字列をシングルクォーテーションで囲っているのでダブルクォーテーション(“)はそのまま表示でき、シングルクォーテーションはエスケープシーケンスで表示します。 8から10行目でエスケープシーケンス「\n」により文字列の途中で改行しています。 13と14行目は文字をそろえる時に便利なタブ文字「\t」（一定間隔の空白を空ける文字）を入力しているので、数字とフルーツの名前がそろっています。 18行目は変数名などで使われるドル記号($)をエスケープして表示しています。 また22行目にあるように、バックスラッシュ（または円記号）自身を表示するときは「\\」と記述します。 ※シングルクォーテーションで文字列を囲ったときに機能するエスケープシーケンスは、「\’」と「\\」だけです。   [PR] フロントエンドで副業する学習方法を動画で公開中HTMLタグのエスケープ(htmlspecialchars) エスケープ処理の中にはHTMLタグを無効化する処理も含まれます。 たとえば、エスケープ処理をしていないフォームに「<script>alert(‘Hello!’)</scprit>」と入力すると、入力された文字を表示するときにアラート画面を表示するJavaScriptがそのまま実行されてしまう可能性があります。 エスケープ処理を行うとタグで使われるHTMLの命令であるHTMLエンティティに変換されるので「<」や「>」などの記号は単なる文字として表示する「&lt;」「&gt;」に変わります。 PHPでHTMLタグをエスケープ処理するにはhtmlspecialchars関数を使います。 ※HTMLエンティティとは、アンパサンド(&)で始まりセミコロン(;)で終わる記号を表示するHTMLの命令を表す文字です。たとえばコピーライトの記号「©」を表示させるHTMLエンティティは「&copy;」です。 ※エスケープ処理する関数は、他に特殊記号なども変換できるhtmlentities関数やタグを取り除くstrip_tags関数などもあります。   書式 エスケープ処理された文字 = htmlspecialchars( 対象文字列 ); htmlspecialchars関数の第1引数には、エスケープ処理したい文字列を指定します。 ※第2引数は省略できますが、ダブルクォーテーションなどを変換するかどうかなどの変換パターンを指定します。詳しくは公式ドキュメント「PHP: htmlspecialchars – Manual」のパラメータflagsの項目をご覧ください。 ※第3引数も省略できて、文字を変換するときの文字コードを指定します。   サンプルコード HTMLタグを含んだ文字列「<b>太字</b><br>」をhtmlspecialchars関数でエスケープ処理して、HTMLタグとして認識されない文字（HTMLエンティティ）に変換します。 ソースコード <?php //HTMLタグをそのまま表示（太字になる） $tag = "<b>太字</b><br>"; echo $tag; //HTMLタグをエスケープして表示（HTMLエンティティに変換される） $tag_escape = htmlspecialchars($tag); echo $tag_escape; ?> 実行結果 解説 変数 $tagを表示すると、HTMLタグが有効なので<b>タグが有効になり太字で表示され<br>タグで改行されます。 htmlspecialchars関数にエスケープ処理したい変数 $tagを渡します。 エスケープ処理されて「<」「>」の記号がHTMLエンティティに変換され、変数 $tagの文字列は「&lt;b&gt;太字&lt;/b&gt;&lt;br&gt;」になります。 エスケープ処理された変数 $tag_escapeを表示するとHTMLエンティティに変換されているので、太字にも改行にもならず単なる文字として表示されます。   まとめ バックスラッシュ(\)に続けて記述されたエスケープシーケンスを使用することで、特別な効果を持つ「’」や「$」を文字として出力したり、改行やタブのような特殊な処理を行えます。 HTMLタグを無効にするhtmlspecialchars関数でエスケープ処理することで安全な表示が行えます。 エスケープ処理は実務でもよく使いますし、PHP以外のプログラム言語でも使用する処理です。 エスケープ処理とは何か、その使用方法について確実にマスターして実際の開発に役立てましょう。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

JavaScriptでHTMLのエスケープ処理を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでHTMLのエスケープ処理を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   目次 エスケープ処理とは エスケープ処理が必要になる状況 HTMLのエスケープ処理を行う方法 実際に書いてみよう まとめ エスケープ処理とは エスケープ処理とは、そのままでは意図した文字列を表現できない場合に使用する、代替文字列処理のことです。 通常、JavaScriptからHTML画面に文字列を表示させる場合、「こんにちは」という文字はそのまま画面に「こんにちは」と表示されます。ところが、ある特殊な状況で「<p>こんにちは</p>」と表示させようとした場合、画面にそのまま文字列を表示させることができないケースがあります。 このような場合、<p>の代わりに次のような文字列を入力すると、HTMLデコードにより<p>に変換されます。 HTMLタグ文字列のエスケープ処理例 ( JavaScript ) &lt;p&gt;  // HTMLデコード時に、<p>に変換される [PR] フロントエンドで副業する学習方法を動画で公開中エスケープ処理が必要になる状況 JavaScirptからのHTML要素の追加処理 JavaScriptで生成したHTMLコードを動的に画面表示する場合に、HTMLコードのエスケープが必要になる場合があります。 例えば、以下のようにjQueryのappendメソッドを使うことで、画面に<p>タグのDOMを動的に追加し、文字列を表示させることができます。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは</p>'); HTML   <p class="title">Hello TechAcademy !</p>   <div id="divArea"></div> 画面表示1 この時、appendの引数で指定した<p id=”pdom”>は画面上でpタグとして扱われ、「こんにちは」の文字列はp要素として画面表示されます。 ところが、次のようなコードでHTMLにDOMを追加すると、意図しない画面表示となります。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは、<p>タグの解説をします。</p>'); 画面表示2 同じ方式で画面に<p>という文字列を表示させようとしても、<p>はHTMLタグとしてDOMに変換されてしまうため、画面表示させることができません。 このような時に、HTMLエスケープ処理が必要となります。 JavaScriptとHTMLは別々のファイルでコーディングするのが通常ですが、SPAのようにAjaxを多用するアプリケーションの場合は、APIから動的に取得したデータをJavaScript側で生成したDOMにセットした後、HTMLに追加して動的に画面表示させるため、JavaScript側でのHTMLエスケープが必要になるんですね。 エスケープ処理が必要にならない状況 JavaScript側から単に画面に文字列を表示させたい場合、エスケープ処理は必要ありません。 例えば、このような場合です。 JavaScript ( jQueryを利用 ) $("#area2").text("<p>タグの解説をします"); HTML <div id="area2"></div> 画面表示3 このようにDOM操作時においても、多くの場合エスケープ処理を必要としませんのでご安心ください。 本記事では、JavaScript側からHTMLのDOM要素を生成して追加レンダリングするという特殊な状況を前提としています。   大石ゆかり JavaScriptなのに、HTMLエスケープが必要な理由がわかりました。 田島悠介 エスケープ処理を使うケースは少ないけど、覚えておくと便利だよ。 HTMLのエスケープ処理を行う方法 HTMLの仕様で定められた特殊な文字列で<p>などの文字列を置き換えることにより、エスケープ処理を行うことができます。この特殊な文字列は「エスケープシーケンス」と呼ばれています。 代表的なHTMLエスケープシーケンス この３つを使うだけで、DOM追加時のエスケープ処理としては十分でしょう。 エスケープ対象コード エスケープシーケンス 説明 < &lt; タグ構成記号の左側部分 > &gt; タグ構成記号の右側部分 “ &quot; ダブルクォーテーション HTMLエスケープシーケンス利用例 JavaScriptから追加したDOM要素で「こんにちは、<p>タグの解説をします」と表示できるようなコードを見てみましょう。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは、&lt;p&gt;タグの解説をします</p>'); HTML   <p class="title">Hello TechAcademy !</p>   <div id="divArea"></div> 画面表示4 <p>タグのDOMを動的追加しながら、同時にDOM内にセットした<p>の文字列表示に成功しています。 実際に書いてみよう 今回の解説で登場した、画面を表示・操作可能なサンプルプログラムをご紹介します。実際に動かして、エスケープ処理を成功させてみましょう。 画面にはボタンが2つ用意してあり、「DOMを追加」ボタンを押下するとHTMLエスケープが必要なDOM追加処理が実行できるようになっています。 また、「既存DOMを操作」のボタンを押下すると、HTMLエスケープが不要な場合の操作を検証することができます。 HTML <!DOCTYPE html> <html>   <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p class="title">Hello TechAcademy !</p> <div
JavaScript

JavaScriptでエスケープ処理を行う方法【初心者向け】

JavaScriptで書くエスケープ処理を行う方法について解説しています。 セキュリティ対策のためにも知っておきたい知識なので、書き方を覚えておきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   エスケープ処理(エスケープシーケンス)とは エスケープ処理（エスケープシーケンス）とは、JavaScriptで特殊な文字を入力する際に￥（円マーク）か（バックスラッシュ）を前につけて表示する方法です。 ￥（円マーク）か\（バックスラッシュ）のどちらかというところですが、基本的には同じキーです。 設定されているフォントによって￥を押したら、\（バックスラッシュ）で表示される環境もありますし、￥のまま表示される環境もあります。   エスケープ処理（エスケープシーケンス）一覧 使用文字 エスケープシーケンス後の意味 ¥b バックスペース ¥t 水平タブ ¥v 垂直タブ ¥n 改行 ¥r 復帰 ¥f 改ページ ¥’ シングルクオーテーション ¥” ダブルクオーテーション ¥¥ ¥文字 ¥0 NULL文字 ¥xXX Latin-1文字（XXは16進数） ¥uXXXX Unicode文字（XXXXは16進数）   エスケープ処理の書き方 例えば、”1行目2行目”という文字列をデベロッパーツールのconsoleに表示してみましょう。 まずは、改行せずにそのまま表示します。 プログラム console.log("1行目\n2行目"); 表示結果 1行目2行目   次に、改行キーであるEnterを押して次のようなコードで実行してみましょう。 すると次のように文法エラーになってしまいます。 プログラム console.log("1行目 2行目"); 表示結果 Uncaught SyntaxError: Invalid or unexpected token   人間の目から見ると1行目と2行目の間には改行が入っていますが、コンピューターから見ると改行はなく、単に文法に間違いが有るように見えているようです。 そこで、エスケープ処理（エスケープシーケンス）を使用してみます。 すると表示結果のように、1行目と2行目の間に改行が入った状態で表示されます。 エスケープ処理（エスケープシーケンス）を行わないと、改行を表示できませんでした。 プログラム console.log("1行目¥n2行目"); 表示結果 1行目 2行目   [PR] フロントエンドで副業する学習方法を動画で公開中実際にエスケープ処理（エスケープシーケンス）を書いてみよう シングルクォートの中にシングルクォートを表示 JavaScriptの文法上次のようにシングルクォートの中にシングルクォートを表示することはできません。 プログラム console.log('Tech's academy'); 表示結果 Uncaught SyntaxError: missing ) after argument list   通常はシングルクォートを文字列として使用したい場合は、次のようにダブルクオーテーションで囲む必要があります。 プログラム console.log("Tech's academy"); 表示結果 Tech's academy   この処理を、エスケープ処理（エスケープシーケンス）を使用して処理すると次のようになります。 プログラム console.log('Tech\'s academy'); 表示結果 Tech's academy   escape関数の書き方 全角文字や特殊な文字を半角文字に置き換える、というエスケープ処理を行いたい場合は、escape関数を使います。 ここで、「別な文字に置き換える」ということについて簡単に説明しておきます。 Googleなどの検索サイトで全角のキーワードで検索した時、アドレスバーには全角(日本語)のまま表示されているのに、テキストエディタに貼り付けた時には一見すると意味の分からない文字の羅列になっていて、不思議に思ったことがある方もいるかもしれません。 この「%●●」の部分が、エンコードされた文字です。 全角文字や特殊な文字が環境によって正しく処理されないことを防ぐため、いったん「%●●」のような、環境によらず正しく処理される文字に置き換えることがあります。 (文字コード表というものに従って変換されるのですが、ここでは割愛します。) escape関数は以下のように使います。 具体的な使い方は後述します。 プログラム escape(文字列) escape関数によるエンコード方法 実際に、escape関数を使って、エンコードしてみましょう。 プログラム var str = escape("Tech Academy"); console.log(str); str = escape("テックアカデミー"); console.log(str); 表示結果 Tech%20Academy %u30C6%u30C3%u30AF%u30A2%u30AB%u30C7%u30DF%u30FC 「Tech Academy」に含まれる半角スペースや、全角の「テックアカデミー」が、それぞれ「%●●」にエンコードされている(置き換わっている)ことがわかります。 unescape関数によるデコード方法 エンコードした文字は、元の文字に復元できます。 これをデコードといいます。 escape関数でエンコードした文字は、unescape関数でデコードできます。 実際に見てみましょう。 プログラム var str = unescape("Tech%20Academy"); console.log(str); str = unescape("%u30C6%u30C3%u30AF%u30A2%u30AB%u30C7%u30DF%u30FC"); console.log(str); 表示結果 Tech Academy テックアカデミー 「%●●」が元の文字にデコードされている(置き換わっている)ことがわかります。   まとめ 今回は、エスケープ処理について解説しました。 エスケープ処理にも、シングルクォーテーション(‘)やダブルクォーテーション(“)にバックスラッシュ(\)を付ける方法や、escape関数を使う方法など、さまざまな方法があります。 用途に応じて使い分けましょう。 なお、escape関数のほかに、encodeURI関数やencodeURIComponent関数というものもありますがここでは割愛します。 詳しくはこちらのサイトをご参考ください。   人間の目からすれば、エスケープ処理（エスケープシーケンス）せずに書いても動く方が便利だと思えるかもしれません。 しかし、コンピューターにとっては、エスケープ処理（エスケープシーケンス）を行わないと、意図する処理を行ってくれません。 したがって、エスケープ処理（エスケープシーケンス）を理解することで、意図する処理ができるようになります。   また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。 プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。
JavaScript

JavaScriptでJSONのエスケープを行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでJSONのエスケープを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。 田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JSONのエスケープを行う方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 JSONとは エスケープ処理の必要性 JavaScriptでJSONのエスケープを行う方法 まとめ JSONとは JSONはJavaScript Object Notationの略で、JavaScriptのオブジェクトをベースにしたデータのフォーマットです。 そのため、JSONのフォーマットとJavaScriptのオブジェクトはよく似た形をしています。 下記はJSONデータの例です。 { "name": "テックアカデミージュニア", "age": 15, "langulage": "JavaScript" } JSONのフォーマットでおさえておきたいポイントを2つ紹介します。 文字列は”（ダブルクォート）で囲う JavaScriptでは’（シングルクォート）でも囲えますが、JSONは”（ダブルクォート）のみです。 プロパティ名は必ず”（ダブルクォート）で囲う 値は数値や配列の場合などに”（ダブルクォート）で囲わないことがありますが、プロパティ名は”（ダブルクォート）で囲う必要があります。 そのほかJSONの仕様については、情報通信システムの標準化団体であるEcmaインターナショナルから出ているJSONデータのpdfで確認できます。 [PR] フロントエンドで副業する学習方法を動画で公開中エスケープ処理の必要性 エスケープ処理とは、構文に影響を及ぼすような文字を影響がでない別の文字に置き換えることです。 例えばJSONの場合、文字列を”（ダブルクォート）で囲いますが、下記のように途中に”がある場合、どこからどこまでが文字列かわからなくなり、構文エラーになります。 "テックアカデミー"ジュニア " エスケープは直前に\（バックスラッシュ）を使いおこないます。/（スラッシュ）と間違えないように注意してください。 先程の文字列をエスケープする場合は下記のようになります。 "テックアカデミー\"ジュニア " 他にエスケープが必要な文字は下記になります。 “（ダブルクォート） \（バックスラッシュ） U+0000からU+001Fまでの制御文字 制御文字とは、改行とかタブなどのことです。 制御文字を表示できるエディタもありますが、基本的には表示はされずに動作する文字になります。 JavaScriptでJSONのエスケープを行う方法 JavaScriptのオブジェクトをどこかのネットワークに送るような場合に、データの形式にJSONフォーマットが指定されるケースが増えています。 JavaScriptのオブジェクトをJSONフォーマットに変換する場合は、JSON.stringifyメソッドを使います。また、JSON.stringifyメソッドを使うとエスケープが必要な文字がエスケープされます。 下記にJavaScriptのオブジェクトを用意しました。 { "name": `2020"1/1 あいう えお かき\くけ\\こ` } プロパティ名はnameとしています。 値はJavaScriptの文字列に、`（バッククォート）を使いテンプレート文字列として、下記の5つのエスケープ対象の文字を含んでいます。 「2020」の後の”（ダブルクォート） 「あいう」の後のタブ文字（テキスト上は見えませんがタブによるスペースができています） 「えお」の後の改行文字（テキスト上は見えませんが改行されています） 「かき」の後の\（バックスラッシュ） 「くけ」の後の\\（バックスラッシュ2つ） このJavaScriptのオブジェクトをJSON.stringifyを使ってJSON文字列に変換してみます。 let jsonString = JSON.stringify( { "name": `2020"1/1 あいう えお かき\くけ\\こ` }); jsonStringという変数にJSON文字列が格納されました。格納されたJSON文字列は下記になります。 '{"name":"2020\\"1/1 あいう\\tえお\\nかきくけ\\\\こ"}' 格納された結果から、エスケープされた文字を確認します。 「2020」の後の”（ダブルクォート）は、前に\\がついてエスケープされています。 「あいう」の後のタブ文字は、\\tにエスケープされています。 「えお」の後の改行文字は、\\nにエスケープされています。 「かき」の後の\（バックスラッシュ）は、消えています。これは、\（バックスラッシュ）がJavaScriptのエスケープ文字であるためJSONに変換される前になくなるためです 「くけ」の後の\\は、\\\\にエスケープされています。これは、\（バックスラッシュ）がJavaScriptのエスケープ文字であるため、JSONのエスケープで\（バックスラッシュ）が再度付与されるためです。 ちなみに、「1」の後の/（スラッシュ）はエスケープしても良い文字ですが、必須ではありません。 scriptタグを使うような場合など必要な場合だけエスケープしてください。 まとめ JSONデータの扱いとエスケープについて紹介しました。 JSONの構文チェックができるサイトもたくさんあるので、構文の確認をする場合に使ってみてください。JSONLintは構文の確認ができるサイトの1つです。 監修してくれたメンター 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。 大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。 目次unescape(アンエスケープ)とはunescape()メソッドとはdecodeURI()メソッドでHTMLの文字列をデコードする方法実際に書いてみようまとめ執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   確認ダイアログとは Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、[OK]と[キャンセル]ボタンによってWebサイト側から確認を求められることがあります。 これを確認ダイアログといいます。Webページを作る上では使用頻度の高い機能なので、alertやpromptなどと合わせ是非作り方を覚えましょう。   大石ゆかり 田島メンター！前にalertメソッドを使ってダイアログを表示させましたが、確認ダイアログを表示させる関数もあるんですか？ 田島悠介 alertメソッドとほぼ同じなんだけど、確認ダイアログの場合、ユーザーが選択したボタンの情報を受け取れるんだよね。OKとかキャンセルとかのボタンの結果なんだけど。 大石ゆかり じゃあ、結果によって表示や処理を変えるといったことができそうですね。 田島悠介 そうそう。それが違いかな。さっそく確認ダイアログを表示させてみよう！   confirmを使って確認ダイアログを表示させる JavaScriptで確認ダイアログを表示させるときは、confirmメソッドを使います。 構文 OKボタンが押されたかの真偽値 = window.confirm('メッセージの文字列'); 引数に確認ダイアログに表示するメッセージを文字列で指定します。 戻り値は「OK」ボタンが押されたらtrue、「キャンセル」ボタンが押されたらfalseの値が真偽値で返されます。 ※confirmメソッドはWindowオブジェクトのメソッドです。本当なら「window.confirm」と呼び出す必要がありますが、「window」は省略できるので「confirm」だけで呼び出せます。 ※オブジェクトとは関連のある値を記憶する変数（プロパティ）や関数のように呼び出す処理（メソッド）をグループにしたものです。 真偽値とは？ JavaScriptの値の型のひとつに真偽値があります。 真偽値は真（true、トゥルー）と偽（false、フォールス）の2つの値をとります。 trueは条件が成立している、または有効なものを表しています。 falseは条件が成立していない、または無効なものを表しています。 if文の条件には真偽値が使われるので、「if(条件式)」だと条件式がtrueの場合に実行される処理を指定します。 ※真偽値はシングルクォーテーションなどで囲みません。’true’だと文字列になります。 ソースコード では、ためしに「入力に間違いはないですか？」という文字列を表示させてみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> </head> <body> <script> const answer = confirm('入力に間違いはないですか？'); document.write(answer); </script> </body> </html> ※「const」は再代入できない固定された値として使える変数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。 表示結果 PC画面上でほかのウィンドウよりも手前にダイアログボックスがポップアップ表示されます。   さらに、[OK]を押すとダイアログボックスが消え、ブラウザに「true」と表示されました。   ちなみに、[キャンセル]を押すと「false」と表示されます。 まとめ JavaScriptで確認ダイアログを表示するにはconfirmメソッドを使います。   [PR] フロントエンドで副業する学習方法を動画で公開中確認ダイアログ内のテキストを改行する 確認ダイアログに表示するテキストを改行するにはエスケープシーケンス「n」を使います。 たとえば 「confirm(‘こんにちは、n山田さん’);」とすると、「こんにちは、」で改行されて、その下の行に「山田さん」が続きます。 エスケープシーケンスでの改行は確認ダイアログを表示するconfirmメソッドはもちろん、アラートを表示するalertでも使えます。 エスケープシーケンスとは？ エスケープシーケンス（エスケープ文字）とは、改行のような特殊な文字を表現する方法です。 エスケープシーケンスは「」（バックスラッシュ。機種によっては¥記号で表示）と特定の文字を組み合わせて特殊な意味を持たせます。 以下の表はエスケープシーケンスの例です。 エスケープシーケンス 意味 n 改行 ‘ シングルクォーテーション “ ダブルクォーテーション t タブ バックスラッシュ（または¥）を表示 ※Windowsなど機種によってはエスケープシーケンスを「」ではなく「¥」記号で表現します。バックスラッシュの入力方法について詳しくは解説記事にある「バックスラッシュの入力方法について」の見出しをご覧ください。 ソースコード [件名]ボックスが未入力の状態で[確認]ボタンを押すと「以下の項目が未入力です。」で改行されて「件名：」がアラートで表示されます。 [件名]ボックスに文字が入力されている状態で[確認]ボタンを押すと「以下の件名にしますか？」で改行されて入力された内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>confirmを使った改行 |
JavaScript

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次unescape(アンエスケープ)とはunescape()メソッドとはdecodeURI()メソッドでHTMLの文字列をデコードする方法実際に書いてみようまとめ執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。 田島悠介 どうして文字を探したいのかな？ 何かの文字で区切っているから？それとも文字の位置を探したい？ 大石ゆかり ええと、文字を探す方法がそんなにいろいろあるんですか？ 田島悠介 そうなんだ。PHPではいろんな文字列の検索方法があるよ。 まずは、区切り文字で検索する方法から見てみよう！   区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。 区切る文字列を境にして文字列を取得したいときに使えます。 構文 検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。 第2引数は検索する文字列です。 検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。 第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。 戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。 たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。 ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。 もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。   strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。 ソースコード フルネーム「山田 太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田 太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「 太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。 検索対象の文字列
PHP

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでHTMLの文字列をアンエスケープ(デコード)する方法を現役エンジニアが解説【初心者向け】