エスケープシーケンスを一言でいうと
エスケープシーケンスは、
「文字列の中で、そのまま書けない“特殊な意味をもつ文字”を表現するための書き方」 です。
例えば、
改行したい
タブを入れたい
ダブルクォート " やバックスラッシュ \ 自体を文字として表示したい
こういうとき、普通に書くと JavaScript が
「これはコードの記号だな」と解釈してしまいます。
そこで、\(バックスラッシュ)を使って「これは特別な意味の記号だよ」と伝える のが、エスケープシーケンスです。
ここが重要です。
エスケープシーケンスは\ + 特定の一文字
で 1 つの「特別な文字」を表す仕組みです。
「画面にどう見えるか」と「ソースコードにどう書くか」がズレるので、その感覚を掴むことが大事です。
なぜエスケープが必要なのか:文字と記号の衝突
文字列の“囲み文字”を中で使いたい問題
まず、いちばん分かりやすい例から。
const text = "He said, "Hello""; // これはエラー
JavaScriptこのコードはエラーになります。
なぜかというと、JavaScript は
"He said, " ここまでを文字列Hello" ここから先はコード(意味不明)
と解釈してしまうからです。
「文字列を囲むための "」と
「文章として表示したい "」がぶつかってしまっているわけです。
エスケープして「これは文字としての ” だよ」と教える
そこで、エスケープシーケンスを使います。
const text = "He said, \"Hello\"";
console.log(text); // He said, "Hello"
JavaScript\ をつけて \" と書くことで、
「ここにある " は、文字列を閉じる記号じゃなくて、
画面に表示したい文字だよ」
と JavaScript に伝えているわけです。
ここが重要です。
エスケープは「これはコードの記号じゃなくて“文字”として扱ってほしい」という意思表示。
特に " ' \ の3つは、エスケープの代表的な対象になります。
基本のエスケープシーケンスたち(よく使うもの)
改行:\n
文字列の中で「ここで改行したい」ときに使います。
const text = "1行目\n2行目\n3行目";
console.log(text);
JavaScript画面に出るのは:
1行目
2行目
3行目
という 3 行です。
ソースコード上は 1 行ですが、\n がある場所で「改行文字」が入っています。
タブ:\t
タブ(横に大きめの空白)を入れたいときは \t です。
const text = "項目A\t100円\n項目B\t200円";
console.log(text);
JavaScript表示され方のイメージ:
項目A (タブ) 100円
項目B (タブ) 200円
タブ幅は環境によって違いますが、
ざっくり「スペース数個分のずれ」と考えてOKです。
ダブルクォート / シングルクォート:” と ‘
文字列を "..." で囲んでいるとき、中に " を入れたい場合は \"。
const text = "He said, \"Hello\"";
console.log(text); // He said, "Hello"
JavaScript逆に '...' で囲んでいるときは \' が必要になることがあります。
const text = 'It\'s a pen.';
console.log(text); // It's a pen.
JavaScriptただし、"It's a pen." のように「外側をダブルクォート、中をシングルクォート」にすれば
エスケープは不要です。
const text = "It's a pen."; // これはそのままでOK
JavaScriptバックスラッシュ自体:\
バックスラッシュ \ 自体を表示したいときは、\\ と書きます。
const path = "C:\\Users\\Taro";
console.log(path); // C:\Users\Taro
JavaScript1 つ目の \ が「エスケープのマーク」、
2 つ目の \ が「実際のバックスラッシュ文字」です。
ここが重要です。\ は「エスケープのスタート記号」なので、\ 自体を文字として使うにはもう 1 つ \ を重ねる必要がある。
Windows のパスを書くときなどによく出てきます。
文字列の中身とソースコードの見た目のズレを意識する
「コードにどう書くか」と「実際の中身」が違う例
次の 2 つを比べてみましょう。
const a = "Hello\nWorld";
const b = "Hello
World"; // ← これは通常の文字列("...")だとエラー
JavaScript"..." や '...' の普通の文字列では、
途中で改行すると構文エラーです。
だから「改行を文字として入れたい」ときは、\n を書く必要があります。
a の中身は「Hello、改行、World」という 3 つの部分からなる文字列です。
ソースコード上は 1 行ですが、中身は 2 行分。
エディタの表示で騙されないこと
多くのエディタは、\n をそのまま表示してくれます。
const text = "A\nB";
console.log(text);
JavaScriptソース上の "A\nB" は 4 文字(A, \, n, B)ですが、
実際の文字列の中身は 3 文字(A, 改行, B)です。
ここが重要です。
エスケープシーケンスは、「ソースコード上では 2文字以上使っているけれど、中身としては 1つの特殊文字」として扱われる。
この“見た目の文字数”と“実際の文字数”の違いに、最初は違和感があって当然です。
他にもある主なエスケープシーケンス(概要だけ)
代表的なもの
完全に全部覚えなくてよくて、
「こういうのもあるんだな」くらいで構いません。
\n:改行\r:復帰(キャリッジリターン)※一部環境の改行コードで使われる\t:タブ\b:バックスペース(ほぼ使わない)\f:改ページ(ほぼ使わない)\v:垂直タブ(ほぼ使わない)
正直、日常的によく使うのは
改行:\n
タブ:\t
ダブルクォート:\"
シングルクォート:\'
バックスラッシュ:\\
くらいです。
Unicode エスケープ(少しだけ触れておく)
JavaScript では、文字を Unicode コードポイントで指定するエスケープもあります。
\uXXXX 形式:
const a = "\u3042"; // "あ"
console.log(a);
JavaScript\u{XXXX} 形式(ES2015 以降):
const b = "\u{1F600}"; // 😀 (絵文字)
console.log(b);
JavaScriptただしこれは、
文字コードや絵文字などを意図的に扱いたいとき以外はあまり使いません。
ここが重要です。
初心者のうちは、「\n, \t, \", \', \\」あたりだけ確実に押さえておけば十分。
Unicode エスケープは「そういう表現もある」と頭の片隅に置いておく程度でいいです。
テンプレートリテラルとの関係
テンプレートリテラルでもエスケープシーケンスは使える
テンプレートリテラル(バッククォートの `...`)でも、
エスケープシーケンスはそのまま使えます。
const name = "太郎";
const text = `こんにちは、${name}さん\nよろしくお願いします。`;
console.log(text);
JavaScriptもちろん、テンプレートリテラルは改行をそのまま書けるので、\n を使わずに複数行を書くこともできます。
const text = `1行目
2行目
3行目`;
JavaScriptこの場合、ソースコード上の改行がそのまま文字列に入ります。
それでもエスケープが必要になる場面
例えば、テンプレートリテラルの中に ` を入れたいとき。
const text = `バッククォート(\`)を含む文字列`;
console.log(text);
JavaScriptここでは “` としてエスケープしています。
また、JSON 形式の文字列をコード中に直接書きたいようなときも、\" のようなエスケープが必要になります。
ここが重要です。
テンプレートリテラルを使うと「改行のための \n」は減らせますが、
「囲み文字やバックスラッシュを文字として使いたい」ときのエスケープは依然として必要です。
エスケープシーケンスの概念自体は消えません。
初心者としてエスケープシーケンスで押さえてほしいポイント
最後に、本当に大事なところだけを整理します。
エスケープシーケンスは、「文字列の中でそのまま書けない文字」を表すための記法。\ + 1文字(例:\n, \t, \", \\)で1つの特殊文字になる。
改行は \n、タブは \t。
ダブルクォートを "..." の中で使いたいときは \"、
バックスラッシュを表示したいときは \\ を書く。
ソースコード上の文字数と、実際の文字列の文字数がズレることに注意する。
(例:"\n" は 2文字で 1つの改行。)
テンプレートリテラルでもエスケープは必要になる場面があるが、
改行については「そのまま改行を書く」という選択肢も持てる。
ここが重要です。
エスケープシーケンスは、“コードの記号” と “文字としての記号” を明確に分けるためのスイッチです。
ダブルクォートやバックスラッシュが絡む文字列でエラーや変な表示が出たら、
「ここにエスケープが必要じゃないか?」と疑う癖をつけてください。
もし練習してみたくなったら、次のようなコードを書いて実行してみてください。
const text = "行1\n\t行2(先頭にタブ)\n行3 \"ダブルクォート\" と \\バックスラッシュ\\";
console.log(text);
JavaScript出力を見ながら、
どの部分が \n、どの部分が \t、どの部分が \"、どの部分が \\ に対応しているかを確認すると、
エスケープシーケンスの感覚がかなりクリアになってくるはずです。
