JavaScript テンプレートリテラル

1. JavaScript テンプレートリテラル

テンプレートリテラル（Template Literals）は、ES6（JavaScript 2015）で導入された強力な文字列定義の仕組みです。「テンプレートストリング（Template Strings）」とも呼ばれ、従来の引用符（"" や ''）よりも柔軟な機能を提供します。

1.1 バックティック（Back-Tics）のシンタックス

テンプレートリテラルでは、文字列を定義するためにダブルクォーテーション（""）やシングルクォーテーション（''）ではなく、バックティック（``）を使用します。

let text = `Hello World!`;

1.2 文字列内での引用符の使用

テンプレートリテラルを使用すると、文字列の中にシングルクォーテーションやダブルクォーテーションを混在させることができます。エスケープ処理を気にする必要はありません。

let text = `彼はよく "ジョニー" と呼ばれています`;

1.3 マルチラインストリング（複数行の文字列）

従来の文字列定義では改行に \n が必要でしたが、テンプレートリテラルではそのまま改行を記述できます。

let text =
`The quick
brown fox
jumps over
the lazy dog`;

2. インターポレーション（Interpolation）

テンプレートリテラルの最大のメリットは、文字列内に変数や式を直接埋め込むことができるインターポレーション（Interpolation）機能です。

2.1 変数の代入（Variable Substitution）

${...} というシンタックスを使用することで、文字列の中に変数を簡単に挿入できます。

let firstName = "John";
let lastName = "Doe";

let text = `ようこそ ${firstName}, ${lastName}!`;

2.2 式の代入（Expression Substitution）

変数だけでなく、${...} の中には JavaScript の式（Expressions）を記述することも可能です。

let price = 10;
let VAT = 0.25;

let total = `合計金額: ${(price * (1 + VAT)).toFixed(2)}`;

3. HTML テンプレートの構築

テンプレートリテラルは、動的に HTML 要素を生成する際にも非常に便利です。配列のデータからリストを作成するようなケースで真価を発揮します。

let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

4. ブラウザのサポート状況

テンプレートリテラルは ES6（ECMAScript 2015） の標準機能です。2017年6月以降、すべてのモダンブラウザで完全にサポートされています。

モダンな Web 開発において、テンプレートリテラルはもはや必須のスキルです。可読性の高いコードを書くために、積極的に活用していきましょう。