【入門編】テンプレートリテラルと型変換 – JavaScript実践ガイド

やあ、こんにちは。JavaScriptの海へようこそ。
コードを書いていると、「あれ、なんでこうなるの？」と首を傾げたくなる瞬間、ありますよね。特にJavaScriptは、驚くほど親切心から「気を利かせて」勝手に動いてくれることがあって、それが時に初心者の方を悩ませる迷宮の入り口になったりします。

今日は、そんなJavaScriptの「おせっかいで優しい性格」がよく表れる「テンプレートリテラルと型変換」という現象について、一緒に紐解いていきましょう。

—

JavaScriptで文字列を扱うとき、バッククォート（` `）で囲む「テンプレートリテラル」を使いますよね。
`Hello, ${name}!` のように書けるあれです。

実は、この `${ }` の中に入れるのは、ただの文字列だけではありません。数字だろうが、配列だろうが、何でも放り込めるんです。

const myAge = 25;
const message = `私は今年で${myAge}歳になります。`;

console.log(message); // 「私は今年で25歳になります。」と表示されます

ここで不思議に思いませんか？
`myAge` は数字（数値型）なのに、なぜ文字列の中に混ざってもエラーにならないのでしょうか？

—

実は、テンプレートリテラルの `${ }` の中には、「見えない通訳さん」が隠れています。

あなたが `${ }` に数字やオブジェクトを放り込むと、JavaScriptは自動的に、その中身を「文字列」という共通言語に翻訳してくれるんです。これを専門用語で「暗黙の型変換」と呼びます。

数字の `25` を渡すと、通訳さんは「あ、これは文字列として扱いたいんだね」と判断して、内部的に `25.toString()` という命令を実行します。
つまり、数字の `25` を、見た目そっくりな文字列の `”25″` に変身させているんですね。

お買い物に例えるなら、「手持ちの硬貨（数値）」を「レシート（文字列）」に印字して記録を残す作業のようなものです。硬貨そのままだと帳簿には貼れませんが、金額を紙に書けば記録できますよね。JavaScriptは、その変換を裏でサラッとやってくれているわけです。

—

この自動変換、便利すぎて甘えてしまいがちですが、たまに「えっ、そうなるの！？」という結果を返してくることがあります。特にオブジェクトを放り込んだときが要注意です。

const user = { name: “タロウ” };

// さあ、通訳さん、出番ですよ！
console.log(`今のユーザーは${user}です`);
// 結果：「今のユーザーは[object Object]です」

おっと！「タロウ」という名前が表示されると思いきや、見慣れない `[object Object]` という文字列が出てきました。

これは、「オブジェクトを文字列に変換しようとしたけど、どう書けばいいか分からなくて、とりあえず『これはオブジェクトだよ』としか伝えられなかった」という、通訳さんの降参のサインなんです。

こんなときは、通訳さんに任せきりにせず、自分で教えてあげましょう。`JSON.stringify()` という「中身を全部バラして文字列にする魔法」を使うのが一番の近道です。

const user = { name: “タロウ” };

// JSON.stringifyで、中身を分かりやすい文字列に変換してから渡す
console.log(`今のユーザーは${JSON.stringify(user)}です`);
// 結果：「今のユーザーは{“name”:”タロウ”}です」

—

JavaScriptが勝手にやってくれる変換は、最初は「魔法」のように見えますが、慣れてくると「なるほど、今このデータは文字列として扱われているんだな」と、コードの裏側が見えるようになってきます。

もし、思った通りの結果が出ないときは、「今、通訳さんは何をどう翻訳しようとしているのかな？」と一息ついて考えてみてください。

これさえ覚えておけば、もう怖いものはありません。
JavaScriptは、あなたのコードを少しでも動かしやすくしようと頑張ってくれているパートナーです。その「おせっかい」を理解してあげれば、あなたのフロントエンド・ライフはもっともっと楽しくなりますよ。

さあ、エディタを開いて、いろいろなデータを `${ }` の中に放り込んで実験してみてください。失敗しても、それはJavaScriptと仲良くなるための大事な一歩ですからね！