【入門編】 valueOfとtoStringの優先順位と呼び出し順序 – JavaScript実践ガイド

JavaScriptの「型」の世界へようこそ！
フロントエンドの現場でバリバリコードを書いていると、時々「あれ、なんでこの数字と文字を足したらこうなるんだっけ？」という不可思議な現象にぶつかりますよね。

初心者の方ならなおさら、「JavaScriptって勝手に型を変えてくれるから便利だな〜」と思っていた矢先に、急に意図しない挙動（[object Object]が出現するなど！）に悩まされ、「もういやだ！」と画面をそっと閉じたくなる夜もあるはずです。大丈夫ですよ、その泥臭い「なんでやねん！」の壁は、すべてのエンジニアが通る道です。

今日は、そんなJavaScriptの裏側でこっそり行われている「お買い物の手続き」のような仕組み、`valueOf`と`toString`の優先順位と呼び出し順序について、一緒に優しく紐解いていきましょう！

—

1. JavaScriptの「変身の魔法」：型変換の裏側

私たちが普段何気なく書いているコードで、JavaScriptは裏でこっそり「数字として扱いたいな」「文字として扱いたいな」と判断し、オブジェクトをプリミティブ（生データ：数値や文字列など）に変換しています。

たとえば、お財布の中に「お買い物券（オブジェクト）」が入っているとします。
レジでお金を払うとき、店員さんは「このお買い物券、そのままじゃ使えないから、現金か、商品名に換えてくださいね」と私たちにお願いしますよね。

JavaScriptがオブジェクトを文字列や数値に変えたいとき、この「換金」の相談を持ちかけるのが、オブジェクトの心臓部にある`valueOf`と`toString`という2つの特別なメソッドなのです。

`valueOf`：できることなら「数値（プリミティブな値）」になりたがる職人気質なメソッド。
`toString`：「文字列」として自己主張したいお喋りなメソッド。

この2人、実はどちらも「俺が先に変身してやるぜ！」とスタンバイしているのですが、状況によってどちらが先に声をかけられるかが厳密に決まっています。

—

2. どっちが先？呼び出し順序のリアル

JavaScriptが「おい、このオブジェクトを何とかしてくれ！」と頼まれたとき、コンテキスト（文脈）によってその優先順位がガラリと変わります。

基本のルールをざっくり言うと、こうです。

1. 数値にしたいとき（四則演算や比較など）

まず `valueOf()` を試す。
それでもダメなら `toString()` を試す。
両方ダメならエラー！

2. 文字列にしたいとき（テンプレートリテラルや `alert` など）

まず `toString()` を試す（一部例外あり）。
それでもダメなら `valueOf()` を試す。
両方ダメならエラー！

百聞は一見にしかず。実際にコードを書いて、この2人がどう動いているのか覗いてみましょう。

—

3. 実践！コードで見る優先順位のドラマ

ご自身のブラウザのコンソールや、お使いのエディタに以下のコードを貼り付けて試してみてください。

// 特製のお財布オブジェクトを作ってみます
const magicWallet = {
// 数値化したいときに呼ばれるお仕事
valueOf: function() {
console.log(“【valueOf】が呼ばれました！数字になりたいです！”);
return 1000; // 1000円札のイメージ
},

// 文字列化したいときに呼ばれるお仕事
toString: function() {
console.log(“【toString】が呼ばれました！文字になりたいです！”);
return “お財布の中身”;
}
};

// — 実験1：数値として扱ってみる（足し算） —
console.log(“— 実験1：数値への変換 —“);
const resultNumber = magicWallet + 500;
// ここでは「足し算」なので、JavaScriptは数値を求めています。
console.log(“結果:”, resultNumber);
// 出力はどうなるでしょうか？ console.logをチェック！

この「実験1」を動かすと、コンソールには次のように表示されます。

1. `【valueOf】が呼ばれました！数字になりたいです！`
2. `結果: 1500`

なんと、`valueOf`が真っ先に呼ばれ、返ってきた「1000」を使って `1000 + 500 = 1500` を華麗にクリアしてしまいました！`toString`の出る幕は今回はありませんでしたね。

—

では、文字列にしたいときは？

今度は、このお財布を文字列として扱ってみましょう。

// — 実験2：文字列として扱ってみる —
console.log(“— 実験2：文字列への変換 —“);
const resultString = `今日のラッキーアイテムは ${magicWallet です！}`; // ※テンプレートリテラル
// わかりやすく文字列と結合してみます
const message = “今日の持ち物は：” + magicWallet;
console.log(“メッセージ:”, message);

この場合、JavaScriptは「文字として結合したいな」と思うので、優先順位がガラリと変わります。

1. まず `toString()` が呼ばれる。
2. 文字列が返ってこなければ `valueOf()` にバトンタッチする。

今回は `toString` が `”お財布の中身”` を返してくれるため、`”今日の持ち物は：お財布の中身”` という仲良しな文字列が完成します。

—

4. 現場でありがちな「罠」と温かいアドバイス

実務でコードを書いていると、この仕組みを知らないがために、こんなバグに頭を抱えることがあります。

> 「あれ、なんかオブジェクトをそのまま足し算したら `[object Object]500` みたいに変な文字列結合になっちゃったぞ……？」

もしオブジェクトに `valueOf` が定義されていない場合、JavaScriptは「しょうがないな、じゃあ `toString` で文字にでもしとくか！」と、自動的にフォールバック（代わりの処理）を行います。この優しさが、時にはバグの原因になることもあるのです。

つまずいたときの処方箋：

「予期せぬ型変換が起きているな」と感じたら、コンソールで `console.log(typeof target)` や `console.log(target.valueOf())` を叩いて、今その子がどんな状態なのかを一つずつ裸にして確認してあげてください。
焦る必要は全くありません。一つひとつのオブジェクトが「私、数字になりたいんです」「いや、私は文字がいいです」と主張しているストーリーを頭に思い浮かべると、コードの動きが急に愛おしく見えてきますよ。

—

まとめ

今回は、`valueOf` と `toString` の呼び出し順序と優先順位について、お買い物の例えを交えてお話ししました。

数値コンテキストでは、まず `valueOf` が主役。
文字列コンテキストでは、まず `toString` が主役。
どちらが呼ばれても、最終的にプリミティブな値にたどり着けばJavaScriptの勝利！

JavaScriptの型変換は一見気まぐれに見えますが、実はきちんとしたルールの上で動いています。この仕組みが頭の片隅にあると、これからのコーディングで思いがけないバグに出会っても、涼しい顔でスマートに対処できるようになりますよ。

それでは、また次回のJavaScriptの深掘り記事でお会いしましょう！あなたのフロントエンドライフが、もっと楽しく、もっと快適になりますように。