エスケープ処理とは？HTML・JavaScript・URLの例でわかりやすく解説！

この記事では『エスケープ処理』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

• エスケープ処理とは
• エスケープ処理の例
• エスケープ処理が必要な文字

エスケープ処理とは

エスケープ処理とは、プログラミング言語やマークアップ言語で文字列を扱う際に、その言語によって特別な意味を持つ文字や記号（特殊文字）を通常の文字として扱うための処理、または逆に通常の文字を特別な意味を持つものとして扱うための処理のことです。

後ほど詳しく説明しますが、例えば、以下のような場面でエスケープ処理が使われます。

• 特別な意味を持つ文字や記号を通常の文字として扱う
  • 特定の文字や記号が特別な意味を持つ場合において、その記号を単なる文字として扱いたい場合にエスケープ処理を行います。
  • 例: HTMLでタグを意味する<を単なる文字として扱いたい場合、<を<に置き換える。
• 通常の文字を特別な意味を持つものとして扱う
  • 一部の文字や記号に特別な意味を付与したい場合にエスケープ処理を行います。
  • 例: JavaScriptで改行したい場合、\nを用いる。

エスケープ処理の例

ここでは、HTML・JavaScript・URLにおけるエスケープ処理の例を紹介します。

エスケープ処理の例（HTMLの場合）

HTMLにおいて、<や>は特別な意味を持っており、タグの開始と終了を意味します。これらの記号をそのまま使用すると、Webブラウザはタグであるとみなすため、意図した表示ができません。例えば、以下のHTMLがあるとします。

<p>改行タグは<br>です。</p>

上記のHTMLをWebブラウザで表示すると以下のようになります。<br>が改行タグとして動作してしまい、期待通りに<br>という文字を表示できません。

改行タグは
です。

<や>の特別な意味を持つ記号を通常の文字として扱うためには、エスケープ処理が必要です。HTMLでは、以下のように特殊文字を置き換えます。

• <p>改行タグは&lt;br&gt;です。</p>
  • < → <に置き換えている
  • > → >に置き換えている

上記のHTMLをWebブラウザで表示すると以下のようになります。エスケープ処理によって、<や>がタグとしてではなく、通常の文字と扱われます。

改行タグは<br>です。

エスケープ処理の例（JavaScriptの場合）

JavaScriptにおいて、「ダブルクォーテーション（"）」や「シングルクォーテーション（'）」は特別な意味を持っており、文字列の開始または終了を意味します。これらの記号をそのまま使用すると、JavaScriptは文字列の開始または終了であるとみなします。そのため、以下のコードではエラーが発生します。

const str = "この文字列には"ダブルクォーテーション"が含まれます。";
console.log(str);
// 実行結果
// エラー

「ダブルクォーテーション（"）」や「シングルクォーテーション（'）」の特別な意味を持つ記号を通常の文字として扱うためには、エスケープ処理が必要です。JavaScriptではエスケープ文字であるバックスラッシュ（\）を用いてエスケープ処理を行います。

const str = "この文字列には\"ダブルクォーテーション\"が含まれます。";
console.log(str);
// 実行結果
// この文字列には"ダブルクォーテーション"が含まれます。

上記のコードを実行すると、文字列が正しく出力されます。このように、「特別な意味を持つ記号（ここでは"）」をエスケープ文字である「バックスラッシュ（\）」と組み合わせて使用することで、「通常の文字」として扱うことができます。

また、通常の文字を特別な意味を持つものとして扱うこともできます。JavaScriptにおいて、文字を改行したい場合には、nの前にバックスラッシュ（\）を付けた\nを使用します。例えば、以下のHTMLがあるとします。

const str = "1行目\n2行目\n3行目";
console.log(str);
// 実行結果
// 1行目
// 2行目
// 3行目

このように、「通常の文字（ここではn）」をエスケープ文字である「バックスラッシュ（\）」と組み合わせて使用することで、「特別な意味を持つもの（ここでは改行）」として扱うことができます。

エスケープ処理の例（URLの場合）

URLにおいて、スペースや記号（&や=など）は特別な意味を持っています。これらの記号をそのまま使用すると、正しく解釈されないことがあります。例えば、以下のURLがあるとします。

https://example.com/search?query=Hello & World&sort=A=B

上記のURLをそのままWebブラウザに入力すると、スペースや記号（&や=など）が正しく処理されず、予期しない動作が発生する可能性があります。スペースや記号（&や=など）の特別な意味を持つ記号を通常の文字として扱うためには、エスケープ処理が必要です。URLでは、特別な意味を持つ文字を「%エンコーディング」という形式でエスケープ処理します。以下はその一例です。

• スペース → %20
• アンパサンド（&） → %26
• 等号（=） → %3D
• （「クエリパラメータの区切り記号&」や「=」そのものを値として使う場合は、エスケープ処理が必要です）

https://example.com/search?query=Hello%20%26%20World&sort=A%3DB

このエスケープ処理により、スペースや記号（&や=など）が正しくURLの一部として解釈されるようになります。

エスケープ処理が必要な文字

エスケープ処理が必要な文字について説明します。

HTMLでエスケープ処理が必要な文字

HTMLでエスケープ処理が必要な文字の一例を以下に示します。

JavaScriptでエスケープ処理が必要な文字

JavaScriptでエスケープ処理が必要な文字の一例を以下に示します。

URLでエスケープ処理が必要な文字

URLでエスケープ処理が必要な文字の一例を以下に示します。

JSONでエスケープ処理が必要な文字

JSONでエスケープ処理が必要な文字の一例を以下に示します。

本記事のまとめ

この記事では『エスケープ処理』について、以下の内容を説明しました。

• エスケープ処理とは
  • 特別な意味を持つ文字や記号を通常の文字として扱う、またはその逆を行う処理。
• エスケープ処理が使われる場面
  • 特別な文字や記号を通常の文字として扱う場合。
  • 通常の文字に特別な意味を付与する場合。
• 主要なエスケープ処理の例
  • HTML: < → <, > → >
  • JavaScript: " → \", \n → 改行
  • URL: 空白 → %20, & → %26
  • JSON: " → \", \n → 改行
• エスケープ処理が必要な文字のリスト
  • 言語ごとに異なるが、<, >, ", &, \, /, % などが代表的。
• 注意点
  • バックスラッシュ (\) と円マーク (¥) の扱いに注意（日本語フォント特有の問題）。

お読み頂きありがとうございました。