JS オブジェクトの表示

1. JavaScriptのオブジェクトを表示するには？

JavaScriptのオブジェクトをそのまま表示しようとすると、出力結果は [object Object] になります。

1.1 コード例

// オブジェクトの作成
const person = {
  name: "ジョン",
  age: 30,
  city: "ニューヨーク"
};

let text = person;
// これをHTMLなどに表示すると [object Object] と出力されます

2. なぜ [object Object] と表示されるのか？

[object Object] は、オブジェクト（プロパティを持つデータ構造）を、文字列（String）が期待されるコンテキストに配置しようとした際に表示されます。
これは、JavaScriptがオブジェクトを文字列として表現しようとする際のデフォルトの挙動です。

オブジェクトを正しく表示するための主な解決策は以下の通りです：

• プロパティを名前で個別に表示する
• ループを使用してプロパティを表示する
• Object.values() を使用して表示する
• JSON.stringify() を使用して表示する

3. オブジェクトプロパティを個別に表示する

オブジェクトのプロパティを連結して、一つの文字列として出力する方法です。

3.1 コード例

// オブジェクトの作成
const person = {
  name: "ジョン",
  age: 30,
  city: "ニューヨーク"
};

// プロパティを連結して表示
let text = person.name + "," + person.age + "," + person.city;

4. for...in ループを使用する

ループ処理を使用して、オブジェクトのプロパティを順番に収集することができます。

4.1 コード例

// オブジェクトの作成
const person = {
  name: "ジョン",
  age: 30,
  city: "ニューヨーク"
};

// テキストを構築
let text = "";
for (let x in person) {
  text += person[x] + " ";
};

       重要: ループ内では必ず person[x] を使用してください。person.x は動作しません（x はループ変数であり、リテラルなプロパティ名ではないためです）。

5. Object.values() を使用する

Object.values() を使うと、オブジェクトのプロパティの値からなる配列（Array）を作成できます。

5.1 コード例

// オブジェクトの作成
const person = {
  name: "ジョン",
  age: 30,
  city: "ニューヨーク"
};

// 配列を作成
const myArray = Object.values(person);

// 配列を文字列に変換（カンマ区切りになります）
let text = myArray.toString();

6. Object.entries() を使用する

Object.entries() を使用すると、ループの中でオブジェクトのキーと値をペアで扱うのが非常に簡単になります。

6.1 コード例

const fruits = {Bananas: 300, Oranges: 200, Apples: 500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

7. JSON.stringify() を使用する

JavaScriptのオブジェクトは、JSONメソッドである JSON.stringify() を使うことで文字列に変換できます。
JSON.stringify() は標準機能として組み込まれており、すべてのブラウザでサポートされています。

変換結果は、以下のようなJSON形式の文字列になります：
{"name":"ジョン","age":30,"city":"ニューヨーク"}

7.1 コード例

// オブジェクトの作成
const person = {
  name: "ジョン",
  age: 30,
  city: "ニューヨーク"
};

// オブジェクトをシリアライズ（文字列化）
let text = JSON.stringify(person);