初心者でも安心！JavaScript オブジェクト表示の4つの方法

2024-04-02

JavaScript オブジェクトを表示する方法

名前によるプロパティの表示

最も簡単な方法は、オブジェクトのプロパティ名に直接アクセスして値を表示する方法です。例えば、以下のようなコードです。

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

console.log(person.name); // "山田 太郎"
console.log(person.age); // 30
console.log(person.address); // "東京都渋谷区"

この方法は、特定のプロパティの値だけを表示したい場合に便利です。

ループによるプロパティの表示

オブジェクトのすべてのプロパティを表示したい場合は、ループを使用することができます。例えば、以下のようなコードです。

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

for (const prop in person) {
  console.log(prop, person[prop]);
}

このコードは、for...in ループを使用して、オブジェクトのすべてのプロパティ名 (prop) を取得します。そして、person[prop] でそのプロパティの値を取得して、コンソールに出力します。

Object.values() メソッドを使用して、オブジェクトのすべてのプロパティの値を取得することができます。例えば、以下のようなコードです。

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

const values = Object.values(person);
console.log(values); // ["山田 太郎", 30, "東京都渋谷区"]

このコードは、Object.values() メソッドを使用して、person オブジェクトのすべてのプロパティの値の配列 (values) を取得します。そして、その配列をコンソールに出力します。

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

const json = JSON.stringify(person);
console.log(json); // {"name":"山田 太郎","age":30,"address":"東京都渋谷区"}

ライブラリの使用

上記以外にも、オブジェクトを表示するためのライブラリが多数存在します。例えば、以下のようなライブラリがあります。

これらのライブラリは、オブジェクトの表示をより簡単にしたり、さまざまなフォーマットで表示したりする機能を提供します。

JavaScript オブジェクトを表示するには、さまざまな方法があります。それぞれの方法の特徴と使用方法を理解して、目的に合った方法を選択してください。

補足

オブジェクトの内容を表示するだけでなく、編集したり、削除したりすることもできます。
オブジェクトは、他のオブジェクトのプロパティとして格納したり、配列の要素として格納したりすることができます。
オブジェクトは、JavaScript の重要な機能の一つであり、さまざまな場面で使用されます。

名前によるプロパティの表示

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

console.log(person.name); // "山田 太郎"
console.log(person.age); // 30
console.log(person.address); // "東京都渋谷区"

ループによるプロパティの表示

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

for (const prop in person) {
  console.log(prop, person[prop]);
}

Object.values() の使用

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

const values = Object.values(person);
console.log(values); // ["山田 太郎", 30, "東京都渋谷区"]

JSON.stringify() の使用

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

const json = JSON.stringify(person);
console.log(json); // {"name":"山田 太郎","age":30,"address":"東京都渋谷区"}

ライブラリの使用

// Lodash を使用

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

const _ = require('lodash');

console.log(_.values(person)); // ["山田 太郎", 30, "東京都渋谷区"]

応用

const person = {
  name: "山田 太郎",
  age: 30,
  address: {
    prefecture: "東京都",
    city: "渋谷区"
  }
};

console.log(person.address.prefecture); // "東京都"
console.log(person.address.city); // "渋谷区"

オブジェクトの配列がある場合、以下の方法で表示できます。

const persons = [
  {
    name: "山田 太郎",
    age: 30
  },
  {
    name: "佐藤 花子",
    age: 25
  }
];

for (const person of persons) {
  console.log(person.name);
}

上記のサンプルコードを参考に、さまざまな方法で JavaScript オブジェクトを表示してみてください。

オブジェクトを表示するその他の方法

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

console.dir(person);

このコードは、console.dir() メソッドを使用して、person オブジェクトの詳細な情報をコンソールに出力します。

デバッガーの使用

ブラウザのデバッガーを使用して、オブジェクトの内容をインタラクティブに表示することができます。デバッガーを使用すると、オブジェクトのプロパティやメソッドを直接操作したり、値を変更したりすることができます。

拡張機能の使用

自作の関数

function displayObject(obj) {
  for (const prop in obj) {
    console.log(prop, obj[prop]);
  }
}

const person = {
  name: "山田 太郎",
  age: 30,
  address: "東京都渋谷区"
};

displayObject(person);