preタグを使ったエスケープ処理の方法を解説!

HTMLタグの1つであるpreタグを使ったエスケープ処理の方法を解説します。またプログラミング初心者の方向けにHTMLで用いるエスケープ処理とは何か、どういった時に使用するのか、またその重要性についても解説します!

コンテンツ [表示]

  1. 1エスケープ処理とは?
  2. 1.1なぜエスケープ処理が必要なのか
  3. 2preタグを使ったエスケープ処理の方法
  4. 2.1JavaScriptの記述自体をエスケープする
  5. 2.2HTMLをエスケープする方法
  6. 2.3HTMLでよく使われるエスケープ文字
  7. 3まとめ

エスケープ処理とは?

エスケープ処理とは、マークアップ言語やプログラミング言語、スクリプト言語等で文字列を扱う際に、その言語にとって特別な意味を持つ文字や記号を、別の文字列に置き換えることです。

例えばHTMLでは、タグの記述に<>という記号(文字)をHTMLで使用しますが、これを別の文字列に置き換える事を指します。

なぜエスケープ処理が必要なのか

HTML内部にHTMLで使うタグと同じ < や> など半角記号をそのまま処理プログラムに取り込むと思わぬバグの原因であったりセキュリティ上の欠陥となります。

そのため処理プログラムを実行する際に、一度半角記号を&lt;&gt;のような特殊な文字に変換します。そうすることで上記の問題を防ぐことにつながります。

Photo bygeralt

preタグを使ったエスケープ処理の方法

それでは実際にpreタグを用いてエスケープ処理し、プレビューを用いてコードレビューをしていきます。

JavaScriptの記述自体をエスケープする

ここではpreタグ内にJavaScriptのコードを記載し、そのレビューをしようと思います。

JavaScriptのコードを、これはコードを表しているという意味を持たせるためにcodeタグで囲みます。

それでは実際にどのようなコードで、どのようにブラウザ上に表示されるのか、プレビューで見てみましょう。

このようにJavaScriptの記述自体がエスケープされて、記述されている内容がそのままブラウザに表示されていることが分かります。

HTMLをエスケープする方法

次にHTMLのタグをエスケープします。

通常preタグ内ではHTMLタグはエスケープしないと、そのタグが適用されます。回避するにはタグを特殊文字を使って書く必要があります。

それではエスケープ処理をしていないコードと、エスケープ処理したコードをプレビューで見比べてみましょう。

このようにエスケープ処理なしの前者ではタグが適用されているのに対し、エスケープ処理ありの後者ではタグが適用されていないことが分かります。

HTMLでよく使われるエスケープ文字

以下にエスケープ処理の際によく使われる記号と、その特殊文字を挙げておきます。

< &lt;
> &gt;
' &apos;
" &quot;
& &amp;
スペース &nbsp;

 

またいちいちタグで使われている><を変換するのが面倒だという方は以下のサイトではHTMLタグをコピペすることでエスケープ文字への変換を簡単に行うことが出来ますので、ぜひ利用してみましょう。

Free Online HTML Escape / Unescape Tool - FreeFormatter.com
A free online tool to escape or unescape HTML documents and files

まとめ

いかがでしたでしょうか?

エスケープ処理はユーザーが入力できるようなサイトを作った場合には、必ず必要な処理になります。ぜひ使ってみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次