【JavaScript】オブジェクトのプロパティを配列として抽出するObject静的メソッドの使い分け

2026年1月29日

概要

JavaScriptでオブジェクト（連想配列）の内部データをループ処理したり、特定の値を抽出したりする際、Objectクラスの静的メソッドが非常に有効です。これらのメソッドを使用することで、複雑なデータ構造から必要な情報のみを配列形式で取り出し、forEachやmapといった配列メソッドと組み合わせて効率的に処理を行うことが可能になります。本記事では、ES2017以降で標準的に利用される3つの主要メソッドについて解説します。

仕様（入出力）

メソッド	意味	戻り値
`Object.keys()`	オブジェクトが持つ列挙可能なプロパティ名を抽出します。	プロパティ名（キー）の配列
`Object.values()`	オブジェクトが持つプロパティの値を抽出します。	プロパティ値の配列
`Object.entries()`	キーと値のペアをセットで抽出します。	`[key, value]` の形式を要素に持つ二次元配列

基本の使い方

オブジェクトを引数に渡すことで、そのオブジェクトが保持している情報を配列として取得します。取得した配列に対してループ処理を行うことで、オブジェクト内のすべての要素を順次操作できます。

コード全文（HTML / JAVASCRIPT）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Server Status Monitor</title>
</head>
<body>
    <div id="status-panel">
        <h2>サーバー稼働状況</h2>
        <div id="output-area"></div>
        <hr>
        <button id="btn-keys">キーのみ抽出</button>
        <button id="btn-values">値のみ抽出</button>
        <button id="btn-entries">ペアを抽出</button>
    </div>
    <script type="module" src="main.js"></script>
</body>
</html>

JavaScript

/**
 * サーバーのステータス情報を管理するオブジェクト
 * シナリオ：インフラ監視ログの解析
 */
const serverStatus = {
  serverId: "SVR-10024",
  status: "active",
  loadAverage: 0.45,
  operator: "mori"
};

const outputArea = document.getElementById('output-area');

/**
 * 取得結果を画面に描画する
 * @param {string} label - 処理名称
 * @param {Array} data - 抽出された配列データ
 */
const displayResult = (label, data) => {
  const resultString = JSON.stringify(data);
  outputArea.innerHTML = `<strong>${label}:</strong><br><code>${resultString}</code>`;
  console.log(`${label}:`, data);
};

// キー（プロパティ名）の抽出
document.getElementById('btn-keys').addEventListener('click', () => {
  const keys = Object.keys(serverStatus);
  displayResult('Object.keys', keys);
});

// プロパティ値の抽出
document.getElementById('btn-values').addEventListener('click', () => {
  const values = Object.values(serverStatus);
  displayResult('Object.values', values);
});

// キーと値のペアの抽出
document.getElementById('btn-entries').addEventListener('click', () => {
  const entries = Object.entries(serverStatus);
  displayResult('Object.entries', entries);
});

カスタムポイント

displayResult内の JSON.stringify を join(', ') などに変更することで、画面表示の書式をカスタマイズしてください。
監視対象のオブジェクト（serverStatus）に新しいプロパティを追加した場合でも、スクリプト側を修正することなく動的に全要素が抽出されます。

注意点

取得される配列の要素順は、数値キーでない限り基本的には定義順となりますが、仕様上完全に保証されているわけではないため、厳密な順序が必要な場合は配列側でのソートが必要です。
継承されたプロパティ（プロトタイプチェーン上のもの）は抽出されず、そのオブジェクト自身が持つプロパティのみが対象となります。
引数に null や undefined を渡すとエラーが発生するため、対象の変数がオブジェクトであることを事前に確認してください。

応用

Object.entries() と分割代入を組み合わせることで、ループ処理内でキーと値を同時に扱う記述が簡潔になります。

/**
 * ログデータを整形してコンソールに出力する
 * @param {Object} dataObj 
 */
const printLog = (dataObj) => {
  // 配列の分割代入を利用したループ
  Object.entries(dataObj).forEach(([key, value]) => {
    console.log(`項目の名前: ${key.toUpperCase()} / 設定値: ${value}`);
  });
};

printLog(serverStatus);

まとめ

Object静的メソッドである keys、values、entries を適切に使い分けることで、JavaScriptにおけるデータ操作の柔軟性が大幅に向上します。プロパティ名のみが必要な場合は keys、データの中身だけを集計したい場合は values、そしてキーと値をセットで加工したい場合は entries を選択するのが定石です。これらのメソッドはモダンなフロントエンド開発からNode.jsによるバックエンド処理まで幅広く利用されるため、オブジェクトを配列に変換して処理するパターンとして習得しておくことが重要です。変換後は配列の強力な標準メソッドがすべて利用可能になるため、冗長なループ構文を避けたクリーンなコード作成に貢献します。