05. テンプレートリテラルで
文字列の結合が劇的に楽に

1. プラス記号（+）による文字列結合の地獄

モダンな記法が登場する前、JavaScriptで文字列と変数を組み合わせるには + 演算子を使うしかありませんでした。

【Before】クォーテーションとプラスが混在する古い書き方

const size = 150;
const format = "PNG";

// 文字列を閉じて、プラスで繋いで、また開いて...
const message = "処理が完了しました。サイズは " + size + " KB、形式は " + format + " です。";

console.log(message);

変数が1つならまだ耐えられますが、複数が絡み合ってくると「どこまでが文字列で、どこが変数か」を一目で判断するのが極めて難しくなります。

2. テンプレートリテラル：バッククォート（`）の魔法

この問題を解決したのが テンプレートリテラル です。文字列を囲む記号を バッククォート（`） に変えるだけで、文字列の中に ${変数名} という形式で、直接変数を埋め込めるようになります。

【After】テンプレートリテラルによる現代的な書き方

const size = 150;
const format = "PNG";

// 今の書き方: 変数をそのまま文章の中に流し込める
const message = `処理が完了しました。サイズは ${size} KB、形式は ${format} です。`;

console.log(message);

文章の構造を崩さずに変数を配置できるため、コードの可読性が圧倒的に向上しました。

3. マルチライン（複数行）も自由自在

これまで文字列を改行させるには \n を手動で挟む必要がありましたが、テンプレートリテラルなら、コード上で改行すればそのまま出力にも反映されます。

const newHtml = `
<div class="box">
  <p>こんにちは</p>
</div>
`;

4. インフラエンジニアが感じる「親和性」

私はインフラエンジニアとしてLinuxのBashスクリプトをよく書くのですが、このテンプレートリテラルはBashの変数展開（echo "${VAR}"）に非常に似ています。

この直感的な操作感がフロントエンドの世界でも当たり前になったことは、バックエンドやインフラ出身のエンジニアにとっても、学習コストを下げる大きなメリットだと感じました。

5. 注意点：初心者がハマりやすいポイント

• 記号の間違い： バッククォート（`）は、JISキーボードだと「Shift + @」の位置にあります。
• XSSのリスク： ユーザー入力値をそのまま埋め込んで innerHTML に出力するのは危険です。基本は textContent を使いましょう。

まとめ：実務での活用

「猫の手ツール」では、ステータス表示やファイル名の生成にこのテンプレートリテラルを多用しています。より美しく、より堅牢なコードを目指すなら、このバッククォートの記法を使いこなすことが不可欠です。