テンプレートリテラル
テンプレートリテラル とは
${変数} で値を埋め込み、改行や複数行も自然に扱える文字列を組み立てる。本レッスンでは、テンプレートリテラル の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
テンプレートリテラル
変数を含む文章を組み立てるとき、+ でつなぐ書き方はすぐに読みにくくなります。JavaScript の テンプレートリテラル はバッククォート ` で囲んだ文字列の中に ${式} を埋め込める便利な書き方です。文字列の連結や、改行を含む文章を、すっきり書けるようになります。
このレッスンでは、まず 2 つの基本 だけをしっかり覚えます。1 つ目は `${変数名}` で値を埋め込む書き方、2 つ目は 複数行の文字列 をそのまま書ける機能です。応用機能は最後に一言だけ触れる程度に留めます。
ポイント
'でも"でもなく バッククォート`を使うのがテンプレートリテラルの目印です。
基本の書き方
書式は `テキスト ${式} テキスト` のとおりです。${ } の中には変数だけでなく、任意の 式 を書けます。計算式や関数呼び出しも埋め込めます。
JavaScript
const name = "なお";
const age = 30;
const msg = `${name} さんは ${age} 歳です`;
console.log(msg); // "なお さんは 30 歳です"
// 式も埋め込める
const price = 1000;
const total = `合計 ${price * 1.1} 円`;
console.log(total); // "合計 1100 円"複数行の文字列をそのまま書ける
通常の文字列で改行を表現するには \n を書く必要がありますが、テンプレートリテラルは ソースコード中の改行をそのまま 文字列に含めます。HTML やメール本文のように複数行のテキストを書くときに圧倒的に読みやすくなります。
JavaScript
const html = `
<div class="card">
<h2>${name}</h2>
<p>年齢 ${age}</p>
</div>
`;
console.log(html);インデントを揃えると、出力にもそのインデントが含まれます。普段の用途ではこれで十分です。
Before / After で連結との違いを見る
JavaScript
// Before + で連結 引用符の切り替えが面倒
const before = "こんにちは " + name + " さん 年齢は " + age + " 歳";
// After テンプレートリテラル
const after = `こんにちは ${name} さん 年齢は ${age} 歳`;テンプレートリテラルは引用符の切り替えがなく、文章の流れがそのまま読めます。チームコードでもレビューで「ここはテンプレリテラルに直しましょう」と提案されることが多い表記です。
値が自動で文字列化される
${value} の中に数値や真偽値、null などを入れると、String(value) 相当の変換が自動で走ります。null も "null" という文字列になるので、エラーになる心配はありません。
JavaScript
const items = [1, 2, 3];
console.log(`${items}`); // "1,2,3"
console.log(`${null}`); // "null"
console.log(`${{a:1}}`); // "[object Object]" 注意フロー
よくある間違い
1 つ目は シングルクォートやダブルクォートで囲む ミスです。'${name}' は文字 ${name} がそのまま入った文字列で、変数として展開されません。バッククォートで囲む必要があります。2 つ目はオブジェクトをそのまま埋め込んで "[object Object]" になるパターンです。中身を見たいなら JSON.stringify(obj) を使います。
注意
+で書いたコードも動きますが、引用符の付け替えが増えるとミスの温床になります。慣れるまでは少し意識して`${変数}`の形を選んでみましょう。
補足 もっと先の話
次の機能は このレッスンでは覚えなくて OK です。「こういうものもある」程度に流し読みしてください。
- タグ付きテンプレート —
tag`Hello ${name}`の形で関数を呼び出し、テンプレートを加工できます。graphql-tagやstyled-componentsで使われます String.raw— エスケープ前の生文字列を取り出す組み込みタグ関数です- HTML 埋め込み時の XSS 対策 — ユーザー入力を DOM にそのまま流すと脆弱性になるため、表示時のエスケープが必要です
ヒント まずは
`${変数}`の形と、改行をそのまま書ける性質。この 2 つだけで日常のコーディングは十分カバーできます。
やってみよう
名前 name と年齢 age を受け取り、「○○ さんは ○○ 歳です」 という文字列を返す関数 introduce を作ってください。`${name} さんは ${age} 歳です` の形で書くのが想定解です。
よくある質問
Q. ブラウザと Node.js で動作は変わりますか？
A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。
Q. ES6 以降の新機能は使っても大丈夫ですか？
A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。
Q. TypeScript に進む価値はありますか？
A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。
次のレッスン
次は 再代入できない const を活用 で、${変数} で値を埋め込み、改行や複数行も自然に扱える文字列を組み立てる を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- テンプレリテラル の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. テンプレリテラル とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- テンプレートリテラル ` を使って文字列を組み立てる
- ${name} と ${age} を埋め込む
- 「{name} さんは {age} 歳です」のフォーマットで返す
入出力例
test-cases.txt
introduce("なお", 30) → "なお さんは 30 歳です"
introduce("Tom", 25) → "Tom さんは 25 歳です"
introduce("Baby", 0) → "Baby さんは 0 歳です"