【入門編】加算演算子 (+) における暗黙の型変換 – JavaScript実践ガイド

やあ！JavaScriptの世界へようこそ。フロントエンドの現場で長年コードを書き続けていると、たまに「えっ、なんでこうなるの？」という不思議な挙動に出会うことがあるよね。

今日は、そんなJavaScriptの「お茶目だけどちょっと困る」一面、「加算演算子（+）による暗黙の型変換」についてお話しするよ。

「数値と文字列を足したら、なぜか計算されずにくっついちゃった！」なんて経験、一度はないかな？大丈夫、これは君が間違っているわけじゃない。JavaScriptが良かれと思ってやっている「お節介な変換」が原因なんだ。一緒に紐解いていこう。

—

JavaScriptは、とても空気が読める言語……いや、むしろ「空気を読みすぎて勝手に気を利かせてくれる」言語なんだ。

例えば、数値の `1` と文字列の `”2″` を足し算しようとしたとき。人間なら「1と2を足して3でしょ？」と思うよね。でも、コンピューターは「数字の世界」と「文字の世界」が混ざると迷ってしまう。

そのとき、JavaScriptはこう考えるんだ。
「片方が文字なら、もう片方も文字にして、仲良く並べてあげよう！」

これが、いわゆる「暗黙の型変換」の正体だよ。

想像してみてほしい。君がコンビニで「1個のりんご（数値：1）」と「『2』と書かれた値札（文字列：”2″）」をレジに持っていったとする。

JavaScriptは、もしどちらかが文字列だったら、もう片方を無理やり「文字列という箱」に詰め込んで、連結しちゃうんだ。これを「文字列連結」と呼ぶよ。

// 数値と数値なら、ちゃんと足し算できる
console.log(1 + 2); // 結果: 3

// 片方が文字列になると……
console.log(1 + “2”); // 結果: “12” （1が文字列の”1″に化けちゃう！）

// もっと複雑な例
console.log(“りんご” + 1 + 2); // 結果: “りんご12”
// 左から順に処理されるから、”りんご1″になって、そこに2がくっついて”りんご12″になるんだ。

さっきのコードで、なぜ `”りんご12″` になるのか不思議だよね。これはJavaScriptが「左から右へ」と順番に処理を進める性格だからなんだ。

1. `”りんご” + 1` が先に計算されて、`”りんご1″` という文字列ができる。
2. その結果に `+ 2` が計算されて、`”りんご12″` になる。

もしこれを「りんご3」にしたいなら、カッコを使って計算の優先順位を変えてあげる必要があるよ。

console.log(“りんご” + (1 + 2)); // 結果: “りんご3”
// カッコの中が先に計算されるから、意図通りになるね！

実務の現場では、APIから取得したデータが「数字のつもりが文字列だった」なんてことは日常茶飯事。「合計金額を出したいのに、数字がくっついて表示される！」というバグは、新人の頃に誰もが一度は通る道だよ。

そんな時は、「自分で型を変換する」という癖をつけると安心だ。

const price = “100”; // 文字列で届いてしまったデータ
const tax = 10;

// Number() を使って明示的に数値に変換する
console.log(Number(price) + tax); // 結果: 110

`Number()` で囲んであげれば、「これは数字として扱ってね！」とJavaScriptに明確に伝えることができる。これだけで、お節介な暗黙の型変換に振り回されることはなくなるはずだよ。

—

JavaScriptのこの挙動は、最初は戸惑うかもしれないけれど、慣れてしまえば「へえ、JavaScriptは本当に仲良く並べるのが好きなんだな」と愛着がわいてくるはず。

もしコードが期待通りに動かなくて悩んだら、まずは `console.log()` で中身を見てみて。「あれ？文字列になってないかな？」と確認するだけで、解決の糸口はすぐに見つかるよ。

君のプログラミングライフが、今日から少しだけ楽になりますように。またいつでも相談してね！