ひな姉と学ぶJS!もう「+」の嵐にサヨナラ?テンプレートリテラル入門

登場人物
・天野 陽菜（あまの ひな）：自社サービス開発企業に勤めるフロントエンドエンジニア（29歳）。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。

・ 後輩ちゃん：JavaScriptを学び始めた初心者。疑問を持ちつつも、天野先輩の解説で理解を深めていく。

今回のテーマは、「文字列」をもっと使いやすく！

ひな姉、こんにちは！今日もよろしくお願いします！

こんにちはー！今日も元気に頑張ろうね!
今回のテーマは、文字列をもっと使いやすく！だよ。
後輩ちゃんはJavaScriptで変数の値と文字列をくっつけたい時って、どうしてる？

えっと、プラス記号（+）でつなげてます。でも、変数が多くなると、プラスがいっぱい並んでちょっと見づらいなーって思うこともあります。

うんうん、分かるよー。特に長い文章の中に変数をたくさん入れたい時とか、改行を入れたい時とか、結構大変だったりするよね。
今日は、そんな文字列操作をもっと直感的でスッキリ書けるようにする『テンプレートリテラル』っていう秘密兵器を紹介するよ！

秘密兵器！なんですかそれ、すごく気になります！

解説
今回のテーマはテンプレートリテラルです。
後輩ちゃんのように毎回文字連結を+で行うと、””や+が増えてしまってとても見づらいコードになってしまいます。
今回紹介するテンプレートリテラルを使いこなせば、すっきりとしたコードを書けるようになりますよ！

これまでの文字連結を思い出してみよう

例えば、ユーザーの名前と年齢を表示するメッセージを作りたいとするよ？
今までのやり方だと、こんな感じかな。

const username = "山田";
const age = 30;
const message = "こんにちは、" + username + "さん。あなたは" + age + "歳ですね。";
console.log(message);

はい、こんな感じです。クォーテーションとプラス記号がたくさん・・・

そうだよね。
もし、ここに改行を入れたいと思ったら、\n を使ったりして、さらに複雑になっちゃう。
これがテンプレートリテラルを使うと、劇的に見やすくなるんだ。

文字列連結の救世主!テンプレートリテラルの基本的な使い方

じゃーん！これがテンプレートリテラルを使った書き方だよ！

const userName = "山田";
const age = 30;
const messageLiteral = `こんにちは${userName}さん。あなたは${age}歳ですね。`;
console.log(messageLiteral);

わ！全然違いますね！クォーテーションが、なんか変わった記号になってるし、プラス記号もなくなってる！

その通り！テンプレートリテラルは、シングルクォート（'）やダブルクォート（"）の代わりに、バッククォート（`）で文字列全体を囲むんだ。
そして、文字列の中に変数を埋め込みたい時は、${} で変数を囲ってあげるだけ。すっきりしたでしょ？

バッククォート…キーボードのどこにあるんだろう？ あ、Shift押しながら@マークのところですね！ ${userName} って書くだけでいいんだ。これは分かりやすいです！

そうそう！慣れると本当に便利だよ!
もうプラス記号の数え間違いとか、クォーテーションの閉じ忘れで悩むことも減るはず。

解説
文字列をバッククォート(`)で囲み、${}の中に変数を入れることで、文字列と変数を連結することができます。
私も初心者の頃は間違っていたのですが、シングルクォーテーション(‘)とは別物なので、注意が必要です！

テンプレートリテラルの便利な機能、もっと知りたい！

テンプレートリテラルのすごいところは、これだけじゃないんだよ。
まず、改行がそのまま文字列に反映されるの！

const profile = `名前:山田太郎
職業:エンジニア
趣味:読書`;
console.log(profile);

え！ \n を書かなくても、見たまま改行されるんですか？
これは便利すぎます！今まで一行で書くのが大変だったHTMLとかも書きやすくなりそう。

その通り！HTMLのテンプレートを作る時とかに大活躍するよ。
それにね、${} の中には、変数だけじゃなくて式も書けるんだ。

const price = 1000;
const taxRate = 0.1;
const messageTax = `商品の税込価格は、${price * (1 * taxRate)}円です。`;
console.log(messageTax);//商品の税込価格は、1100円です。

おおー！計算結果も直接埋め込めるんですね！わざわざ別の変数を用意しなくていいんだ！

そうなんだよ。簡単な計算なら、そのまま書けちゃうからコードも短くなるよね。
まるで、アイテム合成みたいに、必要な素材をその場で組み合わせて新しいものを作り出す感じかな。

解説
テンプレートリテラル内で改行した文章は、そのまま改行されて表示されます。
通常は改行を表す\nを入力しますが、入力しなくていいのでシンプルなコードになります。
また計算式を挿入することもできるため、計算結果を直接HTMLに反映したい時も便利です。

テンプレートリテラルでこんなことも！実践的な使い方

例えば、ユーザー情報のリストがあって、それを元にHTMLのリストを作りたい時とか、テンプレートリテラルは本当に力を発揮するよ。

const users = [
{id:1, name:"佐藤"},
{id:2, name:"鈴木"},
{id:3, name:"高橋"}
];

let userListHtml = "<ul>\n";
users.forEach(user => {
userListHtml += `<li>ID:${user.id}、名前:${user.name}</li>\n`;
});
userListHtml += "</ul>";

console.log(userListHtml);
/*
出力結果：
<ul>
  <li>ID: 1, 名前: 佐藤</li>
  <li>ID: 2, 名前: 鈴木</li>
  <li>ID: 3, 名前: 高橋</li>
</ul>
*/

解説
usersという配列に入っている要素を、ForEachでループさせています。
テンプレートリテラルでusersのバリュー(idとnameに対応している値)を挿入することで、IDと名前が入ったリストのHTMLを生成しています。

わあ、HTMLの構造がすごく分かりやすいですね！ <li> タグの中に変数を埋め込むのが、こんなに簡単になるなんて。

でしょ？ forEach とか map みたいな配列メソッドと組み合わせると、動的なコンテンツ生成がすごく楽になるんだ。もう、文字列連結のためにシングルクォートとダブルクォートを使い分けたり、プラス記号の抜け漏れを心配したりする手間が大幅に減るよ。

今回のまとめ:テンプレートリテラルを使いこなそう！

今日のポイントをまとめると…

• テンプレートリテラルは、バッククォート（`）で文字列を囲むよ！
• 文字列の中に変数を埋め込む時は、${変数名や式} の形で書ける！
• 改行も見たまま反映されるから、複数行の文字列がすごく書きやすい！
• HTMLのテンプレート作成とか、動的な文字列生成にとっても便利！

どうだったかな？テンプレートリテラル、使ってみたくなった？

はい！すごく便利そうなので、これから積極的に使っていきたいです！
特に改行が楽なのと、変数の埋め込みが分かりやすいのが気に入りました。

うんうん、ぜひ使ってみて！最初はバッククォートの入力にちょっと戸惑うかもしれないけど、すぐに慣れると思うよ。これでまた一つ、後輩ちゃんのJavaScriptスキルがレベルアップしたね！何か分からないことがあったら、いつでも聞いてね。

ひな姉、今日もありがとうございました！すごく分かりやすかったです！

どういたしまして！また次回、新しいことを一緒に学んでいこうね。それじゃあ、またね！