【初心者向け】JavaScriptのオブジェクト入門｜使い方・書き方をわかりやすく解説！

1.はじめに

JavaScriptでは、複数の情報をひとまとめにして扱うときに「オブジェクト」という仕組みを使います。

たとえば、ある人の情報を表すときに、

const name = "たろう";
const age = 20;
const city = "東京";

のように変数を1つずつ作るよりも、

const person = {
  name: "たろう",
  age: 20,
  city: "東京"
};

とした方がわかりやすく、整理された形で扱えます。

オブジェクトは、名前（キー）と値（バリュー）をセットで保存するデータ形式で、
JavaScriptでは非常に頻繁に使われる基本のひとつです。

今回は、この「オブジェクト」について、基本的な作り方・使い方・便利な操作方法を
初心者向けにわかりやすく解説していきます！

JavaScriptでオブジェクトを作る方法は主に2つありますが、初心者におすすめなのは「リテラル形式」です。

const user = {
  name: "たろう",
  age: 20,
  city: "東京"
};

console.log(user);

出力結果

{ name: "たろう", age: 20, city: "東京" }

const user = new Object();
user.name = "たろう";
user.age = 20;
user.city = "東京";

console.log(user);

出力結果

{ name: "たろう", age: 20, city: "東京" }

new Object() は書けなくはないけれど、今はリテラル形式を使えばOK。
実務でもリテラルの方が主流です。

次は、オブジェクトの中身を取り出したり、値を追加・変更したりする方法を見ていきましょう！

作ったオブジェクトの中から「値を取り出す」「新しい項目を追加する」「すでにある値を変える」などの操作はとてもよく使われます。

const user = {
  name: "たろう",
  age: 20,
  city: "東京"
};

console.log(user.name);  // "たろう"
console.log(user["age"]); // 20

user.country = "日本";
console.log(user);

出力結果

{ name: "たろう", age: 20, city: "東京", country: "日本" }

user.age = 21;
console.log(user.age);  // 21
console.log(user);

出力結果

21
{ name: "たろう", age: 21, city: "東京", country: "日本" }

オブジェクトは、「必要に応じて自由に追加・変更できる便利な入れ物」です。
次は、オブジェクトの中身をループで1つずつ取り出す方法を見てみましょう！

配列と同じように、オブジェクトの中身もループで1つずつ取り出すことができます。

オブジェクトの場合は for...in 文を使います。

const user = {
  name: "たろう",
  age: 21,
  city: "東京",
  country: "日本"
};

for (let key in user) {
  console.log(key + "：", user[key]);
}

出力結果

name： たろう  
age： 21  
city： 東京  
country： 日本

for...in は、オブジェクトのすべての項目を順に処理したいときに便利です。

ただし、配列には使わない方がよいので注意してください（配列には for や forEach を使うのが基本です）

今回は、JavaScriptの「オブジェクト」について、基本的な使い方を学びました。

オブジェクトは、JavaScriptで最もよく使われるデータ構造のひとつです。
今後、配列と組み合わせたり、イベントでデータをまとめたりと、活用する場面がどんどん出てきます。

今のうちに、基本的な使い方をしっかりマスターしておきましょう！