HTML

HTMLでpreタグを使ってエスケープ処理する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでpreタグを使ってエスケープ処理する方法について解説しています。preタグを使うと改行やスペースの状態を保持したまま表示させることができます。preタグを使う場面の例と基本の使い方を覚えましょう。

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

HTMLでpreタグを使ってエスケープ処理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

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

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

preタグを使ってエスケープ処理する方法について詳しく説明していくね！

お願いします！

preタグについて

preタグとは、改行や半角スペースをそのまま反映させることができるものになります。preタグの「pre」は「preformatted text」の略になります。日本語では「整形済テキスト」という意味です。

[PR] Webデザインで副業する学習方法を動画で公開中

preタグを使うメリットとよく使われるケース

HTMLでは通常、改行や半角スペースを挿入してもページのプレビューには反映されません。しかしながらこのpreタグを利用すれば改行や半角スペースを挿入することができます。

ページにプログラムのコードや詩などを掲載する上で必須のタグとなります。

エスケープ処理した文字列を表示する方法

preタグを用いて文字列をエスケープするためには以下のように記述します。

<pre>エスケープテキスト</pre>

preタグを使ってエスケープ処理してみよう

実際に、preタグを用いてエスケープ処理をしてみましょう。まずは、詩を掲載する場合の例です。

<pre>
雨ニモマケズ

風ニモマケズ

雪ニモ夏ノ暑サニモマケヌ

丈夫ナカラダヲモチ

慾ハナク

決シテ瞋ラズ

イツモシズカニワラッテイル
</pre>

このように、詩をpreタグで囲むことでエスケープすることができます。次に、プログラムのコードを掲載したい場合の例です。

<pre>

<code>

function Hello() {

  console.log("Hello");

}

Hello();

</code>

</pre>

監修してくれたメンター

夛田武広

Vue.jsをメインにJavaScriptフレームワークのプロジェクトに携わる。
また、サーバーサイドもRubyやPHPを中心に得意としております。

TechAchademyではフロントエンド、Webアプリケーションコースを担当。

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

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

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

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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

HTMLのtd要素、th要素とrowspan属性の使い方を現役デザイナーが解説【初心者向け】

HTMLのtd要素、th要素とrowspan属性の使い方について解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方の記事を...

HTML

HTMLで丸数字を書く方法を現役エンジニアが解説【初心者向け】

HTMLで丸数字を書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTML...

HTML

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方を現役エンジニアが解説【初心者向け】

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...

HTML

HTMLでinput要素の入力位置がずれる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLでinput要素の入力位置がずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

HTML

HTMLでSEO対策としてのディレクトリ構成を現役デザイナーが解説【初心者向け】

HTMLでSEO対策としてのディレクトリ構成について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLで数値の入力欄を作成する方法を現役デザイナーが解説【初心者向け】

HTMLで数値の入力欄を作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

HTML

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

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

PHPのエスケープ処理について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次preタグについてpreタグを使うメリットとよく使われるケースエスケープ処理した文字列を表示する方法preタグを使ってエスケープ処理してみよう監修してくれたメンターそもそも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の特殊文字コード「"」を使う方法もあります。バックスラッシュの入力方法について 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] Webデザインで副業する学習方法を動画で公開中HTMLタグのエスケープ(htmlspecialchars) エスケープ処理の中にはHTMLタグを無効化する処理も含まれます。たとえば、エスケープ処理をしていないフォームに「<script>alert(‘Hello!’)</scprit>」と入力すると、入力された文字を表示するときにアラート画面を表示するJavaScriptがそのまま実行されてしまう可能性があります。エスケープ処理を行うとタグで使われるHTMLの命令であるHTMLエンティティに変換されるので「<」や「>」などの記号は単なる文字として表示する「<」「>」に変わります。 PHPでHTMLタグをエスケープ処理するにはhtmlspecialchars関数を使います。 ※HTMLエンティティとは、アンパサンド(&)で始まりセミコロン(;)で終わる記号を表示するHTMLの命令を表す文字です。たとえばコピーライトの記号「©」を表示させるHTMLエンティティは「©」です。 ※エスケープ処理する関数は、他に特殊記号なども変換できる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の文字列は「<b>太字</b><br>」になります。エスケープ処理された変数 $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 ) <p> // HTMLデコード時に、<p>に変換される [PR] Webデザインで副業する学習方法を動画で公開中エスケープ処理が必要になる状況 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追加時のエスケープ処理としては十分でしょう。エスケープ対象コードエスケープシーケンス説明 < < タグ構成記号の左側部分 > > タグ構成記号の右側部分 “ " ダブルクォーテーション HTMLエスケープシーケンス利用例 JavaScriptから追加したDOM要素で「こんにちは、<p>タグの解説をします」と表示できるようなコードを見てみましょう。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは、<p>タグの解説をします</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] Webデザインで副業する学習方法を動画で公開中実際にエスケープ処理（エスケープシーケンス）を書いてみようシングルクォートの中にシングルクォートを表示 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] Webデザインで副業する学習方法を動画で公開中エスケープ処理の必要性エスケープ処理とは、構文に影響を及ぼすような文字を影響がでない別の文字に置き換えることです。例えば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

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

Javaの正規表現のエスケープ処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。田島悠介今回は、Javaに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介正規表現のエスケープ処理について詳しく説明していくね！大石ゆかりお願いします！目次正規表現のルールとは Javaで正規表現を扱う方法エスケープ処理とは正規表現のエスケープ処理を実装してみようまとめ正規表現のルールとは正規表現とは文字列のパターンを一つの形式でまとめて表現するために使うものです。郵便番号や電話番号などを表すことができ任意の文字列から特定の文字列を取得したり、一致しているかを判定したりする際に使います。正規表現を作成する時には以下のルールがあります。以下に示す特殊文字を使用する特殊文字以外の文字は、その文字自体を照合する大カッコ([])で囲まれた文字セットは、そのセット内の任意の文字を照合する 1文字の正規表現を表します。例えば[abc]と記述すればaもしくはbもしくはcと一致することを表します正規表現の特殊文字及び記号には以下のようなものがあります。特殊文字及び記号記号の説明 . 任意の1文字。改行文字は除く。 * 直前の1文字の0回以上の繰り返しと一致 ^ 行の先頭 $ 行の末尾 [ ] カッコ内の任意の1文字と一致。「-」で範囲指定可。 [^ ] カッコ内の任意の1文字と不一致。「-」で範囲指定可。 + 直前の文字の1個以上の繰り返しと一致 ? 直前の文字が0個または1個の場合に一致 { } カッコ内の数値の繰り返しと一致 | 直前、直後どちらかのパターンに一致 [PR] Webデザインで副業する学習方法を動画で公開中Javaで正規表現を扱う方法 Javaで正規表現を使うためには以下のように記述します。 Pattern Patternの変数 = Pattern.compile(正規表現); Matcher Matcherの変数 = Patternの変数.matcher(比較対象文字列); java.util.regexパッケージにあるPatternクラスとMatherクラスを使うことで正規表現を使って処理をすることができます。最初にPatternクラスをcompileクラスの引数に正規表現を設定することで正規表現を使用する準備をします。次に先ほど作成したPatternクラスのオブジェクトからmatcherメソッドを呼び出し、引数として正規表現を使って調べたい文字列を設定します。戻り値としてMatcherクラスのオブジェクトを返すためMatherクラスの変数を用意しておきます。 matcherメソッドを使うことで文字列を正規表現に一致する部分に分けることができるため一つの文字列の中に複数正規表現に一致する場合でも調べることができます。エスケープ処理とは特殊文字を使うことで正規表現を表すことができます。しかし、特殊文字を正規表現としてではなく、文字として表したい時にはエスケープ処理をする必要があります。エスケープ処理は以下のようにします。特殊文字「」を前に付けることで正規表現としての特殊文字ではなく、普通の文字として扱うことができます。しかし実際には「」は文字列において特殊な意味を持つため「」に対してもエスケープ処理が必要になるため特殊文字という形で記述します。正規表現のエスケープ処理を実装してみようでは正規表現のエスケープ処理を実装してみましょうソース import java.io.IOException; import java.io.IOException; import java.util.regex.Matcher; import java.util.regex.Pattern; public class MainClass { public static void main(String[] args) throws IOException { String str01 = "..."; String str02 = ".da.fb.rd"; Pattern p = Pattern.compile(str01); Matcher m =

Java

JavaScriptでカンマをエスケープする方法を現役エンジニアが解説【初心者向け】

JavaScriptでカンマをエスケープする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介カンマをエスケープする方法について詳しく説明していくね！大石ゆかりお願いします！目次エスケープとはカンマをエスケープする方法実際に書いてみようまとめエスケープとは HTMLの要素は以下のように記述します。 <input type="text" id="text1"> HTMLの要素を記述する「<」などの文字は、そのままではHTMLの記述として扱われてしまうため使用できません。そこで別の文字に置き換えて使用することになります。このように、ある環境下(今回の場合はHTML)において使用できない文字を使用できる文字に変換することを「エスケープ」と呼びます。HTMLでは「<」「>」「”」「’」「&」を特殊文字と呼び、それぞれ以下の文字にエスケープして使用します。実際の文字エスケープした文字 < < > > “ " ‘ ' & & 特殊文字について、詳細は以下の記事も参考にしてください MDN – HTMLを始めよう – 実体参照:HTMLに特殊文字を含める [PR] Webデザインで副業する学習方法を動画で公開中カンマをエスケープする方法特殊文字以外以外でもエスケープした形式で表記することができます。例えばカンマは「,」で表記できます。HTMLにおけるエスケープ文字一覧については以下のページを参考にしてください Hypertext Markup Language – 2.0 – The HTML Coded Character Set 実際に書いてみよう今回のサンプルプログラムでは JavaScript で特殊文字とカンマをエスケープする方法について確認します。方法としては変換パターンを定義し、for構文で1つずつ該当する文字を変換しています。なお変換処理はreplace()を使用して正規表現パターンで行っています。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <div id="div1"></div> <script type="text/javascript" src="main.js"></script> </body> </html> main.js // 変換パターンの定義 const pattern = { "&" : "&", "<" : "<", ">" : ">", '"' : """,

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLでpreタグを使ってエスケープ処理する方法を現役デザイナーが解説【初心者向け】

目次

preタグについて

preタグを使うメリットとよく使われるケース

エスケープ処理した文字列を表示する方法

preタグを使ってエスケープ処理してみよう

監修してくれたメンター

関連するキーワード

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

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

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

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

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

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

JavaScriptでカンマをエスケープする方法を現役エンジニアが解説【初心者向け】

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

preタグについて

preタグを使うメリットとよく使われるケース

エスケープ処理した文字列を表示する方法

preタグを使ってエスケープ処理してみよう

監修してくれたメンター

記事を検索

関連するキーワード

関連する記事

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

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

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