【JavaScript】文字列化された数値・真偽値を含むJSONオブジェクトを元の型に自動変換する方法

問題の概要

次のようなJSONオブジェクトがあると仮定しましょう。

const obj = {
  "name": "sam",
  "age": "24",
  "isMarried": "false"
};

一見すると普通のオブジェクトですが、よく見ると age プロパティ（本来はNumber型）と isMarried プロパティ（本来はBoolean型）の値が、誤って文字列（String型）になってしまっています。

APIレスポンスの処理やCSVデータの取り込みなどでは、このような型の不整合は頻繁に発生します。そこで本記事では、このようなオブジェクトを受け取り、文字列化された数値・真偽値を正しいデータ型へ自動的に変換する関数を実装します。

実装コード

const obj = {
  "name": "sam",
  "age": "24",
  "isMarried": "false"
};

const convertToOriginal = (obj = {}) => {
  const keys = Object.keys(obj);
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    const val = obj[key];

    if (typeof val === 'string') {
      const num = Number(val);
      // 有効な数値を表す文字列なら Number 型へ変換
      if (val.trim() !== '' && !isNaN(num)) {
        obj[key] = num;
      }
      // "true" / "false" の文字列なら Boolean 型へ変換
      else if (val === 'true' || val === 'false') {
        obj[key] = val === 'true';
      }
    }
  }
};

convertToOriginal(obj);
console.log(obj);

実行結果

コンソールには次のように出力されます。

{ name: 'sam', age: 24, isMarried: false }

"age" が数値の 24 に、"isMarried" が真偽値の false に、それぞれ正しく変換されていることが分かります。

コードの解説

この関数の処理の流れは以下のとおりです。

• Object.keys() でオブジェクト内のすべてのキーを配列として取得します。
• 各キーの値を取り出し、値が文字列である場合のみ変換処理を行います。
• Number() による変換結果が NaN でなければ、その文字列は有効な数値を表しているため、Number型に置き換えます。
• 数値として解釈できない場合は、値が 'true' または 'false' かどうかを判定し、該当すれば対応する真偽値へ変換します。
• 'sam' のようにどちらにも該当しない値は、元の文字列のまま維持されます。

実装上の注意点

• Boolean("false") の罠に注意： JavaScriptでは空文字列以外の文字列はすべてtruthyと評価されるため、Boolean("false") は true を返してしまいます。必ず val === 'true' の比較結果を代入するのが安全です。
• parseInt より Number が便利： parseInt ベースの判定では "24.5" のような小数や "0" の扱いに難があります。Number() を使えば小数・負数・0も正しく処理できます。
• ネスト構造への対応： オブジェクトの中にオブジェクトや配列が含まれるケースでは、関数を再帰呼び出しすることで階層全体に同じ変換を適用できます。

まとめ

数値や真偽値が文字列化されてしまったJSONデータは、実務の開発現場でもよく遭遇する問題です。値の内容に応じて型を判定し直す関数を用意しておけば、データクレンジングを安全かつ簡単に行えます。必要に応じて再帰処理や日付型への対応などを追加すれば、より汎用的なユーティリティへと発展させることができるでしょう。