JavaScriptのエスケープ処理を徹底解説！７つの方法とサンプルコード

はじめに
●JavaScriptエスケープとは
●７つのエスケープ方法
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

JavaScriptのエスケープ処理は、プログラミングにおいて非常に重要な技術です。

本記事では、この技術を詳しく解説し、初心者の方でも理解できるよう丁寧に説明していきます。

エスケープ処理を適切に行うことで、プログラムの安全性と信頼性が向上します。

それでは、JavaScriptエスケープの世界へ飛び込んでみましょう。

●JavaScriptエスケープとは

JavaScriptエスケープは、特殊な文字や記号を別の表現に置き換える技術です。

この技術を使うことで、プログラムが予期せぬ動作をすることを防ぎます。

例えば、HTMLタグやJavaScriptコードの一部と誤解される可能性のある文字をエスケープすることで、セキュリティリスクや意図しない挙動を回避できます。

●７つのエスケープ方法

JavaScriptにおいて頻繁に使用されるエスケープ方法を、７つ紹介します。

各方法について、具体的なサンプルコードと共に詳しく解説していきます。

○方法１：文字列のエスケープ

文字列内の特殊文字をエスケープする方法です。

クオートやバックスラッシュなどが対象となります。

const text = "Hello, \"World\"!";
console.log(text); // 出力: Hello, "World"

このコードでは、ダブルクオートをバックスラッシュでエスケープしています。

これで、文字列の開始と終了を示すクオートと区別することができます。

○方法２：HTMLエスケープ

HTMLタグや属性の一部となる可能性のある文字をエスケープします。

<、>、&、"、' などが対象です。

function htmlEscape(str) {
    return str
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

const text = "<script>alert('XSS');</script>";
const escapedText = htmlEscape(text);
console.log(escapedText); // 出力: &lt;script&gt;alert(&#039;XSS&#039;);&lt;/script&gt;

この関数は、HTMLの特殊文字を対応するエンティティに置き換えます。

これで、XSS（クロスサイトスクリプティング）攻撃などのセキュリティリスクを軽減できます。

○方法３：URLエンコーディング

URLに含まれる特殊文字をエスケープする方法です。

JavaScriptにはencodeURIComponent関数やencodeURI関数が用意されています。

const url = "https://example.com/?name=John Doe&age=20";
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl); // 出力: https%3A%2F%2Fexample.com%2F%3Fname%3DJohn%20Doe%26age%3D20

この方法では、URLに含まれる特殊文字や空白を、パーセント記号とその文字の16進コードに置き換えます。

これにより、URLの構造を崩すことなく安全に送信することができます。

○方法４：JavaScriptオブジェクトのエスケープ

JavaScriptオブジェクトを文字列に変換する際、特殊文字をエスケープする方法です。

JSON.stringify関数を使用します。

const obj = {
    name: 'John "Doe"',
    age: 20,
};
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 出力: {"name":"John \"Doe\"","age":20}

この方法では、オブジェクト内の特殊文字（この場合はダブルクオート）が自動的にエスケープされます。

これで、JSONデータの整合性を保つことができます。

○方法５：正規表現のエスケープ

正規表現で特別な意味を持つ文字をエスケープする方法です。

.や*、+などが対象となります。

function escapeRegExp(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

const text = "Hello, (World)!";
const escapedText = escapeRegExp(text);
console.log(escapedText); // 出力: Hello\, \(World\)!

この関数は、正規表現の特殊文字の前にバックスラッシュを追加します。

これで、文字列内の文字を通常の文字として扱うことができます。

○方法６：JSONのエスケープ

JSONデータ内の特殊文字をエスケープする方法です。

JSON.stringify関数が自動的にエスケープを行います。

const data = {
    text: 'Hello, "World"!',
};
const jsonString = JSON.stringify(data);
console.log(jsonString); // 出力: {"text":"Hello, \"World\"!"}

この方法では、JSONデータ内のダブルクオートが自動的にエスケープされます。

これで、有効なJSON文字列を生成することができます。

○方法７：カスタムエスケープ関数

独自のルールで特殊文字をエスケープする方法です。

特定の文字列を別の文字列に置き換える場合などに使用します。

function customEscape(str) {
    return str.replace(/dangerous/g, "safe");
}

const text = "This is a dangerous world.";
const escapedText = customEscape(text);
console.log(escapedText); // 出力: This is a safe world.

この例では、”dangerous”という単語を”safe”に置き換えています。

このように、プロジェクトの要件に応じて独自のエスケープルールを定義することができます。