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>

コードの解説

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

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

実行結果

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

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

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

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

まとめ

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

JavaScriptの短絡代入（ショートサーキット代入）の仕組みと使い方を解説

JavaScriptの短絡評価（ショートサーキット評価）とは？&& と || の動作を解説

JavaScriptのObject.keys().map()とArray.map()の違いを徹底解説
JavaScriptにおいて、Array.map()は配列の各要素に関数を適用し、その結果を新しい配列として返すメソッドです。一方、オブジェクトには直接map()メソッドが用意されていないため、Object.keys().map()という形で、まずObject.keys()を使ってオブジェクトのキーを配列として取得し、そこにmap()を適用するのが一般的なテクニックとなります。この記事では、両者の使い方の違いを、実際に動作するサンプルコードと実行結果をもとにわかりやすく解説します。サンプルコード以下は、Object.keys().map()とArray.map()の動作を比較できるJa
JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法
JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta