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

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

モダンな記法が登場する前、JavaScriptで文字列と変数を組み合わせるには + 演算子による連結がよく使われていました。配列を join() する方法などもあり、用途に応じて選べます。

【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. 式の評価と文字列の出力先を分ける

Bashの変数展開と似た見た目ですが、JavaScriptのテンプレートリテラルでは中の式をJavaScriptとして評価します。言語ごとの展開とエスケープの規則を混同しないようにします。

同じ文字列を作る場合でも、改行や余分な空白が含まれるか、数値を先に整形するかを確認してから使います。

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

• 記号の間違い： バッククォート（`）は、JISキーボードだと一般に「Shift + @」で入力できます。配列や入力環境によって異なるため、見た目が似たシングルクォートと区別します。
• XSSのリスク： ユーザー入力値をそのまま埋め込んで innerHTML に出力するのは危険です。基本は textContent を使いましょう。

値の整形と表示先を分ける

ファイルサイズの表示では、計算した数値を必要な桁に丸めてから文章へ埋め込みます。以下は１KiB＝1024バイトとして表示する例です。

const bytes = 1536;
const label = `${(bytes / 1024).toFixed(1)} KiB`;
console.log(label); // 1.5 KiB

const output = document.createElement('p');
const fileName = '<sample>.png';
output.textContent = `${fileName}：${label}`;
document.body.append(output); // ファイル名をHTMLとして解釈しない

通常のテンプレートリテラルは式を評価して文字列化します。改行や字下げも文字列の一部になるため、比較やファイル出力に使うときは不要な空白が入っていないか確認します。

変換後の保存名は、元名と用途の接尾辞から作る

画像変換ツールは、元の拡張子を除いたbaseNameと、加工内容を表す_convertedを組み合わせます。生成したBlobに名前を追加するのではなく、保存リンクのdownloadへ指定します。

downloadTrigger.download = `${baseName}_converted.jpg`;

これは本番の1行です。例えばbaseNameがcatなら保存名はcat_converted.jpgになります。拡張子の文字列を変更するだけでは画像形式は変わらず、JPEGへの書き出しはCanvas側で行います。画像変換の制作解説とFileとBlobで、データと保存名の役割を分けて読めます。

まとめ：実務での活用

「猫の手ツール」では、ステータス表示やファイル名の生成にこのテンプレートリテラルを多用しています。値を文字列へ入れる処理と、その文字列をHTML・URL・ファイル名として扱う処理は分けて考える必要があります。テンプレートリテラル自体に入力値を安全に変換する機能はありません。

参考資料

• MDN：テンプレートリテラル（別タブで開く）
• MDN：Node.textContent（別タブで開く）