2026年4月16日
JavaScript テンプレートリテラルとは？
文字列に変数を埋め込むとき、従来は + で連結していました。テンプレートリテラルを使うと、より読みやすく書けます。
テンプレートリテラルはバッククォート（`）で文字列を囲み、$$式 の形で変数や式を埋め込みます。
基本の使い方
const name = '田中';
const age = 15;
// 従来の書き方（+で連結）
console.log('こんにちは、' + name + 'さん。' + age + '歳ですね。');
// テンプレートリテラル（読みやすい）
console.log(\`こんにちは、\${name}さん。\${age}歳ですね。\`);🔥 イベント処理入門で実践してみましょう。
式を埋め込む
$$ の中には変数だけでなく、計算式や関数呼び出しも書けます。
const price = 1000;
const tax = 0.1;
console.log(\`税込価格：\${price * (1 + tax)}円\`);
// 税込価格：1100円
const arr = [1, 2, 3];
console.log(\`配列の長さ：\${arr.length}\`);
// 配列の長さ：3💡 変数入門で基礎を確認できます。
複数行の文字列
テンプレートリテラルは改行をそのまま含められます。
const html = \`
<div class="card">
<h2>タイトル</h2>
<p>内容</p>
</div>
\`;🔗 あわせてfetch入門もチェックしてみましょう。
まとめ
- ✅ バッククォート（
`）で文字列を囲む - ✅
$$変数で変数や式を埋め込める - ✅ 改行をそのまま含められる
- ✅
+での連結より読みやすく書ける
テンプレートリテラルを使うと、文字列操作がシンプルになります。レッスンでさらに実践的な使い方を学んでみましょう。
🚀 JavaScriptをレッスンで学ぼう！
このサイトのJavaScriptコースでは、テンプレートリテラルを使った実践的なプログラムをブラウザだけで学べます。無料・登録不要です。
JavaScriptコースを見る →