引用符: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は[`](バックティック)を推奨する理由は、ご理解いただけましたでしょうか。もちろん、これ以外の考え方もできますので、「明確な理由付けができる」という方は自分のルールを、なかなか考えるのが難しいという方は筆者と同じルールをまずは試してみていただけたらと思います。

せばっ!

コメントを残す

メールアドレスが公開されることはありません。