テンプレートリテラル

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • バッククォート ` で囲む、${expr} で変数や式を埋め込む
  • 改行をそのまま含められる、複数行文字列に便利
  • タグ付きテンプレート ─ tag... でカスタム処理 (SQL / HTML エスケープ等)
  • + 連結より読みやすく、現代 JS の標準

テンプレートリテラル とは

バッククォートを使った文字列の組み立て方を練習しよう。本レッスンでは、テンプレートリテラル の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

テンプレートリテラル

テンプレートリテラルは、バッククォート(``)で文字列を囲む構文です。文字列の中に変数や式を埋め込めます。

基本的な使い方

JavaScript

const name = "太郎"; const age = 25; // 従来の文字列結合 const msg1 = "私は" + name + "です。" + age + "歳です。"; // テンプレートリテラル const msg2 = `私は${name}です。${age}歳です。`;

${}の中には式も書けます。

JavaScript

console.log(`合計: ${100 + 200}円`); // "合計: 300円" console.log(`結果: ${score >= 60 ? "合格" : "不合格"}`);

複数行文字列

JavaScript

// テンプレートリテラルなら改行もそのまま const html = ` <div class="card"> <h2>${title}</h2> <p>${description}</p> </div> `;

この問題では、テンプレートリテラルを使って引数からプロフィール文字列を組み立てる関数を実装しましょう。

実務で遭遇するパターン

中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。

  • 動的な HTML / SQL ─ `<div>${name}</div>`、SQL は注入対策にタグ付きを使う
  • エラーメッセージ ─ `Invalid input: ${value} (expected: ${expected})`
  • ログフォーマット ─ `[${timestamp}] ${level}: ${msg}`
  • i18n のフォールバック ─ 翻訳が無いキーは `[${key}]` で表示

コードレビューで指摘されがちなポイント

PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。

  • 生のテンプレートで SQL を組み立て ─ SQL インジェクション。プレースホルダか専用ライブラリを使う
  • HTML 内で生スプレッド ─ XSS の温床、DOMPurify などでサニタイズ
  • 長すぎる埋め込み式 ─ ${a + b * c - calculateSomething()} は変数に出す
  • + 連結との混在 ─ コードベースで統一

パフォーマンス考慮事項

  • + 連結とほぼ同等 ─ V8 / SpiderMonkey で最適化
  • タグ付きテンプレートは関数呼び出し ─ ホットパスでは若干オーバーヘッド
  • String.raw でエスケープ抑制 ─ ファイルパス / 正規表現の組み立てに便利
  • 実行時評価 ─ 埋め込み式は毎回評価、結果が同じ場合は事前計算
この章のポイント

ここまでの要点 バッククォート + ${...} で文字列補間、改行も保持。タグ付きで安全な SQL / HTML、+ 連結より読みやすい。

よくある質問

Q. 実務ではどんな場面でこの知識を使いますか？

A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。

Q. コードレビューで指摘されやすいポイントは？

A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。

Q. 次に学ぶべき内容は何ですか？

A. Promise・async/await が理解できたら、fetch を使った API 連携、Web フレームワーク（React/Vue/SvelteKit）、ビルドツール（Vite/Webpack）に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。

次のレッスン

次は 三項演算子と短絡評価 で、バッククォートを使った文字列の組み立て方を練習しよう を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. テンプレートリテラル の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. テンプレートリテラル とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

入出力例

test-cases.txt

formatProfile("太郎", 25, "東京") → "太郎さん（25歳）は東京に住んでいます。" formatProfile("花子", 30, "大阪") → "花子さん（30歳）は大阪に住んでいます。" formatProfile("John", 20, "札幌") → "Johnさん（20歳）は札幌に住んでいます。" formatProfile("鈴木", 0, "横浜") → "鈴木さん（0歳）は横浜に住んでいます。"
main.js
main.js
学習モード

メモ

テンプレートリテラル

⌘S で保存