先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのオブジェクトの中にある名前や値を簡単に取り出す方法ってありますか？」

先生

「はい、ありますよ。Object.keys()やObject.values()、Object.entries()という便利な関数を使うと簡単に取り出せます。」

生徒

「それぞれ何が違うんですか？どうやって使うのか教えてください！」

先生

「では、順番に基本をわかりやすく説明しますね。」

1. オブジェクトとプロパティとは？

まずJavaScriptの「オブジェクト」とは、いくつかのデータを「名前」と「値」のペアでまとめたものです。名前は「プロパティ名」とも呼ばれます。たとえば、下のようなオブジェクトがあります。


const person = {
  name: "花子",
  age: 30,
  hobby: "料理"
};

ここで、nameやage、hobbyがプロパティ名で、それぞれに「花子」や「30」などの値が入っています。

2. Object.keys()でプロパティ名だけを取り出す

Object.keys()は、オブジェクトの「プロパティ名だけ」を配列（データのリスト）として取り出す関数です。これを使うと、どんな名前があるかがわかります。


const keys = Object.keys(person);
console.log(keys);

このコードを実行すると、


["name", "age", "hobby"]

と表示され、オブジェクトにあるプロパティ名だけがリストとして得られます。

3. Object.values()で値だけを取り出す

Object.values()は、プロパティ名ではなく「値だけ」を配列として取り出します。さっきの例で言うと、「花子」「30」「料理」が配列になります。


const values = Object.values(person);
console.log(values);

実行結果はこうなります。


["花子", 30, "料理"]

値だけを簡単に取り出せるので、計算や表示などに便利です。

4. Object.entries()で名前と値のペアを配列にする

Object.entries()は、プロパティ名と値をセットにしたペアを配列として取り出します。1つ1つが「[名前, 値]」の形の配列です。


const entries = Object.entries(person);
console.log(entries);

実行するとこうなります。


[["name", "花子"], ["age", 30], ["hobby", "料理"]]

これを使うと、名前と値を同時に使った処理がしやすくなります。

5. 実際にどう使う？

たとえば、Object.entries()で取り出した配列を使って画面にプロパティ名と値を表示してみましょう。


for (const [key, value] of Object.entries(person)) {
  console.log(`${key} : ${value}`);
}

このコードを実行すると、次のように順番に表示されます。


name : 花子
age : 30
hobby : 料理

このようにループと組み合わせて使うと便利です。

6. ポイント整理と注意点

Object.keys()はプロパティ名だけを配列で取り出す
Object.values()は値だけを配列で取り出す
Object.entries()は名前と値のペアを配列で取り出す

これらはJavaScriptのオブジェクトの中身を調べたり、使いやすい形に変換したりするときにとても役立ちます。ぜひ試してみてくださいね。

まとめ

JavaScriptでオブジェクトのプロパティ名や値を扱う方法として登場した Object.keys()、Object.values()、Object.entries()は、どれも開発に欠かせない重要な関数です。オブジェクトの中に含まれる情報を効率良く取り出し、表示したり計算に利用したり、画面に反映したりするために役立ちます。特にWeb開発では、データをまとめたオブジェクトを扱う機会が非常に多いため、これらの使い方を正確に理解しておくことで、プログラム全体の見通しが良くなり、処理の組み立てもスムーズになります。また、プロパティ名だけが必要な場面、値だけを扱いたい場面、両方をセットでループ処理したい場面など、目的に応じて適切な関数を使い分けることで、無駄のない効率的なコードを書くことができます。 Object.entries()のように、二つの値を同時に扱えるスタイルは、配列要素を分解して処理する構文とも相性がよく、読みやすく整ったコードを実現します。さらに、オブジェクトの中身を一覧として画面表示する場面では、取得したキーや値をループ処理と組み合わせることで、柔軟な表示方法が可能になります。 Webアプリケーションにおけるユーザー情報、商品情報、設定データなどもオブジェクトとして扱われるため、これらの手法は実務でも使える非常に重要なテクニックです。今回の記事で紹介したコード例をベースに、自分の目的に合わせてカスタマイズしながら、より深いJavaScriptの知識を身につけていきましょう。また、実際の現場ではオブジェクト構造が複雑になることもよくあります。階層構造になったネストされたオブジェクトを扱うときも、まずはObject.keys()などを使って大まかな構造を把握することができます。基本的な使い方を理解しておくことで、複雑なデータでも落ち着いて処理方針を組み立てられるようになります。最後に、この記事の内容を踏まえたサンプルプログラムを再掲し、理解を深める助けにしてみてください。

サンプルプログラムまとめ


// オブジェクトの基本データ
const person = {
  name: "花子",
  age: 30,
  hobby: "料理",
  city: "東京"
};

// プロパティ名の一覧を取得
const keys = Object.keys(person);
console.log(keys);

// 値の一覧を取得
const values = Object.values(person);
console.log(values);

// 名前と値のペアを取得
const entries = Object.entries(person);
console.log(entries);

// 一覧表示
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}：${value}`);
}

先生と生徒の振り返り会話

生徒

「先生、今日の内容で、オブジェクトの中身を取り出す方法がかなり理解できました！」

先生

「よかったですね。特にObject.entries()は名前と値を同時に扱えるので、実務でもとても役立ちますよ。」

生徒

「キーの一覧が欲しければObject.keys()、値だけならObject.values()、両方ならObject.entries()って覚えればいいんですね。」

先生

「そうです。どれを使えば目的に合うのか判断できれば、より整理されたコードが書けるようになります。」

生徒

「ループと組み合わせて画面に表示する方法も参考になりました。オブジェクトを扱うのが前より楽になりそうです！」

先生