1. まずは基本：書き方
テンプレートリテラルは バッククォート（`） で囲みます。シングルクォート'やダブルクォート"と同じく文字列ですが、より便利な機能が使えます。
const s = `これはテンプレートリテラルです`;
console.log(s);
// 出力: これはテンプレートリテラルです
2. 改行がそのまま使える（可読性が向上）
通常の文字列だと \n を使う必要がありますが、テンプレートリテラルならソースコードの改行をそのまま文字列にできます。
const multi = `1行目
2行目
3行目`;
console.log(multi);
/* 出力:
1行目
2行目
3行目
*/
ポイント：HTMLテンプレートや長いメッセージを作るときに便利です。
3. 式や変数を埋め込める（${...}）
テンプレートリテラル最大の利点は式展開（interpolation）。${} の中に変数や式を書けば、その評価結果が文字列に入ります。
const name = '太郎';
const score = 87;
const msg = `${name}さんの点数は${score}点です。合格: ${score >= 60 ? '○' : '×'}`;
console.log(msg);
// 出力: 太郎さんの点数は87点です。合格: ○
式は関数呼び出しや演算もOK：
const price = 120;
console.log(`税込: ${Math.round(price * 1.1)} 円`); // 税込みを丸めて表示
4. エスケープとバッククォートを文字として使う
テンプレート内でもエスケープシーケンスは使えます。バッククォート自体を文字として出したいときは “` とします。
console.log(`バッククォートを出す: \``);
// 出力: バッククォートを出す: `
5. タグ付きテンプレート（応用）
テンプレートリテラルの前に関数名をつけると、その関数に分解された部分が渡され、自由に加工できます。やや高度ですが用途は多い（国際化、エスケープ、自作フォーマット）。
function tag(strings, ...values) {
console.log(strings); // テンプレートの文字列部分の配列
console.log(values); // 式の評価結果の配列
return strings.join('---');
}
const a = 1, b = 2;
console.log(tag`値は ${a} と ${b} です`);
// tag 関数に分解された情報が渡され、戻り値が出力される
初心者はまず「生の文字列作成」と「式展開」を覚えればOK。タグは「さらにできることがある」と頭に入れておけば良いです。
6. よくある間違い・注意点
- バッククォートとシングル/ダブルを混同
バッククォートは`（半角）です。間違えて'や"を使うと式展開${}は効きません。
console.log('${name}'); // → 文字列 '${name}' が出る（展開しない）
console.log(`${name}`); // → 変数 name の値が出る
- 式中でオブジェクトを直接入れると
[object Object]に
オブジェクトをそのまま${obj}にすると"[object Object]"になる。必要ならJSON.stringify(obj)を使う。 - 改行の扱い
ソース上の改行がそのまま入るので、意図しない空白・改行が入らないよう注意。 - テンプレート内での大きな計算は見づらくなる
複雑なロジックはテンプレートの外で計算してから埋めると読みやすい。
7. 実践的な使い方の例
HTMLテンプレートを生成
const user = {name: '花子', age: 28};
const html = `
<div class="user-card">
<h2>${user.name}</h2>
<p>年齢: ${user.age}</p>
</div>
`;
console.log(html);
ログメッセージをフォーマット
const t = new Date().toLocaleString();
const level = 'INFO';
const msg = '処理が完了しました';
console.log(`[${t}] ${level}: ${msg}`);
8.) 短い練習問題
- 変数
fruit = 'りんご',count = 3を使って「りんごが3個あります。」と出力するテンプレートを作れ。 - オブジェクト
{x:10, y:20}を使って「座標は (10,20) です」と出力するテンプレートを作れ。
答え
1.
const fruit = 'りんご';
const count = 3;
console.log(`${fruit}が${count}個あります。`);
2.
const p = {x: 10, y: 20};
console.log(`座標は (${p.x},${p.y}) です`);
まとめ（初心者がまず覚えること）
- バッククォート
`...`で囲む。 ${...}で変数や式を埋め込める。- 改行がそのまま使えて可読性が高い。
- オブジェクトはそのまま入れると
"[object Object]"になるので注意。 - タグ付きテンプレートは応用（まずは基本を抑える）。
