こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
JavaScriptの勉強を始めてすぐの頃って、記号の連続に圧倒されたり、「これ、どうやって書くのが正解なの？」と手が止まったりしちゃいますよね。特に文字列をいじる作業（結合したり、変数を挟み込んだり）は、避けて通れない登竜門です。
昔のJavaScriptでは、文字列の中に変数を埋め込もうとすると、シングルクォート（`’`）やプラス（`+`）の記号だらけになって、もうコードがぐちゃぐちゃの迷路みたいになっていました。「あれ、どこのクォートを閉じ忘れたんだ…？」なんてデバッグで深夜に頭を抱えたのも、今となっては懐かしい思い出です。
でも、安心してください。現代のJavaScriptには、救世主である「テンプレートリテラル」が用意されています。
今回は、このテンプレートリテラルの基本から、式展開のスマートな使い方、そして実務でめちゃくちゃ助かる複数行の扱い方まで、一緒に優しく紐解いていきましょう！
—
1. テンプレートリテラルってなに？（基本の「き」）
これまで、JavaScriptで文字列を作るときは、シングルクォート（`’`）やダブルクォート（`”`）で文字を囲むのが定番でしたよね。
// 昔ながらの書き方
const name = “田中”;
const message = “こんにちは、” + name + “さん！”;
これだと、変数を挟むたびに `+` で文字列をブツ切りに繋ぎ合わせなきゃいけないので、見通しがすごく悪くなります。
ここで登場するのが、キーボードの「@」のあたりにある、あの斜めの点々――バッククォート（“ ` “）です。これを使って文字列を囲む仕組みを「テンプレートリテラル」と呼びます。
身近な例えでお話しますね
イメージとしては、「お絵描きの透明な下敷き（クリアファイル）」みたいなものです。
下敷き（バッククォート）のなかに、あらかじめベースの文章を書いておいて、必要な部分だけパカッと穴をあけて、そこに変数やデータをスポッと差し込めるような感覚です。
実際にコードを見てみましょう。
// テンプレートリテラルを使った書き方
const name = “田中”;
const message = `こんにちは、${name}さん！`;
console.log(message); // 出力: こんにちは、田中さん！
どうでしょう？ `+` 記号のジャングルから解放されて、ひと目で「あ、ここに名前が入るんだな」って分かりますよね。これが基本の形です。
—
2. `${}` の魔法：変数だけじゃない、式も入れられる！
テンプレートリテラルの最大の発明は、なんといっても `${ }`（ドル記号と波括弧） の中に、JavaScriptのコードを直接書けることです。これを「式展開（expression interpolation）」と呼びます。
初心者の方がよく誤解しがちなのですが、ここに入れられるのは単なる「変数」だけじゃありません。「ちょっとした計算」や「関数を呼ぶコード」なども、そのままその場で行えちゃいます。
お買い物のレシートをイメージしてみましょう。
// お買い物の合計金額をサクッと計算して埋め込む例
const applePrice = 120; // りんごの単価
const appleCount = 3; // 買う個数
const orangePrice = 150; // みかんの単価
const orangeCount = 2; // 買う個数
// `${}` の中でそのまま計算しちゃいます！
const receipt = `
本日のレシート
————————
りんご (${applePrice}円 × ${appleCount}個) = ${applePrice appleCount}円
みかん (${orangePrice}円 × ${orangeCount}個) = ${orangePrice orangeCount}円
————————
合計金額：${(applePrice appleCount) + (orangePrice orangeCount)}円 (税込)
`;
console.log(receipt);
このコードを実行すると、コンソールには綺麗に計算された金額入りのレシートが表示されます。
わざわざ事前に「計算用の変数」を外で用意しなくても、テンプレートリテラルの中でパパッとスマートに計算を済ませられる。これが実務でも本当に重宝するポイントです。
—
3. 改行がそのまま通じる！複数行文字列の感動
Web制作をしていると、「HTMLのまとまった断片をJavaScriptから組み立てて画面に出したいな」という場面によく遭遇します。
従来の書き方でコードの中で改行しようとすると、エラーになってしまうか、面倒な改行文字（`\n`）を書かなければなりませんでした。
// 昔のやり方（改行するだけで怒られちゃうので工夫が必要だった）
const oldCard = “
”
タイトル
\n” +
”
テキストが入ります
\n” +
“
“;
……うーん、息が詰まりそうですよね。コードの見た目も美しくありません。
でも、テンプレートリテラルなら、キーボードの「Enter」キーで実際に改行した通りに、そのまま文字列として認識してくれます。
// テンプレートリテラルなら見た目そのまま！
const title = “フロントエンドの極意”;
const description = “テンプレートリテラルは怖くない！”;
const cardHtml = `
${title}
${description}
`;
console.log(cardHtml);
エディタで書いた通りのインデントや改行がそのまま保持されるので、HTMLの構造が頭にすっと入ってきます。ビューのテンプレートをJavaScriptでちょこっとハックしたいときには、これがないともう仕事が進まないレベルの必須機能です。
—
4. 初学者がつまずきやすいポイントと「大丈夫ですよ」のフォロー
ここで、現場でよく見かける「あれ？」というポイントを先回りしてシェアしておきますね。
つまずきポイント①：バッククォート（“ ` “）とシングル（`’`）の見分けがつかない
キーボードの種類やフォントによっては、バッククォートがただの点に見えたり、シングルクォートと見分けがつかなくてエラーになることがあります。
「文字が斜めになっていない」「変数展開 `${}` がただの文字として表示されてしまう」というときは、大体バッククォートではなく、シングルやダブルクォートで囲ってしまっているのが原因です。
もし動かなかったら、まずは焦らず「あ、点々の向きと形を確認しよう」と見直してみてくださいね。
つまずきポイント②：`${}` の中の書きすぎに注意
「なんでも書けるから便利！」と言って、`${}` の中に複雑な条件分岐や長い処理を詰め込みすぎる人がたまにいます。
気持ちはすごく分かるのですが、これやりすぎるとコードが逆に読みにくくなります。テンプレートリテラルの中は、あくまで「変数の埋め込みや簡単な計算」にとどめて、複雑な処理はあらかじめ外側の変数に代入しておくのが、プロっぽく読みやすいコードを書くコツです。
—
まとめ
いかがでしたでしょうか？
- バッククォート（“ ` “）で文字列を囲む
- `${ }` のなかに変数や計算式をそのまま書ける
- 改行やインデントもそのままキレイに反映される
テンプレートリテラルは、一度その快適さを知ってしまったら、もう昔の書き方には戻れなくなるほど強力で優しい機能です。
最初は記号の打ち間違いなどでエラーが出るかもしれませんが、それは誰もが通る道。「あ、今日も成長してるな」と気楽に捉えて、まずは自分のエディタで今日紹介したコードをコピーして、コンソールを覗いてみてくださいね。
あなたのJavaScriptライフが、少しでも楽しく、軽やかになりますように！
コメント