やあ。今日も今日とてコードレビューに追われてお疲れさん。
最近、後輩のコードを見ていて「おっ、いいじゃん」と思う瞬間が増えてきたんだけど、同時に「あー、まだ昔のクセが抜けてないな」と感じる部分もあるんだよね。その一つが、文字列の結合だ。
いまだに `’User: ‘ + userName + ‘ is logged in (‘ + count + ‘ items)’` なんてコードを見かけると、おじさんはちょっと切なくなる。シングルクォートやダブルクォートで文字列を繋ぎまくっていたあの頃の苦労はもう過去のものなんだよ。
今回は、ES2015（ES6）で導入されて以来、フロントエンド開発の標準装備となっている「テンプレートリテラル」について、基本からブラウザの裏側の動き、そして現場で本当に使える実践的なテクニックまで、徹底的に解説しよう。中級から一歩抜け出して、コードの「質」を上げたいなら、ここを完璧に押さえておく必要がある。
—
1. テンプレートリテラルとは何か？（基本のおさらい）
テンプレートリテラルは、従来の文字列リテラル（`’` や `”`）の制限を打ち破るために作られた、バッククォート（“ ` “）で囲む新しい文字列の定義方法だ。
最大の武器は、何と言っても `${}`（プレースホルダー） による式展開と、改行のそのままの保持だ。まずは基本のキを見てみよう。
// 従来の文字列結合（もう書かないでね）
const oldStyle = ‘こんにちは、’ + user.name + ‘さん。本日のカートには ‘ + cart.items.length + ‘ 点の商品があります。’;
// テンプレートリテラルを使ったモダンな書き方
const modernStyle = `こんにちは、${user.name}さん。本日のカートには ${cart.items.length} 点の商品があります。`;
これだけでもコードの視認性（リーダビリティ）が劇的に向上するのがわかるはずだ。文字列の中に変数を埋め込むというよりは、「文章の中に変数をスライドインさせる」感覚で書ける。
${} の中身は「変数」だけじゃない
ここが中級へのステップアップポイントだ。多くのジュニア層は `${}` の中には変数しか入れられないと思っているが、JavaScriptの「式（Expression）」であれば何でも書ける。
const price = 1280;
const taxRate = 0.1;
// テンプレートリテラル内で直接計算を行う例
const message = `お支払い総額（税込）: ${Math.floor(price (1 + taxRate))}円`;
console.log(message); // 「お支払い総額（税込）：1408円」
三項演算子だって埋め込める。
const role = ‘admin’;
const dashboardMessage = `ようこそ、${role === ‘admin’ ? ‘管理者’ : ‘ゲスト’}様`;
テンプレートリテラルの中は、立派なJavaScriptの評価コンテキストなんだ。これを使いこなせば、わざわざ事前に一時変数を用意してコードを汚す必要がなくなる。
—
2. 複数行（Multiline）文字列の美学
昔のJavaScriptでHTMLのテンプレートや長文のメッセージを組み立てようとすると、地獄のようなコードになっていたよね。
// 昔の悪夢：改行するたびにエスケープや結合が必要だった
const htmlOld = ‘
‘
‘ + title + ‘
\n’ +
‘
‘ + description + ‘
\n’ +
‘
‘;
改行文字の `\n` を入れ忘れたり、プラス記号が抜けてSyntaxErrorを踏んだり……。時間の無駄だった。
テンプレートリテラルを使えば、ソースコードに書いた改行やスペースがそのまま文字列として保持される。
const title = ‘フロントエンドの極意’;
const description = ‘JavaScriptの深淵を覗く’;
// テンプレートリテラルなら見た目そのままに複数行を定義できる
const htmlModern = `
${title}
${description}
`;
console.log(htmlModern);
/ 出力結果:
フロントエンドの極意
JavaScriptの深淵を覗く
/
ただし、ここで一つ実務的な注意点がある。テンプレートリテラルはインデント（スペースやタブ）も含めてそのまま文字列化する。
そのため、上の例だとHTMLの先頭に不要な空白のインデントが入ってしまう。SPAのコンポーネント内などで生のHTML文字列を組み立てる場合は、意図しないレイアウト崩れの原因になることがあるので、`.trim()`を挟むか、インデントの構造に少し気を配るのがプロの技だ。
// 実務で使う時は .trim() で前後の余計な空白を削るのが安全
const cleanHtml = `
${title}
`.trim();
—
3. ブラウザの裏側はどう動いているのか？（パフォーマンスの話）
さて、ここで少しエンジニアらしい深掘りをしよう。「テンプレートリテラルは便利だけど、従来の `+` 結合と比べてパフォーマンスはどうなの？」という疑問を持つのは、非常に健全で素晴らしい視点だ。
結論から言うと、現代のJavaScriptエンジン（V8、SpiderMonkey、JavaScriptCoreなど）において、パフォーマンスの差は実用上ほとんど無視できるレベルに最適化されている。
エンジンの最適化
JavaScriptエンジンは、テンプレートリテラルを解析する際、それがただの静的な文字列の結合なのか、動的な式を含んでいるのかをコンパイル時に判定している。
内部的には、V8などのエンジンは文字列の連結を効率的に行うための内部構造（Rope Stringsなど、メモリ上で巨大な文字列を直接コピーせずにつなぎ合わせる技術）を使って処理している。
昔は「`+`のほうが早い」なんて都市伝説もあったが、V8の進化スピードをナメてはいけない。今や人間の目で見分けられるような差は存在しない。むしろ、コードの可読性やメンテナンス性の向上というメリットのほうが圧倒的に大きいため、パフォーマンスを理由にテンプレートリテラルを避ける理由はゼロだと言い切っていい。
—
4. 現場で使える！実践的Tips & ベストプラクティス
最後に、俺が日々のコードレビューで「おっ、こいつ分かってるな」と唸る、実務直結のテクニックをいくつか授けよう。
Tips 1: ネストしたテンプレートリテラル
複雑な構造を作る際、テンプレートリテラルの中にさらにテンプレートリテラルを埋め込むこともできる。ただ、やりすぎると可読性が死ぬので、三項演算子と組み合わせる際は改行をうまく使おう。
const userList = [
{ name: ‘Alice’, active: true },
{ name: ‘Bob’, active: false },
];
const renderList = `
-
${userList.map(user => `
- ${user.name}
`).join(”)}
`.trim();
Arrayの `map` と `join(”)`、そしてテンプレートリテラルの組み合わせは、JSXや軽量なDOM生成の現場において基本中の基本のイディオムだ。絶対に体に染み込ませておいてほしい。
Tips 2: タグ付きテンプレート（Tagged Templates）の存在を知る
中級から上級へステップアップするなら、「タグ付きテンプレート」の存在は絶対に外せない。
これは、テンプレートリテラルの直前に「関数」を置くことで、文字列と式をパースしてカスタムな処理を行えるという、JavaScriptの隠し味のような機能だ。
// タグ関数の定義
function highlight(strings, …values) {
// strings: 静的な文字列の配列
// values: 埋め込まれた式（${}の中身）の配列
return strings.reduce((result, str, i) => {
const value = values[i] !== undefined ? `${values[i]}` : ”;
return `${result}${str}${value}`;
}, ”);
}
const name = ‘Taro’;
const age = 28;
// バッククォートの直前に関数名を置く（これがタグ付きテンプレート）
const output = highlight`名前は ${name} で、年齢は ${age} 歳です。`;
console.log(output);
// 出力: 「名前は Taro で、年齢は 28 歳です。」
実務でこれをイチから書く機会は多くないかもしれないが、CSS-in-JS（Styled ComponentsやEmotionなど）や、国際化（i18n）ライブラリの裏側では、この仕組みがバリバリ使われている。「あ、あのライブラリがやってる魔法の正体はこれだな」と裏側が透けて見えれば、君も立派なシニアの背中を捉えているはずだ。
—
まとめ
テンプレートリテラルは、単なる「書きやすくなった文字列結合」ではない。
コードの意図を正確に伝え、バグを生みにくくし、コンポーネント指向の現代フロントエンド開発において欠かせない思考のフレームワークの一部だ。
今日から、コードベースの古い `+` 結合を見かけたら、そっとテンプレートリテラルに書き換えるプルリクエストを送ってみてほしい。チームのコード品質が確実に一段階引き締まるはずだ。
それじゃあ、今日もいいコードを書こうぜ。何か詰まったらいつでも声をかけてくれ。
コメント