React ES6 テンプレート文字列

Volardev 編集部 April 28, 2026

1. テンプレート文字列 (Template Strings)

テンプレート文字列（Template Strings）を使用すると、複数行にわたる文字列の作成や、文字列内への式の埋め込みが非常にスムーズに行えるようになります。

1.1 構文の比較

以前の書き方：

const name = "ジョン";
const age = 30;
const message = "こんにちは、" + name + "さん！\n" + 
                "あなたは " + age + " 歳ですね。";

テンプレート文字列を使用した書き方：

const name = "ジョン";
const age = 30;
const message = `こんにちは、${name}さん！
あなたは ${age} 歳ですね。`;

テンプレート文字列では、引用符（' や "）の代わりにバッククォート（`）を使用します。主な特徴は以下の通りです。

\n を使わずに複数行を記述できる
${} を使って内部で式（Expressions）を展開できる
エスケープせずに引用符を含めることができる

1.2 複数行文字列 (Multi-line Strings)

HTML テンプレートなどを記述する際に非常に便利です。

const html = `
  <div>
    <h1>タイトル</h1>
    <p>段落テキスト</p>
  </div>`;

注意： 複数行文字列内のインデント（字下げ）は、そのまま文字列の一部として扱われます。

2. 式の展開 (Expression Interpolation)

テンプレート文字列内の ${} には、有効な JavaScript の式であれば何でも記述できます。

2.1 変数と計算式の埋め込み

// 変数の挿入
let firstName = "ジョン";
let lastName = "ドウ";
let text = `ようこそ ${firstName}, ${lastName} さん！`;

// 計算式の挿入
let price = 10;
let quantity = 5;
let total = `合計金額: ${price * quantity}`;

2.2 配列操作と条件分岐の埋め込み

map 関数や三項演算子を組み合わせることも可能です。

// map 関数を使用したリスト生成
const items = ["りんご", "バナナ", "オレンジ"];
const list = `合計 ${items.length} 個のアイテムがあります:
${items.map(item => `- ${item}`).join('\n')}`;

// 三項演算子による表示切り替え
const isAdmin = true;
const message = `ステータス: ${isAdmin ? '管理者' : '一般ユーザー'}`;

3. タグ付きテンプレート (Tagged Templates)

タグ付きテンプレート（Tagged Templates）を使用すると、関数（タグ）を介してテンプレート文字列の出力をカスタマイズできます。

注釈： タグ付きテンプレートは高度な機能です。多くの場合、通常のテンプレート文字列で十分ですが、ライブラリ開発などで役立ちます。

3.1 タグ関数の実装例

関数は引数として「文字列部分」と「式（埋め込み部分）」を受け取ります。

function highlight(strings, fname) {
  let x = fname.toUpperCase(); // 値を加工
  return strings[0] + x + strings[1];
}

let name = "John";
let text = highlight`Hello ${name}, how are you?`;

動作の仕組み：

第 1 引数（strings）には、式の前後で分割されたテキストが配列として渡されます。この例では strings[0] は "Hello "、strings[1] は ", how are you?" になります。
第 2 引数（fname）には、式 ${name} の評価結果である "John" が渡されます。
関数内でこれらを自由に加工して、最終的な文字列を返します。

3.2 複数の式を扱う場合（残余引数の活用）

テンプレート文字列に複数の式が含まれる場合、残余引数（Rest parameter）を使用すると効率的に処理できます。

function highlight(strings, ...values) {
  // values は埋め込まれたすべての式の配列
  let result = "";
  strings.forEach((str, i) => {
    result += str + (values[i] ? values[i].toUpperCase() : "");
  });
  return result;
}

let name1 = "John";
let name2 = "Jane";
let text = highlight`Hello ${name1} and ${name2}, how are you?`;