ホームページの中でHTMLのタグや♥などの記号を表示させたいけど、うまく表示できずに悩んだことはありませんか？
HTMLのタグや特殊文字は、エスケープ処理することで正しく表示できます。これまで全角文字でHTMLのタグを表示させていた方は必見です。
今回は、エスケープ処理はどういうものか、記述の仕方と便利なツールについて解説します。
目次
HTMLエスケープ処理のメリット
HTMLのエスケープ処理とは、特殊文字を表示させたり、HTMLのタグ表記を正しく表示させるための手段です。
特殊文字には©、½、≠、♥のようにさまざまな文字がありますが、HTMLファイルのエンコード方式によっては扱えない文字があります。エスケープ処理にはこのような特殊文字を正しく表示できるようになる、というメリットがあります。
HTML5が普及し、ユニコード（UTF-8）を使用することで、特殊文字を問題なく扱えるようになりました。
またエスケープ処理することで、HTMLのページ内でそのまま表示出来ない改行要素の<br>を正しく表示できるメリットもあります。
See the Pen
<br> Not Working by Nikujaga no dan’na (@nikujyaga)
on CodePen.
HTML内の<br>の文字はそのまま改行として扱われますので、当たり前の結果なのは理解できます。では、文字として表示させるにはどうすれば良いかというと、<と>の文字をエスケープ処理した文字列に置換することで解決します。
「<」と「>」の文字をブラウザで表示させるには、それぞれ<と>に置換します。
See the Pen
<br> Correct writing by Nikujaga no dan’na (@nikujyaga)
on CodePen.
これで期待通りに表示されます。
わざわざエスケープ処理するのは理由があります。例えば、掲示板のようなサービスは入力した内容を確認するため、一度プレビュー表示します。もし、この入力した内容に悪意のあるスクリプトが含まれていたら、表示確認するときにスクリプトが動作して問題を起こす可能性があります。
このような問題が起きないようにすることを「サニタイズ（無害化）」と呼びます。プログラミングについての内容ですが、当ブログでプログラミング初心者向け「サニタイズ・サニタイジング」まとめという記事で詳しく説明しています。参考にしてください。
文字実体参照、数値文字参照を使ってHTMLで特殊文字を表示させる方法
先ほどは「<」と「>」の文字を<と>に置換しましたが、これは文字実体参照と呼ばれる特定の文字列によって該当する文字列を指定する方法です。
<は「less than」、>は「greater than」の略で、それぞれ日本語で「小（しょう）なり」「大（だい）なり」となるため、文字として意味が伝わります。
エスケープ処理は文字実体参照の他に数値文字参照と呼ばれる10進数もしくは16進数の数値によって該当する文字列を指定する方法もあります。
「<」と「>」の文字を数値文字参照で表すと<、>です。
名前のような文字列の文字実体参照と比べるとわかりにくいですが、文字実体参照がない特殊文字は数値文字参照を使います。
実例として、エスケープ処理されることが多い文字について、文字実体参照と数値文字参照のコード表を用意しましたのでご覧ください。
| 文字 | 文字実体参照 | 数値文字参照 |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| “ | " | “ |
| ‘ | ' | ‘ |
文字実体参照や数値文字参照はこれ以外にも数多くあります。全てのコード表からエスケープ処理したい目的の文字をひとつずつ探すのはとても大変です。
そのため、タグ文字を含む文字列や特殊文字をエスケープ処理するにはウェブツールを使うのがおすすめです。
HTMLエスケープ・ツール｜サルワカ道具箱
https://saruwakakun.com/tools/html-escape/
HTMLタグを文章の一部として表示させたいときに、このツールを使ってエスケープ処理するとHTMLタグが文字実体参照の文字列に変換されます。
数値文字参照変換｜コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited
https://tech-unlimited.com/numeric-char-ref.html
特殊文字を数値文字参照に変換できます。数値文字参照から特殊文字に逆変換もできる便利なツールです。
なぜエスケープ処理が必要なのか
ところで、なぜエスケープ処理が必要なのでしょう。エンコードに関係なく特殊文字を表示できること、サニタイズについては冒頭で触れましたが、それ以外にもいくつか理由があります。
半角文字と全角文字は違う文字
半角文字と全角文字は違う文字、ということは既にご存じだと思います。ですが、見た目だけの話ではありません。もう一度、HTMLのタグ表記を表示させる例で説明しましょう。
See the Pen
<br> Wrong writing by Nikujaga no dan’na (@nikujyaga)
on CodePen.
一見なにも問題がないように見えます。しかし、これは不等号を全角文字を使って表示させた結果です。
人の目には問題なく見えても、コンピュータの世界では半角文字と全角文字は違うデータとして扱われます。そのため、先ほどのHTMLコードをコピペして使っても、タグとして機能しません。
|
1 2 |
<!-- 全角文字なので、コピペして使えないタグ --> ＜BR＞ |
当ブログのようにサンプルプログラムやHTMLコードを掲載する場合、コピペして使ってもらえるよう、文字実体参照や数値文字参照でエスケープ処理する方が良いのは言うまでありません。
特殊文字の方がわかりやすい
エスケープ処理が必要なもう一つの理由が、特殊文字をそのまま使う方がわかりやすい、という点です。
例えば、著作権記号（コピーライト）はエスケープ処理すると©が©で表示されるので、人間もコンピュータも「著作権表示」ということがわかります。
ですが、これを(c)と表示させると人間は「著作権表示」だとわかるかもしれませんが、コンピュータは正しく理解しない可能性があります。
その他、数式で2乗を表すのに<sup>タグを使わずに²で表示させることで、ただの上付き文字ではなく2乗を表していることをコンピュータに理解させることもできます。
See the Pen
Pythagorean theorem by Nikujaga no dan’na (@nikujyaga)
on CodePen.
このようにエスケープ処理された特殊文字を使うことで、人間とコンピュータに正しい意味を伝えられます。
まとめ
いかがでしたか？ 今回はエスケープ処理はどういうものか、記述の仕方と便利なツールについて解説しました。
エスケープ処理は日頃から使うものではありませんが、特殊文字やHTMLのタグ表記を正しく表示させるために必ず必要となります。
よくエスケープ処理されることが多い文字を覚えておけば、あとはウェブツールを使って文字実体参照や数値文字参照に変換できます。
エスケープ処理で、正しく表示できるよう、心がけてください。
