JavaScriptでオブジェクトを新しい配列に変換する方法

JavaScriptでは、オブジェクトのプロパティやネストされたデータを取り出し、扱いやすい形で新しい配列にフォーマットできます。本記事では、学校（school）オブジェクトに含まれる生徒情報を、文字列形式の配列へ変換する実践的なコード例を紹介します。

ポイントとなるテクニック

このサンプルでは、以下の2つのJavaScript機能を活用しています。

• 分割代入（Destructuring assignment）：オブジェクトから特定のプロパティを簡潔に取り出す構文です。
• for...of ループ：配列内の各要素を順番に処理するために使用します。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Formatting JavaScript Object to new Array.</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to format the school object to an array</h3>
<script>
    const school = {
        name: "St Marks",
        address: "Delhi",
        students: [
            {
                firstName: "Rohan",
                lastName: "Sharma",
                age: 14,
            },
            {
                firstName: "Mohit",
                lastName: "Singh",
                age: 18,
            },
            {
                firstName: "Mike",
                lastName: "Shaw",
                age: 17,
            },
            {
                firstName: "Roy",
                lastName: "Mehta",
                age: 16,
            },
        ],
    };
    let resEle = document.querySelector(".result");
    let schoolArr = [];
    let { name, address } = school;
    for (let student of school.students) {
        schoolArr.push(
            `${student.firstName} ${student.lastName} ${student.age}`
        );
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        schoolArr.forEach((item) => {
            resEle.innerHTML += item + "<br>";
        });
    });
</script>
</body>
</html>

コードの解説

このコードの処理の流れは以下の通りです。

1. 学校名や住所、生徒のリストを持つ school オブジェクトを定義します。
2. 結果を表示するための空の配列 schoolArr を用意します。
3. 分割代入を使って school オブジェクトから name と address を取り出します。
4. for...of ループで各生徒の氏名と年齢を組み合わせた文字列を作成し、push() メソッドで配列に追加します。
5. ボタンがクリックされると、forEach() によって配列の内容が画面に表示されます。

実行結果

上記のコードを実行すると、次のような出力が得られます。

「CLICK HERE」ボタンをクリックすると、生徒ごとの「名前 苗字 年齢」の形式で整形されたデータが配列から順に表示されます。

まとめ

このように、分割代入とループ処理を組み合わせることで、複雑な構造のJavaScriptオブジェクトから必要なデータだけを抽出し、新しい配列として簡単にフォーマットできます。APIレスポンスの整形やデータ変換など、実務でも頻繁に使われるテクニックなので、ぜひマスターしておきましょう。