こんにちは！JavaScriptの世界へようこそ。チーフアーキテクトの私です。
フロントエンドの現場に立っていると、JavaScriptを学び始めたばかりの仲間たちが、ある日突然、青い顔をしてデスクにやってくる瞬間があります。
「先輩！電卓を作ってるんですけど、足し算をしたはずなのに、`1 + 1` が `2` じゃなくて `11` になっちゃうんです！JavaScriptがバグってます！」
……ふふ、大丈夫ですよ。安心してください。あなたのパソコンは壊れていませんし、JavaScriptがバグっているわけでもありません。これはJavaScriptの仕様であり、世界中のエンジニアが一度は通る「お約束の洗礼」なんです。
今回は、この不可解な現象を引き起こす「加算演算子（`+`）の魔法」について、お買い物のシチュエーションに例えて、優しく解き明かしていきたいと思います。
—
なぜ `1 + ‘1’` は `11` になってしまうのか？
まずは、現場でよくある頭を抱える瞬間をコードで見てみましょう。
// 数字の 1 と、文字列の ‘1’ を足してみる
const result = 1 + ‘1’;
console.log(result); // 結果はなんと “11”！
「えっ、算数なら `2` だよね？」って思いますよね。
でも、JavaScriptくんの頭の中を覗いてみると、彼なりの「真面目なルール」がちゃんと働いているんです。
ここで登場するのが、今回の主役である「加算演算子（`+`）」です。
実はこの `+` という記号、JavaScriptの中では「二つの顔」を持っています。
1. 純粋な「足し算（数値の加算）」
2. 「文字のボンド（文字列の連結）」
この二つのうち、どちらを使うべきか、JavaScriptはいつも悩んでいます。そして、片方でも「文字列（`’1’` のようなシングルクォーテーションで囲まれたもの）」を見つけると、JavaScriptくんはこう判断します。
「おっ、片方が文字（テキスト）だな？ じゃあ、今回は足し算じゃなくて、文字をくっつける作業（文字列連結）を優先しようっと！」
これが、数値と文字列が混ざったときに文字列が優先されるメカニズムです。
—
身近な例えでお買い物に置き換えてみよう
これ、感覚的に分かりにくいので、身近な例えで考えてみましょう。
あなたはスーパーでのお買い物をしています。
カゴの中には、「本物のリンゴ（数値）」が1個入っています。そして、店員さんが「リンゴのシール（文字）」を1枚渡してくれました。
ここで、カゴの中身を「合算しよう」としたときどうなるでしょうか？
本物のリンゴに、ただペタッとシールを貼り付けたら、リンゴが2個に増えるわけではありませんよね。「リンゴ」と「シールの文字」が合体して、「リンゴシール付きのリンゴ（1個の物体）」がそこにある状態になります。
JavaScriptの `1 + ‘1’` もこれと同じです。
数字としての `1` と、文字としての `’1’` を足そうとすると、JavaScriptは「数値を文字にしちゃえ！」と勝手に変換（これを暗黙の型変換と呼びます）し、文字と文字をガッチリ接着剤でくっつけてしまうのです。
—
危険なトラップ：順番が変わるとどうなる？
さらに面白い（そして厄介な）ことに、この `+` 演算子は「左から右へ順番に計算する」というルールを持っています。
これがどういう悲劇を生むか、次のコードを見てみましょう。
// 数字、数字、文字の順番で足してみる
const resultA = 1 + 2 + ‘3’;
console.log(resultA); // さあ、いくつになるでしょう？
正解は `”33″` です。
「えっ、最後の `3` があるから、全部文字になって `123` になるんじゃないの？」と思いましたか？
違います。左からの順番を追ってみましょう。
1. まず、一番左の `1 + 2` が計算されます。ここは両方とも「数値」なので、純粋な足し算として処理され、結果は `3` になります。
2. 次に、その結果（`3`）と、右にある文字の `’3’` が `+` で結ばれます。つまり `3 + ‘3’` になります。
3. ここで「文字列」が登場するため、JavaScriptくんは文字列連結モードに切り替わり、`3` と `’3’` をくっつけて `”33″` にしてしまうのです！
では、一番最初に文字が来たらどうなるでしょうか？
// 最初が文字で、後ろが数字の場合
const resultB = ‘1’ + 2 + 3;
console.log(resultB); // これはいくつ？
正解は `”123″` です。
左から順に見ると、最初に `’1′ + 2`（文字＋数値）が行われるため、この瞬間にすべてが「文字列」として扱われるようになります。そのため、後ろの `3` も文字扱いになり、結果として `”12″` にさらに `3` がくっついて `”123″` になってしまうのです。
—
予期せぬ事故を防ぐための実用的な対策
「じゃあ、ユーザーがフォームに入力した数字（これらは基本すべて『文字列』として取得されます）を計算したいときはどうすればいいの？」
安心してください。プロたちが現場で使っている、安全確実な解決策があります。それは「あらかじめ明示的に数値に変換しておくこと」です。
JavaScriptには、文字を強制的に数字に変えてくれる便利な命令（関数）がいくつか用意されています。一番おすすめなのは、頭に `Number()` とつける方法、またはサクッと `+` を頭につける方法です。
// 画面の入力フォームから取得した「文字の ‘1’」だと思ってください
const inputFromUser = ‘1’;
// 【安全な対策】あらかじめ Number() で数値に変換する！
const safeResult = Number(inputFromUser) + 1;
console.log(safeResult); // バッチリ “2” になります！
また、もっと短く書きたいプロたちは、変数の前にプラスを置くだけの単項プラス演算子もよく使います。
const inputFromUser = ‘5’;
const smartResult = (+inputFromUser) + 5; // + をつけるだけで数値になる！
console.log(smartResult); // 10
—
まとめ
いかがでしたでしょうか？
JavaScriptの加算演算子における文字列優先の仕様は、初学者の頃は本当に頭を悩ませるポイントです。でも、裏にある「JavaScriptくんの優しい（大きなお世話な）気遣い」を知っていれば、もう怖くありません。
- 「数値と文字列を `+` で足すと、文字が優先されてくっついちゃうんだな」
- 「計算するときは、あらかじめ `Number()` で数字に直してあげよう」
この2つさえ心に留めておけば、あなたのお手元のコードはいつでも正確な計算をしてくれますよ。
Web制作やアプリ開発の道は、こうした小さな「なるほど！」の積み重ねです。つまずいたときは、「JavaScriptくんがんばってるな」と優しく見守ってあげてくださいね。あなたのコーディングライフを、チーフアーキテクトとしてこれからも応援しています！
コメント