【JavaScript入門】JSONデータからmap()で配列を作成する方法

JSONデータから新しい配列を作成するには、JavaScriptのmap()メソッドを活用するのが最もシンプルで効率的な方法です。map()は、元の配列の各要素に対して指定した処理を実行し、その結果から新しい配列を生成してくれます。

サンプルデータの準備

ここでは、学生情報を格納した以下のJSONデータ（オブジェクトの配列）を例に説明します。

const studentDetails = [
    {
        name: "John"
    },
    {
        name: "David"
    },
    {
        name: "Bob"
    }
];

このデータは、各要素が「name」というキーを持つオブジェクトになっています。この中から名前だけを抽出し、文字列のみの配列を作成してみましょう。

map()を使って配列を作成するコード

以下のコードでは、分割代入を使って各オブジェクトからnameプロパティの値を取り出し、新しい配列に変換しています。

const studentDetails = [
    {
        name: "John"
    },
    {
        name: "David"
    },
    {
        name: "Bob"
    }
];

const ListOfStudentName = studentDetails.map(({ name: actualValue }) => actualValue);
console.log(ListOfStudentName);

コードのポイント

• ({ name: actualValue }) の部分は、オブジェクトからnameプロパティを取り出し、actualValueという変数に代入する分割代入です。
• アロー関数 => actualValue によって、各要素から抽出した値がそのまま新しい配列の要素になります。
• 元のstudentDetails配列は変更されず、新しい配列が生成される点もmap()の特徴です。

プログラムの実行方法

Node.js環境で上記のプログラムを実行するには、ターミナルまたはコマンドプロンプトで次のコマンドを使用します。

node fileName.js

今回は、ファイル名を「demo82.js」として保存しています。

実行結果

上記のプログラムを実行すると、以下のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo82.js
[ 'John', 'David', 'Bob']

このように、JSON形式のオブジェクト配列から、nameプロパティの値だけを抽出した新しい配列「['John', 'David', 'Bob']」を作成できました。

まとめ

JSONデータから特定のプロパティだけを抜き出して配列化したい場合、map()メソッドと分割代入を組み合わせることで、簡潔かつ可読性の高いコードを書くことができます。forEach()やforループでも同様の処理は可能ですが、map()は「変換した結果を配列として返す」ことに特化しているため、このようなケースでは最適な選択肢と言えるでしょう。