JavaScript | エスケープシーケンス（特殊文字の記述）

ここからは、「コードレビューでよく見つかるエスケープシーケンス関連のバグ」を、実例＋修正版つきで解説します。
初心者でも「なぜそれがバグなのか」「どう直せばいいのか」がわかるようにゆっくり進めます。

1. クォートの閉じ忘れ・誤解釈バグ

❌ 悪い例

console.log('It's a pen.');

console.log('It's a pen.');

エラー：

Uncaught SyntaxError: Unexpected identifier

Uncaught SyntaxError: Unexpected identifier

🔍 原因

• ' で囲った文字列の中に ' が出てきたため、JSが「ここで終わり」と勘違いする。

✅ 修正版

console.log('It\'s a pen.');
// または
console.log("It's a pen."); // ダブルクォートで囲む方法もOK

console.log('It\'s a pen.');
// または
console.log("It's a pen."); // ダブルクォートで囲む方法もOK

レビューコメント例：

文字列中で同じ種類のクォートを使う場合は、\' または \" でエスケープしましょう。
異なるクォートで囲む方がシンプルに済むケースもあります。

2. バックスラッシュの二重化忘れ

❌ 悪い例

const path = "C:\Users\Halu\Desktop";
console.log(path);

const path = "C:\Users\Halu\Desktop";
console.log(path);

出力：

C:UsersHaluDesktop

C:UsersHaluDesktop

🔍 原因

\U や \D などは不明なエスケープなので、意図した文字列にならない。
Windowsのパスでよく起こる。

✅ 修正版

const path = "C:\\Users\\Halu\\Desktop";

const path = "C:\\Users\\Halu\\Desktop";

レビューコメント例：

文字列中の \ は必ず \\ にする必要があります。
もしくは テンプレートリテラル で書くと読みやすくなります：

const path = String.raw`C:\Users\Halu\Desktop`;

const path = String.raw`C:\Users\Halu\Desktop`;

JavaScript

※ String.raw はテンプレート内で \ をそのまま扱えます。

3. 改行を直接入れてしまう

❌ 悪い例

const msg = 'Hello,
World!';

const msg = 'Hello,
World!';

エラー：

Uncaught SyntaxError: Invalid or unexpected token

Uncaught SyntaxError: Invalid or unexpected token

🔍 原因

• シングル・ダブルクォートの中に直接改行は書けない。
• 文字列リテラルの構文上、改行は1文字ではなく「行の終端」として扱われてしまう。

✅ 修正版（どちらか）

// 方法① エスケープ文字で改行
const msg = 'Hello,\nWorld!';

// 方法② テンプレートリテラルを使う
const msg = `Hello,
World!`;

// 方法① エスケープ文字で改行
const msg = 'Hello,\nWorld!';

// 方法② テンプレートリテラルを使う
const msg = `Hello,
World!`;

レビューコメント例：

改行が必要ならテンプレートリテラルを使うと安全です。
特に長文メッセージを扱うときに便利です。

4. Unicodeの桁数ミス

❌ 悪い例

console.log('\u1F600'); // ← 4桁しかない！

console.log('\u1F600'); // ← 4桁しかない！

出力：

ᘀ

ᘀ

（ぜんぜん違う文字！）

🔍 原因

• \uXXXX は 必ず4桁。
• 1F600 は絵文字 😀 のコードポイントだが、4桁に収まらない。

✅ 修正版

console.log('\u{1F600}'); // ES6以降の正しい形式

console.log('\u{1F600}'); // ES6以降の正しい形式

レビューコメント例：

\u{...} は ES6 以降で導入されたコードポイント指定。
絵文字など 5桁以上の Unicode 文字を安全に扱う場合はこちらを使いましょう。

5. JSON内でのエスケープ忘れ

❌ 悪い例

const json = "{ "name": "Halu", "path": "C:\data" }";

const json = "{ "name": "Halu", "path": "C:\data" }";

エラー：

SyntaxError: Invalid or unexpected token

SyntaxError: Invalid or unexpected token

🔍 原因

• JSON文字列の中の " や \ がエスケープされていない。
• JSONはJavaScript文字列の中の文字列なので、2重にエスケープが必要なことがある。

✅ 修正版

const json = "{ \"name\": \"Halu\", \"path\": \"C:\\\\data\" }";
console.log(JSON.parse(json));

const json = "{ \"name\": \"Halu\", \"path\": \"C:\\\\data\" }";
console.log(JSON.parse(json));

レビューコメント例：

JSON文字列を手書きするときは、

• " → \"
• \ → \\
  に置き換える必要があります。

より安全な方法は、オブジェクトを JSON.stringify() で変換することです：

const obj = { name: "Halu", path: "C:\\data" };
const json = JSON.stringify(obj);

const obj = { name: "Halu", path: "C:\\data" };
const json = JSON.stringify(obj);

JavaScript

6. HTML出力時の混乱（<br> vs \n）

❌ 悪い例

const msg = "こんにちは。\n次の行です。";
document.body.innerHTML = msg;

const msg = "こんにちは。\n次の行です。";
document.body.innerHTML = msg;

表示結果：

こんにちは。 次の行です。

こんにちは。 次の行です。

（改行されない）

🔍 原因

• HTMLでは \n は無視される。
• 実際に改行するには <br> タグが必要。

✅ 修正版

document.body.innerHTML = msg.replace(/\n/g, "<br>");

document.body.innerHTML = msg.replace(/\n/g, "<br>");

レビューコメント例：

\n はJavaScript内での改行制御。HTMLでは無視されます。
DOMに挿入する際は .replace(/\n/g, "<br>") などでHTMLタグに変換しましょう。

チェックリスト（レビュー時に確認するポイント）