JavaScriptでは、文字列を '（シングルクォート）、"（ダブルクォート）、`（バッククォート）の3つの記号で囲めます。初めは「どれを使えばいいの？」と迷いやすいところです。
C言語では 'A' は1文字（char）、"ABC" は文字列と意味が分かれていますが、JavaScriptには1文字だけの型がなく、' も " も同じ「文字列」になります。組み込みでC言語を長く書いてきた私には、ここが最初の戸惑いどころでした。
この記事では、3つの記号の違いと、実際にどう使い分ければいいかをまとめます。
3つの記号の違い
| 記号 | 呼び方 | 変数の埋め込み | そのまま改行 |
|---|---|---|---|
'...' | シングルクォート | できない | できない |
"..." | ダブルクォート | できない | できない |
`...` | バッククォート（テンプレートリテラル） | ${} でできる | できる |
' と " は、書き方が違うだけで中身は同じです。バッククォートだけが、変数の埋め込みと改行に対応しています。
シングルクォート（’）とダブルクォート（”）の違い
JavaScriptの仕様では、' と " に機能の違いはありません。どちらで囲んだ文字列も、同じものとして扱われます。
console.log('abc' === "abc"); // true違いが出るのは、文字列の中にクォートそのものを入れたいときです。囲む記号と同じ記号を中に書くと、そこで文字列が終わったとみなされてエラーになります。そのときは、外側をもう一方の記号にするか、\（バックスラッシュ）を付けて「ただの文字」として扱わせます（エスケープ）。
// 中で ' を使うので、外側を " で囲む
const message1 = "I'm learning JavaScript.";
// 外側を ' のままにするなら、\ でエスケープする
const message2 = 'I\'m learning JavaScript.';
// HTMLの属性（class="..."）を含むときは、外側を ' にするとエスケープがいらない
const html = '<div class="box"></div>';message1 と message2 は同じ文字列です。エスケープが増えると読みにくくなるので、中に入る記号と違うほうで囲むとすっきりします。
バッククォート（`）：テンプレートリテラル
バッククォートで囲む書き方は、ES2015（ES6）で追加された「テンプレートリテラル」です。' や " にはない、次の2つの機能があります。
① 変数や式を埋め込める
${} の中に変数や式を書くと、その値が文字列に入ります。+ でつなぐ書き方より、できあがりの文章が想像しやすくなります。
const name = 'Taro';
const age = 25;
// + でつなぐ書き方
console.log('私の名前は' + name + 'です。来年' + (age + 1) + '歳になります。');
// バッククォートで埋め込む書き方
console.log(`私の名前は${name}です。来年${age + 1}歳になります。`);
// どちらも表示は「私の名前はTaroです。来年26歳になります。」+ でつなぐときは、(age + 1) のようにカッコを忘れると「251」のように文字としてつながってしまいます。${} の中は式として計算されるので、この間違いも起きにくくなります。
② そのまま改行できる
' や " で改行を入れるには \n を書きますが、バッククォートならソースコードの改行がそのまま文字列になります。
const html = `
<div>
<h1>タイトル</h1>
<p>説明文です。</p>
</div>
`;ただし、最初の ` の直後の改行や、行頭のスペースもそのまま文字列に入ります。HTMLに入れるだけなら問題になりにくいですが、文字数を数えたり文字列を比べたりするときは注意してください。バッククォートそのものを文字列に入れるときは、\` のようにエスケープします。
使うときに気をつけたいこと
JSONはダブルクォートだけ
JavaScriptの中では ' も " も使えますが、JSONの書き方では文字列とキーを " で囲む決まりです。' で書いたJSONは読み込めません。
JSON.parse('{"name": "Taro"}'); // OK
JSON.parse("{'name': 'Taro'}"); // エラー（SyntaxError）入力された値をHTMLに埋め込むとき
テンプレートリテラルはHTMLを組み立てるのに便利ですが、フォームなどで入力された値をそのまま埋め込んで innerHTML に入れると、入力に含まれたタグやスクリプトまで動いてしまうことがあります（クロスサイトスクリプティング）。文字だけを表示したいときは、textContent を使います。
const input = document.querySelector('#name').value;
// 避けたい書き方：入力にタグが入っていると、そのままHTMLとして扱われる
output.innerHTML = `<p>こんにちは、${input}さん</p>`;
// 文字として表示する書き方
output.textContent = `こんにちは、${input}さん`;document.querySelector の書き方は「document.querySelectorで使えるCSSセレクターの書き方」で紹介しています。
結局どれを使えばいい？
' と " のどちらを基本にするかは、仕様では決まっていません。よく使われるスタイルガイドやツールでも、次のように分かれています。
| スタイルガイド・ツール | ふつうの文字列 |
|---|---|
| Airbnb JavaScript Style Guide | '（文字列を組み立てるときはテンプレートリテラル） |
| Google JavaScript Style Guide | ' |
| JavaScript Standard Style | ' |
| Prettier（初期設定） | "（singleQuote: true で ' にできる） |
個人で書くときに迷ったら、次のように決めておくと迷いません。
- ふつうの文字列は
'か"のどちらかにそろえる（このブログのコードは'にしています） - 変数を埋め込むとき、改行を含むときはバッククォート。どちらもないのにバッククォートにすると、「何か埋め込んでいるのかな」と読む人が迷うので避ける
- 中に同じ記号が入るときだけ、もう一方の記号で囲む
チームや既存のプロジェクトでは、自分の好みより、そのプロジェクトのルールに合わせるのが大事です。Prettierを入れておけば、保存したときに自動でそろえてくれます。' にそろえる場合は、設定ファイル（.prettierrc）に次のように書きます。
{
"singleQuote": true
}なお、ESLintにもクォートをそろえる quotes ルールがありましたが、ESLint v8.53.0 で非推奨になり、今は別のプラグイン（@stylistic/eslint-plugin）のルールを使う形になっています（ESLint公式の説明）。古い解説記事の設定をそのまま使うときは注意してください。
まとめ
'と"は中身が同じ。どちらかにそろえ、中に同じ記号が入るときだけもう一方で囲む- 変数の埋め込みと改行はバッククォート（テンプレートリテラル）。行頭のスペースも文字列に入る
- JSONは
"だけ。入力値をHTMLに埋め込むときはtextContentを使う - チームではプロジェクトのルールに合わせ、Prettierで自動でそろえる
この記事のコードは、CodePenなどのオンラインエディタやブラウザのコンソールに貼ればすぐに試せます。文字列と一緒によく出てくる () => { ... } の書き方は「JavaScriptのアロー関数って？」で紹介しています。
コメント