JSONオブジェクトの値をJavaScriptの配列に変換する方法

JavaScriptでは、オブジェクトが持つすべてのプロパティの値を取り出し、1つの配列としてまとめたい場面があります。

例えば、以下のようなユーザー情報を格納したオブジェクトを考えてみましょう。

{
    "firstName": "John",
    "lastName": "Smith",
    "isAlive": "true",
    "age": "25"
}

このオブジェクトから、プロパティの値だけを抜き出した次のような配列を作成することを目標とします。

const myarray = ['John', 'Smith', 'true', '25'];

それでは、この変換を実現するコードを見ていきましょう。

方法1: Object.keys()とforループを使用する

まず、Object.keys()メソッドでオブジェクトのすべてのキーを取得し、そのキーを使って各プロパティの値を順番に新しい配列へ追加していきます。

サンプルコード

const obj = {
    "firstName": "John",
    "lastName": "Smith",
    "isAlive": "true",
    "age": "25"
};
const objectToArray = obj => {
    const keys = Object.keys(obj);
    const res = [];
    for(let i = 0; i < keys.length; i++){
        res.push(obj[keys[i]]);
    };
    return res;
};
console.log(objectToArray(obj));

出力結果

コンソールには以下のように表示されます。

[ 'John', 'Smith', 'true', '25' ]

方法2: Object.values()を使った1行での実装

よりシンプルな別の解決策として、Object.values()メソッドを使う方法があります。このメソッドは、オブジェクト自身の列挙可能なプロパティの値を要素とする配列を直接返してくれるため、先ほどのループ処理をわずか1行で置き換えられます。

const obj = {
    "firstName": "John",
    "lastName": "Smith",
    "isAlive": "true",
    "age": "25"
};
const res = Object.values(obj);
console.log(res);

どちらの方法を選ぶべきか

単純にすべての値を取得したいだけであれば、Object.values()を使うのが最も簡潔で可読性も高いため、推奨されます。一方、変換の過程で独自のロジックを加えたい場合（例えば特定の条件でフィルタリングしたり、値を加工したりする場合）は、forループを使った方法の方が柔軟に対応できるというメリットがあります。