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サイトを公開できる、オンラインブートキャンプを開催しています。

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

Herokuを使ってHTMLのwebサイトを公開する方法を現役エンジニアが解説【初心者向け】

Herokuを使ってHTMLのwebサイトを公開する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...

HTML

フリーで使えるものばかり！HTMLを書けるおすすめのエディタ10選｜現役エンジニアが紹介

今回はエディタの解説をします。 HTMLのコードをメモ帳で実装すると、全て黒色で表示され、非常に見づらいです。この問題を解決するために、HTMLエ...

HTML

HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

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

HTML

HTMLでリストの先頭記号をローマ数字にする方法を現役エンジニアが解説【初心者向け】

HTMLでリストの先頭記号をローマ数字にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでiframeを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでiframeタグを使う方法について解説します。...

HTML

HTMLでページを再描画する方法を現役エンジニアが解説【初心者向け】

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

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タグを含んだ文字列「太字 」をhtmlspecialchars関数でエスケープ処理して、HTMLタグとして認識されない文字（HTMLエンティティ）に変換します。ソースコード <?php //HTMLタグをそのまま表示（太字になる） $tag = "太字 "; echo $tag; //HTMLタグをエスケープして表示（HTMLエンティティに変換される） $tag_escape = htmlspecialchars($tag); echo $tag_escape; ?> 実行結果解説変数 $tagを表示すると、HTMLタグが有効なのでタグが有効になり太字で表示され タグで改行されます。 htmlspecialchars関数にエスケープ処理したい変数 $tagを渡します。エスケープ処理されて「<」「>」の記号がHTMLエンティティに変換され、変数 $tagの文字列は「太字 」になります。エスケープ処理された変数 $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画面に文字列を表示させる場合、「こんにちは」という文字はそのまま画面に「こんにちは」と表示されます。ところが、ある特殊な状況で「こんにちは」と表示させようとした場合、画面にそのまま文字列を表示させることができないケースがあります。このような場合、の代わりに次のような文字列を入力すると、HTMLデコードによりに変換されます。 HTMLタグ文字列のエスケープ処理例 ( JavaScript ) // HTMLデコード時に、に変換される [PR] Webデザインで副業する方法とはエスケープ処理が必要になる状況 JavaScirptからのHTML要素の追加処理 JavaScriptで生成したHTMLコードを動的に画面表示する場合に、HTMLコードのエスケープが必要になる場合があります。例えば、以下のようにjQueryのappendメソッドを使うことで、画面にタグのDOMを動的に追加し、文字列を表示させることができます。 JavaScript ( jQueryを利用 ) $("#divArea").append('こんにちは'); HTML Hello TechAcademy ! <div id="divArea"></div> 画面表示1 この時、appendの引数で指定したは画面上でpタグとして扱われ、「こんにちは」の文字列はp要素として画面表示されます。ところが、次のようなコードでHTMLにDOMを追加すると、意図しない画面表示となります。 JavaScript ( jQueryを利用 ) $("#divArea").append('こんにちは、タグの解説をします。'); 画面表示2 同じ方式で画面にという文字列を表示させようとしても、はHTMLタグとしてDOMに変換されてしまうため、画面表示させることができません。このような時に、HTMLエスケープ処理が必要となります。 JavaScriptとHTMLは別々のファイルでコーディングするのが通常ですが、SPAのようにAjaxを多用するアプリケーションの場合は、APIから動的に取得したデータをJavaScript側で生成したDOMにセットした後、HTMLに追加して動的に画面表示させるため、JavaScript側でのHTMLエスケープが必要になるんですね。エスケープ処理が必要にならない状況 JavaScript側から単に画面に文字列を表示させたい場合、エスケープ処理は必要ありません。例えば、このような場合です。 JavaScript ( jQueryを利用 ) $("#area2").text("タグの解説をします"); HTML <div id="area2"></div> 画面表示3 このようにDOM操作時においても、多くの場合エスケープ処理を必要としませんのでご安心ください。本記事では、JavaScript側からHTMLのDOM要素を生成して追加レンダリングするという特殊な状況を前提としています。大石ゆかり JavaScriptなのに、HTMLエスケープが必要な理由がわかりました。田島悠介エスケープ処理を使うケースは少ないけど、覚えておくと便利だよ。 HTMLのエスケープ処理を行う方法 HTMLの仕様で定められた特殊な文字列でなどの文字列を置き換えることにより、エスケープ処理を行うことができます。この特殊な文字列は「エスケープシーケンス」と呼ばれています。代表的なHTMLエスケープシーケンスこの３つを使うだけで、DOM追加時のエスケープ処理としては十分でしょう。エスケープ対象コードエスケープシーケンス説明 < < タグ構成記号の左側部分 > > タグ構成記号の右側部分 “ " ダブルクォーテーション HTMLエスケープシーケンス利用例 JavaScriptから追加したDOM要素で「こんにちは、タグの解説をします」と表示できるようなコードを見てみましょう。 JavaScript ( jQueryを利用 ) $("#divArea").append('こんにちは、タグの解説をします'); HTML Hello TechAcademy ! <div id="divArea"></div> 画面表示4 タグのDOMを動的追加しながら、同時にDOM内にセットしたの文字列表示に成功しています。実際に書いてみよう今回の解説で登場した、画面を表示・操作可能なサンプルプログラムをご紹介します。実際に動かして、エスケープ処理を成功させてみましょう。画面にはボタンが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> Hello TechAcademy ! <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でwhile文を使ってループ処理する方法【初心者向け】現役エンジニアが解説

JavaScriptでwhile文を使ってループ処理する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次preタグについてpreタグを使うメリットとよく使われるケースエスケープ処理した文字列を表示する方法preタグを使ってエスケープ処理してみよう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。【動画はこちら】 while文とfor文の違いプログラムの中で、ある数値や数式、文字列を繰り返し用いるシーンは多く見られます。 JavaScriptでループ（繰り返し）処理を行うときは、用途に応じて for文と while文という2種類を使い分けます。ざっくり言えば、2つの違いは以下の通りです。繰り返し回数が決まっている場合はfor文繰り返し回数が決まっていない場合はwhile文この違いがわかったところで、for文の使い方を覚えていきましょう。大石ゆかり while文もfor文のように繰り返し・ループ処理の一種なんですか？田島悠介書き方が違うだけで、同じ繰り返し文なんだよ。大石ゆかり同じように処理できるとしても、何か違いがあるんですか？田島悠介 for文の場合、あらかじめ繰り返す回数を設定するけどwhile文の場合は、より柔軟な形で使えるんだよね。なので無限ループになりやすいので注意が必要だよ。さっそくwhile文を見てみよう！ while文でcontinue文とbreak文を利用する while文におけるループ処理をスキップする方法 while文におけるループ処理をスキップするためにはcontinueを利用します。サンプルコード while (whileの条件) { if (ifの条件) { continue; } 他の処理 } 解説 while (whileの条件) {では、whileの条件に合致する間、ループ処理を行います。 if (ifの条件) {では、ifの条件に合致する場合、次のcontinueの処理を行います。 continue;では、ifの条件に合致する場合、それ以降の他の処理を行わず、ループ処理の先頭に戻ります。 while文におけるループ処理を終了させる方法 while文におけるループ処理を終了させるためにはbreak文を利用します。サンプルコード while (条件) { if (ifの条件) { break; } 他の処理 } 解説 while (whileの条件) {では、whileの条件に合致する間、ループ処理を行います。 if (ifの条件) {では、ifの条件に合致する場合、次のbreakの処理を行います。 break;では、ifの条件に合致する場合、それ以降の他の処理を行わず、ループ処理自体を終了します。 while文でcontinue文とbreak文を利用するサンプルコード let i = 0; while (i <= 10) { i++; if (i >

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

HTMLでコードを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでコードを表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次preタグについてpreタグを使うメリットとよく使われるケースエスケープ処理した文字列を表示する方法preタグを使ってエスケープ処理してみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLでコードを表示する方法について詳しく説明していくね！大石ゆかりお願いします！ HTMLでコードを表示する方法 <code>~</code>で囲む codeタグは、プログラミングのソースコードやコンピューター用語を表示するタグです。タグで囲まれた部分がコードであるということを意味します。ソースコードをそのまま書いてもいいですが、それだと読む側にとってはわかりにくいですよね。以下のように文章中のコードをcodeタグで囲むことで、囲んだ部分の文字が変わり、コードであるということを明示できます。 If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on. 大石ゆかりコードの説明なんて、IT系のサイトじゃないと使わなさそうですね～。田島悠介そうだね。普通のサイトではあまり使わないタグかもしれないね。大石ゆかり複数行のコードの場合もcodeタグを使うんですか？田島悠介複数行のコードの場合は、preタグを使うことが多いよ。 preタグは、HTMLで入力したとおりに表示させることができるんだ。今から文章を改行する方法と、preタグについてもそれぞれ説明するね。文章の途中で改行する方法改行したい部分に を書くエディタなどでHTMLに文章を入力する際、ただEnterキーを押すだけではブラウザの表示は改行されず、ひと続きの長い文章になってしまいます。そのため、文章を改行したい部分にはbrタグを書く必要があります。なお、brタグは閉じタグを持たないタグのため、開始タグ単独で使うことができます。以下のように文章中の改行したい位置にbrタグを書きましょう。 brタグを使って改行を入れることにより、長い文章も読みやすくなります。 改行したい部分にbrタグを入れてみましょう brタグを書いた箇所が改行されました。 [PR] Webデザインで副業する方法とは入力したとおりに表示させる方法 <pre>~</pre>で囲む複数行のコードをエディタで入力したとおりに表示させたい場合があります。そんな時は、preタグで囲むことでエディタで入力したとおりにブラウザで表示されます。つまり、改行・インデント（字下げ）・半角スペースなどがそのまま表示されます。以下は表示例です。 preタグで囲まれた部分は、改行やインデント（字下げ）がそのまま表示されています。プログラムコードをそのまま表示させたいときにpreタグを使うと、長いプログラミングコードでもすっきりと書くことができます。大石ゆかりあれ？preタグの中にHTMLタグを書いたんですが、何も表示されないんですけど・・・。田島悠介 preタグでも「< 」や「 > 」や「 & 」は特殊文字として認識されるから、それぞれ「<」「>」「&」のように置き換えて書く必要があるよ。大石ゆかりそうなんですか～。てっきり、そのまま表示されるとばかり思ってました。田島悠介後、preタグはソースコード以外にも、アスキーアートのような文字で絵や地図を表現したりする場合にも使われるんだよ。まとめ今回はHTMLでコードを表示する方法をご紹介しました。プログラミングコードは英単語を基にして開発されたものなので、英文中にコードが混ざっているとパッと見ではわかりづらかったりします。文章中のコードはcodeタグを、複数行にわたるコードの場合はpreタグを使うことにより、言葉としての文字とプログラミングコードとしての文字をわかりやすく区別することができるでしょう。さらにHTMLを学びたい場合は、HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。 HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

preタグについて

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

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

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

監修してくれたメンター

関連するキーワード

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

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

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

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

JavaScriptでwhile文を使ってループ処理する方法【初心者向け】現役エンジニアが解説

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

HTMLでコードを表示する方法【初心者向け】

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

preタグについて

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

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

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

監修してくれたメンター

記事を検索

関連するキーワード

関連する記事

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

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

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