1. 本記事のポイント
- テンプレートリテラルの基本構文と使い所を実例で確認
- ネスト、条件分岐、関数呼び出しなど応用的な使い方を紹介
- 実務でありがちな誤用や落とし穴にも注意
2. テンプレートリテラルとは？
JavaScriptのテンプレートリテラル（template literal）は、ES2015（ES6）で導入された文字列記法の一種で、バッククォート（“）を使って文字列を囲みます。
従来の文字列結合（+演算子）に比べて、可読性が高く柔軟な文字列構築が可能です。特に以下の3点で実務的に有用です：
- 変数埋め込み（プレースホルダ）
- 複数行文字列の記述
- 式や関数呼び出しを埋め込んだ表現
テンプレートリテラルは主にログ出力、HTML構築、SQLクエリ生成、APIメッセージ整形などに使われます。
3. 詳細解説
基本的な使い方：変数埋め込み
変数を埋め込んで文字列を構築する際に、可読性の高い記述が可能です。
const name = "山田";
const message = `こんにちは、${name}さん！`;
console.log(message); // => こんにちは、山田さん！
${} の中では任意の式が利用でき、関数や計算も含められます。
const price = 1200;
const taxRate = 0.1;
const total = `税込価格は${price * (1 + taxRate)}円です。`;
console.log(total); // => 税込価格は1320円です。
複数行文字列の整形
改行を含む文字列もそのまま記述可能です。
const html = `
<div>
<p>Hello</p>
</div>
`;
console.log(html);
従来の \n と + を使った書き方に比べて明確です。
ネストや条件式を含める
テンプレートリテラル内に条件式を組み込むことで柔軟な整形が可能です。
const isMember = true;
const fee = `料金：${isMember ? '500円' : '1000円'}`;
console.log(fee); // => 料金：500円
関数呼び出しの結果を埋め込むこともできます：
function formatName(first, last) {
return `${last} ${first}`;
}
const greeting = `ようこそ、${formatName('太郎', '山田')}さん！`;
console.log(greeting); // => ようこそ、山田 太郎さん！
タグ付きテンプレートによる加工処理
タグ関数を使うことで、テンプレートの各部分を自在に加工できます。
function upper(strings, ...values) {
return strings[0] + values[0].toUpperCase() + strings[1];
}
const result = upper`こんにちは、${"やまだ"}さん。`;
console.log(result); // => こんにちは、ヤマダさん。
テンプレートを構文的に扱いたいケース（国際化やセキュリティ処理など）で有効です。
4. よくあるミス・誤解・落とし穴
テンプレートリテラルでは、バッククォート（`）の使用ミスが頻発します。特にシングルクォートやダブルクォートと混同し、${} が文字列中に展開されないトラブルが多いです。
const name = "佐藤";
const wrong = 'こんにちは、${name}さん';
console.log(wrong); // => こんにちは、${name}さん
また、複雑な式を ${} に埋め込みすぎると可読性が低下します。以下のような処理は事前に変数化するのが望ましいです：
// 悪い例
const message = `合計：${items.reduce((sum, item) => sum + item.price, 0)}円`;
// 良い例
const total = items.reduce((sum, item) => sum + item.price, 0);
const message = `合計：${total}円`;
タグ付きテンプレートは文法的に特殊で、副作用を伴う関数を組み込むと予期しない挙動になることもあります。使用時は関数設計に注意が必要です。
5. まとめ
テンプレートリテラルは、変数埋め込み、複数行記述、関数呼び出しなどを簡潔に記述できる表現方法です。
構文ミスや過度な埋め込みに注意すれば、実務でも可読性の高いコードを実現できます。
特にタグ付きテンプレートの活用はやや高度ですが、適切に使えば柔軟な整形処理が可能です。
