なぜ「HTMLエスケープユーティリティ」が業務で必須になるのか
業務システムで Web アプリケーションを作るとき、ユーザーが入力した文字列を画面に表示する場面は必ず出てきます。コメント欄、名前、メールアドレス、検索キーワード、エラーメッセージなど、ほとんどすべてが「文字列を HTML に埋め込んで表示する」という処理になります。このときに HTMLエスケープをせずにそのまま表示してしまうと、クロスサイトスクリプティング（XSS）という代表的な攻撃の入り口になってしまいます。
HTMLエスケープとは、ユーザー入力などの文字列に含まれる特殊文字を、HTMLとして解釈されないように安全な形に変換することです。例えば < を < に、> を > に、& を & に変換することで、ブラウザがそれを「タグ」ではなく「ただの文字」として扱うようにします。これにより、悪意のあるスクリプトが埋め込まれても、実行されずに画面上の文字として表示されるだけになります。ここから、プログラミング初心者向けにステップバイステップで考えながら、実務で使える HTMLエスケープユーティリティを解説していきます。
ステップ1 HTMLエスケープの基本的な考え方を理解する
まず、「なぜエスケープが必要なのか」を具体的なイメージで押さえておくことが大切です。例えば、ユーザーが次のような文字列を入力したとします。
<script>alert('XSS');</script>
これをそのまま HTML に埋め込んで表示すると、ブラウザは <script> タグとして解釈し、中の JavaScript を実行してしまいます。これが XSS 攻撃の典型的な例です。ところが、同じ文字列を次のようにエスケープしてから表示すると、状況が一変します。
<script>alert('XSS');</script>
ブラウザはこれを「タグ」ではなく「文字列」として扱い、画面上に <script>alert('XSS');</script> と表示するだけになります。つまり、HTMLエスケープとは「ブラウザにタグとして解釈させないための変換」であり、ユーザー入力を安全に表示するための基本中の基本の仕組みなのです。
ステップ2 どの文字をエスケープすべきかを決める
次に、「どの文字をエスケープする必要があるか」を整理します。初心者の方には、まず代表的な文字から押さえると分かりやすいです。最も重要なのは < と > と & です。< と > はタグの開始と終了に使われるため、これをそのまま表示すると HTML として解釈されます。& はエンティティ（< など）の開始に使われるため、これもそのまま表示すると意図しない解釈につながることがあります。
さらに、属性値の中に文字列を埋め込む場合には、ダブルクォート " やシングルクォート ' もエスケープ対象になります。例えば、<input value="ここにユーザー入力"> のような場面では、" が壊れると HTML の構造自体が崩れてしまいます。このように、「どの場面でどの文字をエスケープするか」を意識しながらユーティリティを設計していきます。