ShibaHubShibaHub
開発者向け

HTMLエスケープツール

「&」「<」「>」「"」「'」などをHTMLエンティティに変換(エスケープ)したり、エンティティを元の文字に戻す(アンエスケープ)ことができます。XSS対策やコード紹介に。

最終更新:2026年9月9日 / 運営:sesebox(運営者情報)

変換方向
HTMLとして表示したいテキストブラウザ内のみで処理
結果

72文字

HTMLエスケープツールの使い方としくみ

① このツールの使い方

  • •1. 変換方向を選ぶ:「エスケープ」(記号→エンティティ)か「アンエスケープ」(エンティティ→記号)かを切り替えます。
  • •2. テキストを入力する:HTMLタグを含む文章や、すでにエンティティ化された文字列を貼り付けます。
  • •3. コピーする:結果欄のコピーボタンで変換結果をそのままコピーできます。

入力すると同時に変換結果が表示されるので、ボタンを押す必要はありません。

② HTMLエスケープとは何か

HTMLでは、「<」「>」「&」などの記号がタグや特殊な意味を持つ文字として扱われます。ユーザーが入力した文章をそのままHTMLページに表示すると、文章中にたまたま含まれる「<」や「>」がタグとして誤って解釈されてレイアウトが崩れたり、悪意のあるスクリプトが実行されてしまう(XSS=クロスサイトスクリプティング)危険があります。HTMLエスケープは、こうした特別な意味を持つ記号を「見たままの文字として表示するための別の表記(HTMLエンティティ)」に置き換える処理です。

元の文字エスケープ後
&&amp;
<&lt;
>&gt;
"&quot;
'&#39;

たとえば<div class="box">という文字列をそのままHTMLページに書くと、実際にdivタグとして解釈されてしまいます。この文字列を「タグではなく文字として表示したい」場合は、エスケープしてから埋め込む必要があります。

③ アンエスケープで戻せる文字

アンエスケープでは、&amp;・&lt;・&gt;・&quot;・&#39;・&nbsp;・&copy;といった主要な名前付きエンティティに加えて、&#169;のような10進数、&#xA9;のような16進数で書かれた数値文字参照にも対応しています。対応していない名前付きエンティティは、変換されずそのまま表示されます。

④ どんな場面で使われるか

  • •XSS対策:ユーザーが投稿したコメントやレビューをWebページに表示する際、悪意のあるスクリプトタグが実行されないようにエスケープする。
  • •コードの紹介:ブログ記事やドキュメントでHTMLタグそのものを「コードとして」紹介したいとき、タグが実際に解釈されてしまわないようエスケープして掲載する。
  • •既存データの確認:データベースやAPIから返ってきたエンティティ化された文字列を、人が読める形に戻して内容を確認する。

⑤ 実務での注意点

多くのモダンなフレームワーク(React・Vueなど)は、変数の値を画面に表示する際にデフォルトで自動的にエスケープ処理を行うため、開発者が毎回このツールのような変換を手動で行う必要はあまりありません。ただし、dangerouslySetInnerHTML(React)のように「HTMLとしてそのまま挿入する」機能をあえて使う場合や、サーバーサイドでHTML文字列を直接組み立てて出力するような古いスタイルのコードでは、エスケープ漏れがXSSの原因になりやすいため注意が必要です。入力したテキストの処理はすべてブラウザ内で完結しており、外部のサーバーには送信されません。

URLに含める記号を安全な形式に変換したい場合はURLエンコード・デコードツールをお使いください。目的は似ていますが、変換対象と用途が異なる別の処理です。HTMLエスケープの考え方をもう少し詳しく知りたい場合はHTMLエスケープの基礎を解説した記事もあわせてご覧ください。

⑥ サーバーサイドでも同じ処理が必要な理由

HTMLエスケープは、表示する直前(ブラウザに送るHTMLを組み立てる段階)で行うのが原則です。データベースに保存する時点でエスケープ済みの文字列にしてしまうと、そのデータをAPIとして別のアプリで使い回すときや、検索機能で元の文字列と照合したいときに不整合が起きやすくなります。たとえばユーザー名に「AT&T」という文字列を保存する場合、DBには「AT&T」のまま保存し、HTMLとして画面に出力する瞬間にだけ「AT&T」へ変換するのが望ましいとされています。このツールで変換した結果をそのままデータベースに保存してしまうと、後から二重にエスケープされてしまう(「&amp;」のように&が増えていく)不具合の原因になるため注意してください。

⑦ JavaScriptの文字列エスケープとの違い

混同されやすいものに「JavaScriptの文字列エスケープ」があります。こちらは\n(改行)や\"(ダブルクォート)のように、プログラムコードの中で特殊文字を安全に扱うための表記で、HTMLエンティティとはまったく別の仕組みです。JSONの中に含まれる文字列をHTMLとして画面に出力する場合は、JavaScriptのエスケープを解除したうえで、さらにHTMLエスケープをかけ直す、という2段階の処理が必要になる場面もあります。このツールはHTMLエンティティの変換だけを扱うため、コード中の文字列リテラルの変換には対応していない点に留意してください。用途に応じて2つの変換を使い分けると、意図しない表示崩れやセキュリティ上の不具合を避けやすくなります。

よくある質問
HTMLエスケープはどんな時に使いますか?

ユーザーが入力した文章をHTMLページにそのまま表示すると、文章中の<や>がタグとして解釈されてレイアウトが崩れたり、意図しないスクリプトが実行される(XSS)危険があります。エスケープしておくことで、これらの記号を「見たままの文字」として安全に表示できます。また、HTMLのコードやタグをブログ記事などで「コードとして」紹介したい場合にも使えます。

エスケープではどの文字が変換されますか?

「&」は&amp;、「<」は&lt;、「>」は&gt;、「"」は&quot;、「'」は&#39;に変換されます。これらはHTMLの中で特別な意味を持つ記号のため、そのまま使うとタグや属性値の区切りと誤認識される可能性があります。

アンエスケープでは何が元に戻せますか?

&amp; &lt; &gt; &quot; &#39; &nbsp; &copy; などの主要なHTML名前付きエンティティに加えて、&#169; のような10進数や &#xA9; のような16進数の数値文字参照にも対応しています。対応していない名前付きエンティティはそのまま表示されます。

エスケープした結果をどう使えばいいですか?

出力結果をそのままHTMLファイルやテンプレート内の表示したい位置に貼り付けることで、記号が文字としてそのまま表示されます。コピーボタンで結果をクリップボードにコピーできます。

入力したテキストはサーバーに送信されますか?

いいえ。変換処理はすべてブラウザ内のJavaScriptで行われ、入力したテキストがサーバーに送信されたり保存されたりすることはありません。

あわせて使う道具開発者向け
関連コラム
開発者向け の道具をもっと見るJSON整形・Base64・パスワード生成など 36個見る