お問い合わせ
お問い合わせ
ホーム > JavaScript > JavaScriptのObject.values()とは？オブジェクトの値を配列で取得する方法を徹底解説

JavaScriptのObject.values()とは？オブジェクトの値を配列で取得する方法を徹底解説

JavaScript
JavaScriptのObject.valuesでオブジェクトの値を配列として取り出すイメージ
Object.values()を使ってオブジェクトの値を配列として扱う方法をやさしく解説します

JavaScriptでオブジェクトを扱う際、「キーではなく値だけをまとめて取得したい」という場面は頻繁にあります。そのようなときに役立つのが**Object.values()**です。

この記事では、Object.values()の基本から実践的な使い方まで、初心者でも理解できるように丁寧に解説します。

Object.values()とは

Object.values()は、オブジェクトの値（value）だけを配列として取得するメソッドです。

// object-values-basic.js
const user = {
  name: "Taro",
  age: 25,
  country: "Japan"
};

const values = Object.values(user);

console.log(values); // ["Taro", 25, "Japan"]

このように、キーは無視され、値だけが配列として返されます。

Object.values()の基本構文

構文

Object.values(オブジェクト)

ポイント

  • 引数にはオブジェクトを指定する
  • 戻り値は配列
  • 値は**定義順（プロパティの順序）**で取得される

Object.values()の基本的な使い方

値を一覧で取得する

// object-values-list.js
const product = {
  id: 1,
  name: "Laptop",
  price: 120000
};

console.log(Object.values(product)); 
// [1, "Laptop", 120000]

配列として取得できるため、そのままループ処理に活用できます。

配列メソッドと組み合わせる

Object.values()の大きなメリットは、配列として扱えることです。

map()と組み合わせる

// object-values-map.js
const scores = {
  math: 80,
  english: 90,
  science: 70
};

const doubled = Object.values(scores).map(function(score) {
  return score * 2;
});

console.log(doubled); // [160, 180, 140]

👉 配列操作については
「JavaScriptのmap()とは？配列処理の基本から実践まで徹底解説」も参考になります。

filter()と組み合わせる

// object-values-filter.js
const scores = {
  math: 80,
  english: 90,
  science: 70
};

const highScores = Object.values(scores).filter(function(score) {
  return score >= 80;
});

console.log(highScores); // [80, 90]

👉 配列の絞り込みについては
「JavaScriptのfilter()とは？配列の絞り込みを徹底解説」で詳しく解説しています。

reduce()と組み合わせる

// object-values-reduce.js
const prices = {
  item1: 1000,
  item2: 2000,
  item3: 1500
};

const total = Object.values(prices).reduce(function(sum, price) {
  return sum + price;
}, 0);

console.log(total); // 4500

合計値の計算などにも便利です。

Object.keys()・Object.entries()との違い

オブジェクトを扱うメソッドには、似たものがいくつかあります。

Object.keys()

// object-keys.js
const user = {
  name: "Taro",
  age: 25
};

console.log(Object.keys(user)); // ["name", "age"]

👉 キーだけ取得したい場合に使用します。

Object.entries()

// object-entries.js
const user = {
  name: "Taro",
  age: 25
};

console.log(Object.entries(user));
// [["name", "Taro"], ["age", 25]]

👉 キーと値のセットを扱いたい場合に便利です。

違いまとめ

メソッド内容
Object.keys()キーのみ
Object.values()値のみ
Object.entries()キーと値のペア

注意点

配列には直接使えない（ただし実行は可能）

配列もオブジェクトの一種のため、Object.values()は使えます。

// object-values-array.js
const arr = ["a", "b", "c"];

console.log(Object.values(arr)); 
// ["a", "b", "c"]

ただし、通常はそのまま配列を使う方がシンプルです。

プロパティの順序に注意

基本的には定義された順番で取得されますが、数値キーなどでは順序が変わる場合があります。

// object-values-order.js
const data = {
  2: "b",
  1: "a",
  3: "c"
};

console.log(Object.values(data)); 
// ["a", "b", "c"]

数値キーは昇順で並ぶ仕様です。

実務でよくある使用例

フォーム入力の値をまとめる

// object-values-form.js
const formData = {
  name: "Taro",
  email: "taro@example.com",
  age: 25
};

const values = Object.values(formData);

console.log(values);
// ["Taro", "taro@example.com", 25]

ログ出力やAPI送信前の整形などで活用されます。

値の存在チェック（includes）

// object-values-includes.js
const user = {
  name: "Taro",
  role: "admin"
};

const hasAdmin = Object.values(user).includes("admin");

console.log(hasAdmin); // true

👉 includes()については
「JavaScriptのincludes()とは？配列・文字列の存在チェックを徹底解説」で詳しく解説しています。

まとめ

Object.values()は、オブジェクトの値を配列として取得できる便利なメソッドです。

  • 値だけを簡単に取り出せる
  • 配列メソッドと組み合わせて柔軟に処理できる
  • keys()やentries()との使い分けが重要

オブジェクト操作の基本として、確実に押さえておきたい機能です。

関連記事