【Javascript】「’」と「`」の違いについて

運営者：そうすけ

愛媛在住のエンジニア兼ブロガー。
工場勤務から社内SEにキャリアチェンジ。
主に社内向けのシステム開発を行っています。

【ブログ運営歴】2021.6~
【プログラミング歴】2022.3~
本業：Java,MySQL、個人：Javascript

JavaScriptでは、文字列を表現する際にシングルクォート「’」とバッククォート「`」の2つの記号が利用されます。

学習初期の時、これの間違いでかなり詰まりました。

これが他人のコード見る時、めっちゃ見にくい！！

この記事では、「’」（シングルクォート）と「」（バッククォート）の違いに焦点を当て、それぞれの特徴や使いどころについて解説します。

シングルクォート（’）の特徴

シングルクォートは、Javascriptの文字列を定義するための一般的な方法です。

文字列を表現するときに一般的にシングルクォートを使用します。

これを付けると自動で文字型と判定します。

let singleQuotedString = 'シングルクォートで囲まれた文字列';

シングルクォート内でシングルクォートを表現する場合、エスケープが必要です。

let escapedSingleQuote = 'シングルクォートを含む文字列: I\'m happy!';

バッククォート（`）の特徴

バッククォートは、ES6（ECMAScript 2015）から導入されたテンプレートリテラルと呼ばれる新しい文字列の表現方法です。

バッククォートの特徴をまとめます。

文字列の定義

文字列を書くときに使用します。シングルクォートと同じ使い方です。

let backQuotedString = `バッククォートで囲まれた文字列`;

変数の埋め込み

変数を文字列内に埋め込むときに使用します。このためにバッククォートを使うといってもいいです。　

let name = 'John';
let greeting = `こんにちは、${name}さん！`;

改行コードを埋め込み

複数行の文字列を表現するのに便利です。

let multiLineString = `
  これは
  複数行の
  文字列です。
`;

シングルクォートいらんくない？という疑問

バッククォートはシングルクォートを包含する上位互換であり、変数の埋め込みや複数行の文字列表現など、多くの点で優れています。

近年のJavaScript開発では、できる限りバッククォートを利用することが一般的となっているそうです。

まとめ：バッククォートを使おう

シングルクォートとバッククォートは文字列を表現するための記号であり、それぞれの特徴が存在します。

ここは変数を使っているよ！というアピールになりますが、正直小さすぎて可読性に難があると個人的に思います。

バッククォートはこれらの利点から、シングルクォートよりも柔軟で効率的な文字列表現手段となっています。

コードの可読性やメンテナンス性を向上させるために、できる限りバッククォートを使用することが推奨されます。

新しいプロジェクトや既存のコードベースでのバッククォートの積極的な利用を検討してみましょう。