JavaScript | ラッパーオブジェクトとプリミティブ型

JavaScript

2020.01.052025.10.10

ラッパー型 → プリミティブ変換安全ガイド
一言で言うと

ラッパー型 → プリミティブ変換安全ガイド

（Number / String / Boolean / Object の安全変換対応表）

基本原則（覚えておく3行ルール）

原則	説明
「new」を使わない	`new Number()` / `new String()` / `new Boolean()` はオブジェクトを返す
「関数呼び出し」で変換する	`Number()`, `String()`, `Boolean()` はプリミティブを返す
`valueOf()` または `toString()` で明示変換できる	ラッパーオブジェクトにも定義されており安全

1. Number系変換

安全な変換

const numObj = new Number(42);

// ✅ 1. Number() 関数で変換（最も推奨）
const n1 = Number(numObj);   // 42

// ✅ 2. valueOf() メソッドで変換（中身の数値を直接取得）
const n2 = numObj.valueOf(); // 42

// ✅ 3. 暗黙変換（演算子利用でもOK）
const n3 = numObj + 0;       // 42

const numObj = new Number(42);

// ✅ 1. Number() 関数で変換（最も推奨）
const n1 = Number(numObj);   // 42

// ✅ 2. valueOf() メソッドで変換（中身の数値を直接取得）
const n2 = numObj.valueOf(); // 42

// ✅ 3. 暗黙変換（演算子利用でもOK）
const n3 = numObj + 0;       // 42

JavaScript

危険なパターン

const numObj = new Number(0);

if (numObj) {
  console.log("真扱い ❗"); // 実行される（truthy）
}

const numObj = new Number(0);

if (numObj) {
  console.log("真扱い ❗"); // 実行される（truthy）
}

JavaScript

解説：
ラッパーオブジェクトは常に truthy。
数値チェックには必ず Number(numObj) などでプリミティブ化してから評価する。

2. String系変換

安全な変換

const strObj = new String("hello");

// ✅ 1. String() 関数で変換（最も一般的）
const s1 = String(strObj);   // "hello"

// ✅ 2. valueOf() で中身の文字列を取得
const s2 = strObj.valueOf(); // "hello"

// ✅ 3. toString() も安全
const s3 = strObj.toString(); // "hello"

const strObj = new String("hello");

// ✅ 1. String() 関数で変換（最も一般的）
const s1 = String(strObj);   // "hello"

// ✅ 2. valueOf() で中身の文字列を取得
const s2 = strObj.valueOf(); // "hello"

// ✅ 3. toString() も安全
const s3 = strObj.toString(); // "hello"

JavaScript

危険なパターン

const numObj = new Number(0);

if (numObj) {
  console.log("真扱い ❗"); // 実行される（truthy）
}

const numObj = new Number(0);

if (numObj) {
  console.log("真扱い ❗"); // 実行される（truthy）
}

JavaScript

解説：
空文字のラッパーもオブジェクト → truthy。
空文字チェックを壊す典型パターン。

3. Boolean系変換

安全な変換

const boolObj = new Boolean(false);

// ✅ 1. Boolean() 関数で変換
const b1 = Boolean(boolObj); // true ❗  ← 注意：オブジェクトなので true
// → 正確にプリミティブを得たいなら valueOf() を使う

// ✅ 2. valueOf() で安全にプリミティブ化
const b2 = boolObj.valueOf(); // false ✅

// ✅ 3. !! 演算子（二重否定）で明示的にboolean化
const b3 = !!boolObj.valueOf(); // false ✅

const boolObj = new Boolean(false);

// ✅ 1. Boolean() 関数で変換
const b1 = Boolean(boolObj); // true ❗  ← 注意：オブジェクトなので true
// → 正確にプリミティブを得たいなら valueOf() を使う

// ✅ 2. valueOf() で安全にプリミティブ化
const b2 = boolObj.valueOf(); // false ✅

// ✅ 3. !! 演算子（二重否定）で明示的にboolean化
const b3 = !!boolObj.valueOf(); // false ✅

JavaScript

危険なパターン

const b = new Boolean(false);
if (b) console.log("実行される ❗"); // true 扱い

const b = new Boolean(false);
if (b) console.log("実行される ❗"); // true 扱い

JavaScript

解説：
new Boolean(false) は truthy。
真偽判定では常に valueOf() かプリミティブ boolean を使う。

4. Object（ラッパー共通）→プリミティブ変換パターン一覧

ラッパー型	安全変換方法	推奨度	備考
`Number`	`Number(obj)` / `obj.valueOf()`	⭐⭐⭐⭐	最も安全で明示的
`String`	`String(obj)` / `obj.valueOf()` / `obj.toString()`	⭐⭐⭐⭐	どれでも安全
`Boolean`	`obj.valueOf()`	⭐⭐⭐⭐⭐	唯一正確な方法
`Object`	`Object.prototype.valueOf.call(obj)`	⭐⭐	汎用的変換（普通は不要）

JSON化・シリアライズ時の注意

const data = {
  num: new Number(5),
  txt: new String("hi"),
  flag: new Boolean(true)
};

console.log(JSON.stringify(data));
// 出力: {"num":{},"txt":{},"flag":{}} ❌

const data = {
  num: new Number(5),
  txt: new String("hi"),
  flag: new Boolean(true)
};

console.log(JSON.stringify(data));
// 出力: {"num":{},"txt":{},"flag":{}} ❌

JavaScript

修正版

const safe = {
  num: Number(5),
  txt: String("hi"),
  flag: true
};
console.log(JSON.stringify(safe)); 
// {"num":5,"txt":"hi","flag":true} ✅

const safe = {
  num: Number(5),
  txt: String("hi"),
  flag: true
};
console.log(JSON.stringify(safe)); 
// {"num":5,"txt":"hi","flag":true} ✅

JavaScript

イント：

ラッパーは JSON.stringify 時に 空オブジェクト {} になる。
送信やログ出力時は必ずプリミティブに変換しておく。

自動変換（暗黙ボクシング）を理解しておく

const str = "abc";
console.log(str.toUpperCase()); // OK（内部的に new String("abc")）

const num = 10;
console.log(num.toFixed(2));    // OK（内部的に new Number(10)）

const str = "abc";
console.log(str.toUpperCase()); // OK（内部的に new String("abc")）

const num = 10;
console.log(num.toFixed(2));    // OK（内部的に new Number(10)）

JavaScript

安全ポイント：

JavaScript は必要時に一時ラッパーを作る（＝オートボクシング）。
明示的に new を使う必要は 一切ない。

自動 vs 明示的変換フローの図解

"abc".toUpperCase()
   ↓
[JS内部で一時的に作成]
   new String("abc")
   ↓
StringオブジェクトのtoUpperCase()を呼び出す
   ↓
結果 "ABC" を返して破棄

"abc".toUpperCase()
   ↓
[JS内部で一時的に作成]
   new String("abc")
   ↓
StringオブジェクトのtoUpperCase()を呼び出す
   ↓
結果 "ABC" を返して破棄

JavaScript

つまり：JSは自動でやってくれるので、
開発者が new String() を書く必要はまったくない。

8. 変換ショートレシピ集

処理	推奨コード	結果
文字列 → 数値	`Number("42")`	`42`
数値 → 文字列	`String(42)`	`"42"`
文字列 → 真偽値	`Boolean("hello")`	`true`
空文字 → 真偽値	`Boolean("")`	`false`
数値 → 真偽値	`Boolean(0)` / `!!0`	`false`
`new Number()` → プリミティブ	`numObj.valueOf()`	数値
`new Boolean()` → プリミティブ	`boolObj.valueOf()`	true/false
`new String()` → プリミティブ	`strObj.valueOf()`	文字列
すべてプリミティブに強制変換	`JSON.parse(JSON.stringify(obj))`	（オブジェクトの深いコピー時に有効）

9. 実務ベストプラクティスまとめ

Do ✅	Don’t 🚫
`Number(x)` / `String(x)` / `Boolean(x)`	`new Number(x)` / `new String(x)` / `new Boolean(x)`
`obj.valueOf()` で安全に中身を取得	条件式で直接ラッパーオブジェクトを評価
`typeof x === "number"` などで型チェック	`instanceof Number` は誤判定になる
JSON化前にプリミティブ化	そのまま stringify しない

10. まとめチャート（これを覚えれば完璧）

┌────────────┐
│ new Number() │ ─────┐
│ new String() │ ─────┼→ .valueOf() → プリミティブ値 ✅
│ new Boolean()│ ─────┘
│               │
│ ⚠️ JSON化で{} │
└────────────┘

使うべきは：
   Number(x), String(x), Boolean(x)

┌────────────┐
│ new Number() │ ─────┐
│ new String() │ ─────┼→ .valueOf() → プリミティブ値 ✅
│ new Boolean()│ ─────┘
│               │
│ ⚠️ JSON化で{} │
└────────────┘

使うべきは：
   Number(x), String(x), Boolean(x)