HTMLエスケープ/アンエスケープ
&・<・>・"・' などの特殊文字をHTMLエンティティに変換（エスケープ）、またはエンティティを元の文字に戻します（アンエスケープ）。XSS対策やHTML埋め込み時に便利です。
主要な名前付きHTMLエンティティ一覧
| 文字 | 名前付きエンティティ | 数値文字参照 | 説明 |
|---|---|---|---|
| & | & | & | アンパサンド（"and"を表す記号） |
| < | < | < | 小なり記号（HTMLタグの開始文字と同じ） |
| > | > | > | 大なり記号（HTMLタグの終了文字と同じ） |
| " | " | " | ダブルクォート（属性値の区切り文字） |
| ' | ' | ' | シングルクォート（属性値の区切り文字） |
| |   | ノーブレークスペース（改行しない空白） | |
| © | © | © | 著作権記号 |
| ® | ® | ® | 登録商標記号 |
| ™ | ™ | ™ | 商標記号 |
| € | € | € | ユーロ記号 |
| ¥ | ¥ | ¥ | 円記号 |
| ¢ | ¢ | ¢ | セント記号 |
HTMLエスケープとは
HTMLエスケープとは、&・<・>・"・'という5つの特殊文字を、ブラウザが構文として解釈しない別の表記（HTMLエンティティ）に変換する処理です。ユーザーが入力した文字列をそのままHTMLに埋め込むと、<や>がタグの開始・終了と誤認されてレイアウトが崩れたり、<script>のような悪意あるコードが実行されるXSS（クロスサイトスクリプティング）を引き起こす可能性があります。HTMLエスケープはこのリスクを防ぐための基本的な対策です。
アンエスケープはその逆で、&のような名前付きエンティティや&のような数値文字参照を、元の文字に戻す処理です。他サイトからHTMLソースをコピーした際や、CMS・掲示板の投稿データを確認する際に、エンティティ表記のままでは読みづらい本来の文字列を復元したいときに使います。変換はブラウザ内のJavaScriptだけで完結し、入力内容が外部に送信されることはありません。
HTMLエスケープの使い方
- モードを選ぶ 文字をエンティティに変換したい場合は「エスケープ」、エンティティを元の文字に戻したい場合は「アンエスケープ」を選択します。
- テキストを入力欄に貼り付ける HTMLに埋め込みたい文字列、またはエンティティ表記を含む文字列を入力欄に貼り付けます。
- 変換結果を確認する 入力と同時に下の変換結果欄へリアルタイムで反映されます。入力を編集し直せばその都度再計算されます。
- 結果をコピーする 「コピー」ボタンでクリップボードに変換結果を送れます。CMSの本文やソースコードへそのまま貼り付けられます。
使いこなすためのヒント
- HTMLエスケープはXSS（クロスサイトスクリプティング）対策の基本です。ユーザー入力をHTMLに埋め込む前に必ずエスケープしてください。
&は必ず最初にエスケープする必要があります。他の文字を先に変換すると、生成された&の&まで二重にエスケープされてしまいます。- 属性値に文字列を埋め込む場合は
"（ダブルクォート）だけでなく'（シングルクォート）もエスケープしておくと安全です。 - このツールは10進数値参照（
&）・16進数値参照（&）・主要な名前付きエンティティ（&等）のアンエスケープに対応しています。 - 多くのテンプレートエンジン（Blade・JSX・Vue等）は変数展開時に自動でHTMLエスケープしますが、
{!! !!}やv-htmlのような「生HTML出力」構文を使う場合は自分でエスケープする必要があります。
HTMLエスケープの活用シーン
CMS・ブログ記事への引用埋め込み
記事本文にプログラムのコードや他サイトの引用文を掲載する際、<や>を含む文字列をそのまま貼るとタグと誤認され表示が崩れます。事前にエスケープしてから貼り付けると安全に表示できます。
掲示板・コメント欄の投稿内容の確認
掲示板やコメント欄のデータベースにエンティティ表記のまま保存された投稿を確認したいとき、アンエスケープで元のテキストに戻して読みやすくできます。
Markdown内へのHTML断片の埋め込み
Markdown文書中でHTMLタグの見本やサンプルコードをそのまま表示したい場合、エスケープしておくことでMarkdownパーサーやブラウザにタグとして解釈されず文字列として表示されます。
HTMLテンプレートのデバッグ
テンプレートエンジンが出力したHTMLソースの中で、意図せずエスケープされた（または漏れた）箇所を調べる際に、変換前後の文字列を突き合わせる用途にも使えます。
用語集
- HTMLエンティティ（文字実体参照）
- HTML文書内で特殊な意味を持つ文字を安全に表示するための表記法です。
&のように「&」で始まり「;」で終わる名前付きの形式があります。 - 数値文字参照
- 文字をUnicodeのコードポイント番号で指定する表記法です。10進数は
&、16進数は&のように書き、いずれも同じ文字を表します。 - XSS（クロスサイトスクリプティング）
- ユーザー入力に含まれるスクリプトがエスケープされずにページへ埋め込まれ、他の利用者のブラウザで意図しないコードが実行されてしまう脆弱性です。HTMLエスケープは代表的な対策の1つです。
- サニタイズ
- 外部から受け取ったデータから危険な要素を取り除く、あるいは無害な形式に変換する処理全般を指します。HTMLエスケープはサニタイズの一種です。
- &（アンパサンド）のエスケープ
- エスケープ処理で最初に変換すべき文字です。他の文字を先に変換すると、生成された
&等の&まで二重にエスケープされてしまうため、処理順序が重要になります。 - 属性値の区切り文字
- HTMLタグの属性値を囲む
"（ダブルクォート）や'（シングルクォート）のことです。属性値の中にこれらの文字が含まれる場合、エスケープしないと属性の区切りとして誤認されます。
よくある質問
<・>・&の3文字はHTMLパーサーが構文の一部として解釈する特別な文字だからです。エスケープを怠るとブラウザがタグの開始・終了と誤認し、レイアウト崩壊やXSS（悪意あるスクリプトの埋め込み）につながる可能性があります。&・<・>・"・'の5文字のみをエスケープします。絵文字や日本語などの非ASCII文字は現代のUTF-8環境ではそのまま安全に表示できるため変換不要です。
余談ですが ― SGMLから受け継いだ「文字参照」という仕組み
HTMLエンティティ（文字参照）の起源は、HTMLの元になったSGML（Standard Generalized Markup Language）にまで遡ります。1986年に標準化されたSGMLは、既にタグの区切り文字である<を本文中で使うための「文字参照」という仕組みを持っていました。HTMLはこの仕組みをほぼそのまま継承し、1990年代のHTML初期仕様の時点で<・>・&といった基本的な名前付きエンティティが定義されていました。
名前付きエンティティは当初、印刷用の特殊記号（著作権記号©・登録商標®・各種ギリシャ文字など）を、当時普及していなかったUnicodeの代わりにASCII環境でも表示するための手段として重宝されました。HTML5仕様では最終的に2,000種類以上の名前付きエンティティが定義されており、チェックマークや音符記号のようなマイナーな記号まで網羅しています。
現代ではUTF-8エンコーディングの普及によって、文字化けを避けるための文字参照の必要性は大きく下がりました。しかし<・>・&という3文字だけは今でも別の理由でエスケープが必須です。これらはHTMLパーサーにとって構文上の特別な意味（タグの開始・終了・エンティティの開始）を持つため、エスケープを怠るとレイアウト崩壊やXSS脆弱性に直結します。