JavaScript入門：テンプレートリテラルとは
テンプレートリテラルは 文字列をもっと便利に書ける方法 です。
バッククォート（ ` ）で囲んで書きます。普通の文字列よりも「変数の埋め込み」や「複数行の文字列」が簡単にできます。
基本の書き方
const name = "Taro";
const age = 20;
// 通常の文字列
console.log("私は " + name + " です。年齢は " + age + " 歳です。");
// テンプレートリテラル
console.log(`私は ${name} です。年齢は ${age} 歳です。`);
👉 ${変数や式} を書くと、その値が文字列に埋め込まれます。
文字列の結合（+）を使うより読みやすくなります。
変数や式を埋め込む
- 変数の埋め込み
const item = "りんご";
console.log(`好きな果物は ${item} です。`);
- 式の埋め込み
const a = 5, b = 3;
console.log(`計算結果は ${a + b} です。`); // "計算結果は 8 です。"
複数行の文字列が簡単に書ける
普通の文字列は改行に \n を入れる必要がありますが、テンプレートリテラルならそのまま改行できます。
const message = `こんにちは
これは複数行の
メッセージです`;
console.log(message);
👉 出力結果：
こんにちは
これは複数行の
メッセージです
応用：関数や条件も埋め込める
- 関数呼び出し
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Hanako")); // "Hello, Hanako!"
- 条件式
const score = 80;
console.log(`結果は ${score >= 60 ? "合格" : "不合格"} です。`);
よくあるつまずきポイント
- バッククォート（
`）を使う
→ シングル' 'やダブル" "ではテンプレートリテラルにならない。 - ${} の中は式が書ける
→ 変数だけでなく計算や関数呼び出しもOK。 - 複数行はそのまま書ける
→ 改行コードを意識しなくてよい。
ミニ練習
- 名前と年齢を変数に入れて「私は〇〇です。年齢は〇〇歳です。」と出力せよ。
const name = "Taro";
const age = 25;
console.log(`私は ${name} です。年齢は ${age} 歳です。`);
- 2つの数値を変数に入れて「合計は〇〇です」と出力せよ。
const x = 7, y = 4;
console.log(`合計は ${x + y} です`);
- 複数行の自己紹介をテンプレートリテラルで書いてみよう。
const intro = `こんにちは
私の名前は Taro です
趣味はプログラミングです`;
console.log(intro);
まとめ
- テンプレートリテラルはバッククォートで囲む。
- ${} で変数や式を埋め込める。
- 複数行をそのまま書ける。
- 文字列結合より読みやすく、初心者でも直感的に使える。
これを覚えると「文字列の扱い」が一気に楽になります。次は「タグ付きテンプレート」という応用機能もありますが、まずは基本の埋め込みと複数行をしっかり使えるようにしましょう。