💰

【JavaScript 解説】「テンプレートリテラル」とは？（ドルマーク$に中括弧{ }のあれ）

に公開
JavaScript
TypeScript
テンプレートリテラル
tech

はじめに

この記事の対象者

JavaScriptを学び始めて、ドルマーク$に中括弧{ }の謎の書き方を発見し、あるいは「テンプレートリテラル」という言葉に出会い、「これって、どう便利なの？ どうやって使うの？」となっているあなたへ向けて。

目次

  1. テンプレートリテラルとは？
    • 結論
    • 文字列を「囲む」記号が違う
  2. テンプレートリテラルを使う理由
    • 変数や式を直接埋め込める
    • 改行をそのまま表現できる

1. テンプレートリテラルとは？

結論：変数を埋め込むことができるなどの特徴を持つ、「文字列の特別な書き方」

下記のように紹介されています。

「テンプレートリテラルは逆引用符 (`) で区切られたリテラルで、複数行の文字列、埋め込み式による文字列の補間、タグ付きテンプレートと呼ばれる特殊な構文を許可します。」
出典: MDN Web Docs「テンプレートリテラル (テンプレート文字列)」[1]

何やら難しいですが、1つ1つ紐解いてみましょう。

「リテラル（literal）」とは英単語"letter"と同じく「文字」を意味するラテン語"littera"に由来する言葉で、プログラミングにおいては「ソースコードに直接書かれた文字などの値」を指します。

const username = "John";

上記のコードに直接書かれた値"John"がリテラルです。

そして、テンプレートリテラルは「逆引用符（バッククォート）」で区切られていて、「複数行」や「式の埋め込み」が可能なリテラルなのです。

文字列を「囲む」記号が違う！

え、${ }が入ってくるだけじゃないの？

→ 実は違うんです。

JavaScriptで「これは文字列だよ」とコンピューターに伝えるとき、あなたはどんな記号で囲んでいますか？
おそらく、ほとんどの人が シングルクォート（'） や ダブルクォート（"） といった引用符を使っているかと思います。

const username = 'John';

const username = "John";

テンプレートリテラルも、基本的にこの文字列を作るためのものですが、使う囲み文字が違います。
それが「バッククォート（`）」です。（逆引用符とも言います。）

// 普通のリテラルなのでシングルクォート
const username = 'John';

// テンプレートリテラルなのでバッククォート
const message = `私の名前は${username}です`;

確かに違いますね。

「特別な文字列」を作るための機能

テンプレートリテラルは、ただ文字列を作るだけでなく、その文字列の中に変数や式（計算など）を埋め込んだり、複数行に渡るときに改行をそのまま表現したりできる、ちょっと特別な文字列を作るための機能なんです。

イメージとしては、ただの入れ物（シングル/ダブルクォート）から、「中身を自動で組み立ててくれる」便利な箱（バッククォート）に進化した、と考えてみてください。

２. テンプレートリテラルを使う理由

単に文字列を囲むだけなら、シングルクォートやダブルクォートで十分です。しかし、このテンプレートリテラルを使うと、文字列の扱いに革命的な便利さが加わります。

その便利さとは主にこの2つです。

  1. 変数や式を直接埋め込める
  2. 改行をそのまま表現できる

これらについて詳しく見ていきましょう！

① 文字列の「結合」が超ラクになる！【変数埋め込み】

従来の方法（加算演算子+）の課題

これまでは、変数と文字列をくっつけるとき（= 文字列の結合）、毎回 加算演算子+ を使っていました。

例えば、ユーザーに合計金額を伝えるメッセージを作りたい場合を考えてみましょう。

const username = "John";
const price = 100;
const tax = 0.1;

// 従来の結合方法
const message = "こんにちは、" + username + "さん！" + "合計金額は" + price * (1 + tax) + "円です。";

console.log(message); // => こんにちは、Johnさん！合計金額は110円です。

文章が長くなると、""で囲まれた文字列と、加算演算子+、そして変数名が何度も登場し、どこが文字列でどこが変数なのかが分かりにくくなってしまいますよね。

テンプレートリテラルでの「式展開（埋め込み）」

テンプレートリテラルを使うと、この煩雑な+での結合から解放されます！

バッククォートで囲まれた文字列の中であれば、${変数名}という特別な書き方で、変数の値を直接埋め込むことができます。これを式展開と呼びます。領域展開じゃないよ。

const username = "John";
const price = 100;
const tax = 0.1;

// ${} の中に変数を入れるだけでOK！
const message = `こんにちは、${username}さん！合計金額は${price * (1 + tax)}円です。`;

console.log(message); // => こんにちは、Johnさん！合計金額は110円です。

② 改行もそのまま書けちゃう！【複数行文字列】

従来の書き方（改行記号\nの使用）での改行の難しさ

従来の文字列（シングルクォートやダブルクォート）では、Enterキーを押して改行しても、それは文字列の改行としては認識されませんでした。

文字列の中で改行を表現したい場合、改行コード（\n） という特殊な記号を使う必要がありました。

// 従来の改行方法
const text = "件名：お打ち合わせのご案内\n\n本文：\n本日午後3時より、会議室にてお待ちしております。";

console.log(text);
/* 出力結果:
件名：お打ち合わせのご案内

本文：
本日午後3時より、会議室にてお待ちしております。
*/

コード上で\nが並んでいると、実際にどういう形で表示されるのかを頭の中でシミュレーションするのが大変ですね。

テンプレートリテラルは改行をそのまま反映する

テンプレートリテラルなら、コード上で改行した通りの見た目で出力されます。

// テンプレートリテラルを使った改行方法
const text = `件名：お打ち合わせのご案内

本文：
本日午後3時より、会議室にてお待ちしております。`;

console.log(text);
/* 出力結果:
件名：お打ち合わせのご案内

本文：
本日午後3時より、会議室にてお待ちしております。
*/

コードの見た目と、実際に画面に出力される内容が一致するため、可読性が格段に向上します。

まとめ

今回は、JavaScriptでの文字列の扱いに大きな進化をもたらしたテンプレートリテラルについて解説しました。
ちなみに、テンプレートリテラルを使わなければいけない場面というのはありません。通常の文字列結合だっていいんです。しかし、テンプレートリテラルを使いこなせば、文字列と変数を扱うコードが非常にシンプルになります！

ぜひあなたも快適なJavaScriptライフを！

脚注

  1. https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals ↩︎

Discussion