preタグを使ったエスケープ処理の方法を解説!
HTMLタグの1つであるpreタグを使ったエスケープ処理の方法を解説します。またプログラミング初心者の方向けにHTMLで用いるエスケープ処理とは何か、どういった時に使用するのか、またその重要性についても解説します!
エスケープ処理とは?
エスケープ処理とは、マークアップ言語やプログラミング言語、スクリプト言語等で文字列を扱う際に、その言語にとって特別な意味を持つ文字や記号を、別の文字列に置き換えることです。
例えばHTMLでは、タグの記述に<
や>
という記号(文字)をHTMLで使用しますが、これを別の文字列に置き換える事を指します。
なぜエスケープ処理が必要なのか
HTML内部にHTMLで使うタグと同じ < や>、? など半角記号をそのまま処理プログラムに取り込むと思わぬバグの原因であったりセキュリティ上の欠陥となります。
そのため処理プログラムを実行する際に、一度半角記号を<
や>
のような特殊な文字に変換します。そうすることで上記の問題を防ぐことにつながります。
preタグを使ったエスケープ処理の方法
それでは実際にpre
タグを用いてエスケープ処理し、プレビューを用いてコードレビューをしていきます。
JavaScriptの記述自体をエスケープする
ここではpre
タグ内にJavaScriptのコードを記載し、そのレビューをしようと思います。
JavaScriptのコードを、これはコードを表しているという意味を持たせるためにcode
タグで囲みます。
それでは実際にどのようなコードで、どのようにブラウザ上に表示されるのか、プレビューで見てみましょう。
このようにJavaScriptの記述自体がエスケープされて、記述されている内容がそのままブラウザに表示されていることが分かります。
HTMLをエスケープする方法
次にHTMLのタグをエスケープします。
通常pre
タグ内ではHTMLタグはエスケープしないと、そのタグが適用されます。回避するにはタグを特殊文字を使って書く必要があります。
それではエスケープ処理をしていないコードと、エスケープ処理したコードをプレビューで見比べてみましょう。
このようにエスケープ処理なしの前者ではタグが適用されているのに対し、エスケープ処理ありの後者ではタグが適用されていないことが分かります。
HTMLでよく使われるエスケープ文字
以下にエスケープ処理の際によく使われる記号と、その特殊文字を挙げておきます。
< | < |
> | > |
' | ' |
" | " |
& | & |
スペース | |
またいちいちタグで使われている>
や<
を変換するのが面倒だという方は以下のサイトではHTMLタグをコピペすることでエスケープ文字への変換を簡単に行うことが出来ますので、ぜひ利用してみましょう。
まとめ
いかがでしたでしょうか?
エスケープ処理はユーザーが入力できるようなサイトを作った場合には、必ず必要な処理になります。ぜひ使ってみてください。