JavaScriptのテンプレートリテラル（テンプレート文字列）の使い方
生徒
「先生、JavaScriptで文字列に変数や計算結果を簡単に組み込みたいんですが、どうすればいいですか？」
先生
「それならテンプレートリテラルを使うと便利です。従来の文字列結合よりもシンプルに書けますよ。」
生徒
「テンプレートリテラルって何ですか？」
先生
「テンプレートリテラルは、バッククオート（`` ` ``）で囲む文字列で、変数や計算式を${}で埋め込める機能です。それでは基本から見ていきましょう！」
1. テンプレートリテラルの基本
従来の文字列結合では、プラス記号（+）を使って変数をつなげる必要がありました。
しかしテンプレートリテラルを使うと、変数を直接文字列に埋め込めるので、読みやすく簡単に書けます。
const name = "太郎";
const age = 20;
// 従来の書き方
console.log("私の名前は" + name + "です。年齢は" + age + "歳です。");
// テンプレートリテラルを使った書き方
console.log(`私の名前は${name}です。年齢は${age}歳です。`);
私の名前は太郎です。年齢は20歳です。
私の名前は太郎です。年齢は20歳です。
このように${}内に変数や式を書くことで、文字列の中に動的に値を挿入できます。
2. 計算結果を文字列に埋め込む
テンプレートリテラルでは変数だけでなく、計算式や関数の戻り値も埋め込めます。 例えば、合計値を文字列に表示したい場合に便利です。
const a = 5;
const b = 10;
console.log(`合計は${a + b}です。`);
合計は15です。
文字列と数値を簡単に組み合わせられるので、計算結果を表示するのもスムーズです。
3. 複数行の文字列を作成する
テンプレートリテラルの大きな特徴のひとつに、複数行の文字列を簡単に作れることがあります。
従来は改行を\nで書く必要がありましたが、バッククオートを使うだけでそのまま改行できます。
const message = `こんにちは
私の名前は太郎です
よろしくお願いします`;
console.log(message);
こんにちは
私の名前は太郎です
よろしくお願いします
このように複数行の文字列を見やすく書けるのもテンプレートリテラルの魅力です。
4. 式を埋め込むときの注意点
${}内には任意のJavaScriptの式を入れられますが、文字列以外の型も自動で文字列に変換されます。
配列やオブジェクトを埋め込む場合は、意図しない表示になることがあります。
const obj = {name: "太郎", age: 20};
console.log(`オブジェクトの内容は${obj}です。`);
オブジェクトの内容は[object Object]です。
オブジェクトを文字列として表示したい場合はJSON.stringify()を使うと見やすくなります。
console.log(`オブジェクトの内容は${JSON.stringify(obj)}です。`);
オブジェクトの内容は{"name":"太郎","age":20}です。
5. テンプレートリテラルの活用例
テンプレートリテラルは、HTML生成やログ出力、メール文面の作成など様々な場面で活躍します。 文字列結合の煩雑さを解消し、読みやすく保守しやすいコードを書くことができます。
const user = {name: "太郎", points: 150};
const html = `<div class="user-card">
<h2>${user.name}</h2>
<p>ポイント: ${user.points}</p>
</div>`;
console.log(html);
<div class="user-card">
<h2>太郎</h2>
<p>ポイント: 150</p>
</div>
このようにテンプレートリテラルを使えば、変数を埋め込んだHTMLや文章も簡単に作成できます。
