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

プラス記号（+）の地獄

「猫の手貸し」のツール内で、完成した画像データのファイルサイズ（KB）を画面に表示する処理を作っていました。昔のやり方だと、変数と文字を + 記号で繋ぎます。

const size = 150;

// 昔の書き方: クォーテーションとプラス記号がごちゃごちゃする
infoSize.innerText = size + " KB になりました";

変数が1つならまだ良いですが、複数になると「どこからどこまでが文字で、どこが変数か」が分かりづらくなり、よくエラーを出していました。

バッククォート（`）の魔法

モダンなJavaScriptでは、文字列をシングルクォーテーション（'）ではなく、バッククォート（`）で囲む「テンプレートリテラル」という機能が使えます。

これを使うと、文字列の中に ${変数名} という形で、直接変数を埋め込むことができるんです！

const size = 150;

// 今の書き方（テンプレートリテラル）
infoSize.innerText = `${size} KB`;

シェルスクリプトに似ている？

インフラエンジニアとしてLinuxのBashスクリプトをよく書くのですが、Bashの echo "${SIZE} KB" という書き方に非常に似ていて、直感的にスッと入ってきました。

ちょっとした機能ですが、コードが圧倒的に見やすくなり、バグも減る。言語の進化って素晴らしいなと感じた瞬間でした。