カテゴリ: JavaScript 更新日: 2026/05/09

JavaScriptのエスケープシーケンスの使い方をマスターしよう

JavaScriptのエスケープシーケンスの使い方をマスターしよう
JavaScriptのエスケープシーケンスの使い方をマスターしよう

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字列に改行やタブを入れたいときはどうすればいいですか?」

先生

「その場合はエスケープシーケンスを使います。特殊な文字を文字列の中で表す方法ですね。」

生徒

「エスケープシーケンスって聞いたことがありますが、具体的にはどんなものですか?」

先生

「文字列の中で普通に入力できない記号や特殊文字を、\\(バックスラッシュ)と組み合わせて書く方法です。順を追って説明しますね。」

1. エスケープシーケンスとは?

1. エスケープシーケンスとは?
1. エスケープシーケンスとは?

エスケープシーケンスとは、文字列の中で特別な動作をする文字のことです。 文字列内で「改行」「タブ」「引用符」などを正しく表示させたいときに使います。 JavaScriptでは、バックスラッシュ(\)の後に特定の文字を書くことで表現します。

2. 代表的なエスケープシーケンス

2. 代表的なエスケープシーケンス
2. 代表的なエスケープシーケンス

主なエスケープシーケンスをいくつか紹介します。

  • \n : 改行を表します
  • \t : タブ(空白)を表します
  • \\ : バックスラッシュ自体を表示します
  • \" : ダブルクオート(")を文字列内で使うとき
  • \' : シングルクオート(')を文字列内で使うとき

3. 改行やタブを文字列に挿入する例

3. 改行やタブを文字列に挿入する例
3. 改行やタブを文字列に挿入する例

改行やタブは文章や表を整えるときに便利です。 例えば、次のように使えます。


const message = "こんにちは\nJavaScriptの世界へようこそ!";
console.log(message);

const tabMessage = "名前:\t太郎\n年齢:\t20歳";
console.log(tabMessage);

こんにちは
JavaScriptの世界へようこそ!
名前:	太郎
年齢:	20歳

4. クオートを文字列内で使う

4. クオートを文字列内で使う
4. クオートを文字列内で使う

文字列をシングルクオートやダブルクオートで囲んでいる場合、同じ種類のクオートを文字列内で使いたいときにエスケープが必要です。


// ダブルクオートで囲んだ文字列内にダブルクオートを使う
const quote = "彼は言いました: \"こんにちは!\"";
console.log(quote);

// シングルクオートで囲んだ文字列内にシングルクオートを使う
const singleQuote = 'It\'s a sunny day.';
console.log(singleQuote);

彼は言いました: "こんにちは!"
It's a sunny day.

5. バックスラッシュ自体を表示する

5. バックスラッシュ自体を表示する
5. バックスラッシュ自体を表示する

バックスラッシュはエスケープ文字として使われるため、そのまま表示したいときは二重に書きます。


const path = "C:\\Users\\Taro\\Documents";
console.log(path);

C:\Users\Taro\Documents

6. エスケープシーケンスを使った応用例

6. エスケープシーケンスを使った応用例
6. エスケープシーケンスを使った応用例

エスケープシーケンスは、長い文章や複数行のメッセージ、ログ出力、HTML文字列など、文字列を整えるときに非常に便利です。


const html = "<div class=\"card\">\n\t<p>こんにちは!</p>\n</div>";
console.log(html);

<div class="card">
    <p>こんにちは!</p>
</div>

このように、エスケープシーケンスを覚えておくと、文字列を自由にコントロールできるようになります。

この記事を読んだ人からの質問

この記事を読んだ人からの質問
この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問/質問を解決します

質問:macOSでC++のプログラミングを始めたいのですが、初心者でも開発環境を簡単に作れますか?

回答:はい、macOSはプログラミング開発に適した設計がされており、初心者の方でも非常にスムーズにC++開発環境を整えることが可能です。アップルが公式に提供している開発ツールのXcodeをインストールし、さらにコマンドラインツールをセットアップするだけで、C++のコンパイルに必要な基本ツールがすべて揃います。この記事で解説している手順通りに進めれば、難しい設定なしですぐに学習を開始できます。
カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptでURLを正規化(canonical)する方法を徹底解説!初心者向けにわかりやすく解説
New2
TypeScript
TypeScriptの型まとめ!安全で保守性の高いコードを書く方法
New3
TypeScript
TypeScriptのプロジェクトをtscでビルドする基本操作を解説!初心者にもわかるステップバイステップ
New4
Claude Code
Claude Codeの基本的な使い方!起動から終了まで初心者向けに解説
人気記事
No.1
Java&Spring記事人気No1
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptの文字列を分割する方法(splitメソッド)
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptで最初に覚えたい基本構文まとめ
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptで要素の表示・非表示を切り替える方法(display・visibility)を完全解説
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptでフォームの値を取得する方法を徹底解説!valueプロパティの使い道
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptのライブラリとは?標準ライブラリと外部ライブラリの違いと使い方
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptでクライアントとサーバーのバリデーションを共通化する方法!初心者向けデータ検証入門