JavaScriptを書き始めたばかりの頃って、コードを書いていて「えっ、なんでこうなるの！？」と頭を抱えたくなりませんか？
特に、画面から取得した数字と、あらかじめ用意しておいた数字を足そうとしただけなのに、ぜんぜん違う結果になってしまったり……。私は何度もその罠にハマり、夜な夜なコーヒーを片手にディスプレイを睨みつけていました（笑）。
JavaScriptには、私たちが「これくらい普通わかるでしょ！」と言いたくなるような気遣い……ではなく、「良かれと思って勝手に裏で形を変えちゃう」というお節介な機能があります。これが、いわゆる「暗黙の型変換（タイトルのやつです！）」です。
今回は、その中でも特にみんなが躓きやすい「算術演算子（`+`, `-`, “, `/`）」の不思議な挙動について、お買い物のシチュエーションを例にしながら、一緒に優しく紐解いていきましょう。大丈夫、ひとつずつ見ていけば絶対に怖くありませんよ！
—
1. なぜJavaScriptは勝手に変身しちゃうの？
JavaScriptは、とても「柔軟な」言語です。C言語やJavaのような厳格な先輩と違い、「まぁ、文字列と数字が混ざってても、よしなに計算してあげるよ！」と、空気を読みすぎるクセがあります。
この「空気の読み方」には、実はハッキリとしたルールがあります。
特に私たちを混乱させるのが、「足し算（`+`）」と、「引き算・掛け算・割り算（`-`, “, `/`）」の扱いの違いです。
ここから先は、この違いを身近な「お買い物」に例えて考えてみましょう！
—
2. 足し算（`+`）の裏切り：文字の「お友達ごっこ」に注意
まずは、みんな大好き（？）な足し算（`+`）のお話です。
足し算の記号（`+`）は、数字の計算だけでなく、「文字と文字をくっつける（文字列結合）」という、もう一つの大切な役割を持っています。JavaScriptくんは、この`+`を見たときに、「あ、文字の匂いがするぞ！じゃあみんなで手を繋いで、文字としてくっついちゃおう！」という優先順位をとるのです。
例え話：レジでの「値札シール」
想像してください。
あなたがスーパーのレジで、リンゴの「文字が書かれた値札シール（文字の `”100″`）」と、ミカンの「文字が書かれた値札シール（文字の `”50″`）」を拾ったとします。
これを足し算（`+`）で計算しようとすると、JavaScriptくんはこう考えます。
「おっ、両方とも文字の値札だね！じゃあ、足し算して『150円』にするんじゃなくて、『100』と『50』を横にペタッと並べて『10050』にしよう！」
……いや、そうじゃないんだよ！と突みたくなりますよね。これが足し算のトラップです。
// 数字と文字の足し算（文字列結合が勝っちゃうパターン）
const applePrice = “100”; // 文字列としての「100」
const orangePrice = 50; // 数値としての「50」
const totalPrice = applePrice + orangePrice;
console.log(totalPrice); // 画面にはなんと「10050」が表示されます！
console.log(typeof totalPrice); // 結果のデータ型は「string（文字列）」になっています。
「あれっ、計算してくれない！」とパニックになる瞬間がまさにこれです。JavaScriptは、片方にでも「文字列」が含まれていると、もう片方も強制的に文字列に引きずり込んで、文字同士をくっつけてしまうのです。
—
3. 引き算（`-`, “, `/`）の男らしさ：数字ならお任せあれ！
一方で、引き算（`-`）、掛け算（“）、割り算（ `/` ）のグループは、足し算とはまったく違う性格をしています。
これらの記号には、文字をくっつける機能（文字列結合）がそもそもありません。そのため、JavaScriptくんはこう判断します。
「おっ、引き算（または掛け算・割り算）の依頼だな！じゃあ、この中身はぜんぶ『数字』として計算しなきゃいけないんだな！」
例え話：電卓に打ち込むとき
あなたが電卓を叩くとき、「100」という文字を見たら、無意識にそれを「数字の100」として認識してボタンを押しますよね。引き算たちの世界では、まさにこの「電卓のノリ」が強制されます。たとえ中身が文字の形をしていても、無理やり数字に変換して計算をやり遂げようとするのです。
// 引き算・掛け算・割り算の場合
const applePrice = “100”; // 文字列だけど…
const orangePrice = “50”; // こっちも文字列だけど…
// 引き算をしてみる
const subResult = applePrice – orangePrice;
console.log(subResult); // ちゃんと「50」という数値になります！
// 掛け算をしてみる
const mulResult = “10” “2”;
console.log(mulResult); // ちゃんと「20」になります！
すごいですよね。`-` や “ や `/` を使った途端、JavaScriptは「文字として入っていた数字」を、自発的に「本当の数値」にパパッと変換して計算してくれるんです。これを専門用語で「暗黙の型変換（数値への変換）」と言います。
—
4. やっちゃいけない「危険な裏ワザ」と実務での対策
ここまで読んで、「じゃあ、引き算の性質を利用して、文字の数字をパパッと数値に変換しちゃえば楽じゃん！」と思ったそこのあなた。
鋭いですが、実務の現場ではそれはあまりオススメしません！（コードを書いた半年後の自分や、一緒に働くチームのメンバーが「これ何の呪術！？」と泣いてしまいます）。
// 危険なテクニック（非推奨）
const strNumber = “50”;
const realNumber = strNumber – 0; // わざわざ0を引いて数値に変換する
// ※動きはしますが、コードの意図が読みにくいため現場では嫌われます
実務ではどう書くべき？（明日から使える安全策）
私たちが現場でバグを防ぐためにやっているのは、「型変換をJavaScriptの気まぐれに任せず、人間が明示的に指示する（明示的型変換）」ということです。
数値にしたいときは、`Number()` や `parseInt()`、あるいはもっとシンプルにプラスを頭につける（単項プラス）といった安全な方法を使います。
// 画面から取得した値（例：inputタグの値など）は、大体「文字列」です
const userInput = “123”;
// 1. Number() を使って、安全にキッチリ数字に変換する（おすすめ！）
const safeNumber = Number(userInput);
// 2. あるいは、頭に「+」をつけるスマートな書き方（現場でもよく使われます）
const smartNumber = +userInput;
// これなら足し算しても安心！
const correctTotal = safeNumber + 50;
console.log(correctTotal); // ちゃんと「173」になります！
—
5. まとめ
いかがでしたでしょうか？ 今回のポイントをギュッと凝縮して振り返ってみましょう。
1. 足し算（`+`）は、文字列の匂いを嗅ぎつけると「みんなで文字として手をつなごうぜ！」と文字列結合を優先するお調者。
2. 引き算・掛け算・割り算（`-`, “, `/`）は、「計算といえば数字だろ！」と、文字列を無理やり数値に変換して計算してくれる男気のあるヤツ。
3. でも、JavaScriptの気まぐれに頼るより、`Number()` などを使って人間が意図をハッキリ伝える（明示する）のが、バグを出さないプロの知恵！
プログラムが予期せぬ動きをしたときは、「あ、今JavaScriptくんが勝手に気を利かせちゃってるな？」と、裏側のストーリーを想像してあげてくださいね。
最初は誰もが通るこの「型」の迷宮。躓いたときはいつでもこの記事に戻ってきて、整理し直してみてください。あなたのコーディングライフを、心から応援しています！
コメント