引用符：JavaScriptは［`］

JavaScriptはもう、シングルクォーテーションじゃなくバックティック「`」

整理すると

• 企業・プロジェクトでルールが決められているときは、それに従うべし
• HTMLではダブルクォート［”］（ダブルクォーテーション）・JavaScriptではバックティック（バッククォート）［`］
  • 英語圏では、「you’re（you are）」のようにアポストロフィーを使用する表現は珍しくないことから、ダブルクォート
• HTML：［”］（ダブルクォーテーション）・［’］（シングルクォーテーション）
  JavaScript：［”］（ダブルクォーテーション）・［’］（シングルクォーテーション）・ES2015(ES6)ではバックティック（バッククォート）［`］も利用可
• 執筆時点の2022年3月中旬、「Can I use」によるとテンプレートリテラルは
  日本で96％強
  世界で95％弱
  のブラウザーで利用可能な構文。シングルクォーテーション・ダブルクォーテーションの論議を超えてバックティックにして良い

引用符とは？

HTMLの各要素で属性値を囲んでいる［”］やJavaScriptで文字列リテラルを囲んでいる［`］のことです。

<span class="highlight active">

console.log(`you can start with "I'm sorry"`)

もう少しだけ詳しい説明は「引用符は一貫性を持って使用する」ページを参照してください。

引用符の使い方

引用符をダブルクォートとし、「I’m free」という文字をコンソールに表示する場合、

/* この例は問題なく動作する */
console.log("I'm free");

このコードは正しく動作します。ここで、引用符ダブルクォーテーション［”］をシングルクォーテーション［’］にすると、正しく動作しません。

/*次のコードはエラーとなる */
console.log('I'm free');

この引用符がシングルクォーテーションのコードは、「I」と「m」の文字の間にあるアポストロフィも、引用符として認識されます。
JavaScript は log 関数の引数として、 ［I］ だけを想定します。この場合、閉じ括弧で終了する必要があるため、コンソールには「SyntaxError: missing ) after argument list」などのエラーが表示されます。

プログラムに処理してほしくないシングルクォーテーションやアポストロフィーが出てくる場合、プログラム側に「このアポストロフィー［’］は、引用符としての［’］ではない」と伝えることが必要です。このような処理をエスケープ処理（エスケープシーケンス）と言います。
先程の例では、「I」と「m」の間にあるシングルクォーテーション［’］の前に「￥」（円マーク）「∖」（バックスラッシュ）を前につけて表示します。

/*引用符はシングルクォーテーションのまま、
  引用符内に出てくるシングルクォーテーションをバックスラッシュでエスケープした次のコードは、
　エラーとならない*/
console.log('I'm free');

「￥」（円マーク）と「∖」（バックスラッシュ）を使い分けるという意味ではなく、日本語の環境では円マークのキーを押下します。英語環境などでは、バックスラッシュのキーを押下します。バックスラッシュに円マークが割り当てられた経緯については省略しますが、日本語環境においては円マークとバックスラッシュは同じ意味です。

JavaScriptではバックティック（バッククォート）［`］

ながらくJavaScriptについては、［’］（シングルクォーテーション）が良いとされていました。
「HTMLと同じ［”］（ダブルクォーテーション）とする」「HTMLが［”］なので、［’］（シングルクォーテーション）とする」「［”］と［’］を併用する」この3つの選択肢しかなかった時には、

• 併用パターンは複数人で仕事をする場合にルールの徹底が難しく、
• ダブルクォーテーションはHTMLで使用するので、

シングルクォーテーションが良いとされました。しかし、テンプレートリテラルがこの状況を大きく変えます。

テンプレートリテラルは、ES2015(ES6)で新しく使えるようになった構文のひとつです。

ECMAScriptは、ECMA Internationalのもとで標準化されているJavaScriptの仕様です。
JavaScriptは当初、ブラウザベンダーが独自に言語仕様を拡張し、ブラウザ間の互換性が低い言語でした。1997年にECMA Internationalが中心となり、JavaScriptの中核となる機能を抜き出して標準化したものが、ECMAScriptです。
ECMAScriptによる標準化により、ブラウザ間の互換性もある程度確立され、以降JavaScriptは多くのWebブラウザで使用されるようになりました。

2015年にメジャーアップデートされたECMAScript 2015（ES2015・ES6とも言われる）は、新しい機能や文法が追加されただけではなく、既存機能もアップデートされており、より安全で便利に、そして効率的にプログラムを書くことができます。
ブラウザーの対応は仕様のリリース後となります。特に、スマートフォン向けのブラウザーの対応状況からリリース後しばらくの間は利用が控えられましたが、現在ではブラウザーの対応も進み、開発現場では既に広く浸透しています。
JavaScriptの変数の宣言といえば、以前は「var」だったのですが、最近「const」や「let」という記述を見たことはありませんか？この「const」や「let」は、ES2015から採用された宣言方法です。

テンプレートリテラルは、執筆時点の2022年3月中旬現在、「Can I use」によると日本で96％強、世界で95％弱のブラウザーで利用可能です。
ES6 Template Literals (Template Strings) | Can I use… Support tables for HTML5, CSS3, etc

テンプレートリテラルには、積極的に使いたいコーディング上の利点も多いのですが、ここでのメリットはただひとつ。
HTMLの引用符としてダブルクォーテーションを使おうが、シングルクォーテーションを選ぼうが、JavaScriptの引用符をバックティックにすれば、全く問題ありません。

console.log(`I'm free`);console.log(`you can start with "I'm sorry"`);

以上の理由から、JavaScriptでは［`］（バックティック）を推奨します。

まとめ

HTMLでは［”］（ダブルクォーテーション）、JavaScriptではJavaScriptは［`］（バックティック）を推奨する理由は、ご理解いただけましたでしょうか。もちろん、これ以外の考え方もできますので、「明確な理由付けができる」という方は自分のルールを、なかなか考えるのが難しいという方は筆者と同じルールをまずは試してみていただけたらと思います。

せばっ！