初心者向けオブジェクト入門【JavaScript】

2024年6月8日 2024年6月11日

講師:中島

JavaScriptを学ぶ際に避けて通れないのが「オブジェクト」で、
データや機能を整理し、効率的に扱うための重要な構造です。
この記事では、初心者向けにJavaScriptのオブジェクトの基本概念、作成方法、プロパティやメソッドの操作方法について解説します。

目次：

この記事のポイント

オブジェクトとは何かという基本概念が分かる
オブジェクトの作成法・プロパティへのアクセス法・呼び出し方が分かる

オブジェクトとは？

オブジェクトは、関連するデータや機能をまとめたものです。
基本の形として、名前（キー）と値（バリュー）が1セットで、構成されます。
そして、その1セットのことをそれぞれ下記のように呼びます。
・「キー：値」→プロパティ
・「キー：関数」→メソッド

const person = {
 name: "John",
 age: 30,
 greet: function() {
 console.log("Hello, my name is " + this.name);
 },
 hobby:[soccer ,baseball]
};

上の例では、personというオブジェクトがあり、nameとageというプロパティ、およびgreetというメソッド(関数)を持っています。
この内容を変数や配列で定義すると意味が分かりづらくなるため、このように複雑なデータを持たせたい場合にはオブジェクトが最適です。
また、値（バリュー）の部分には数値・Boolean型・配列などほとんどの値を設定できます。

オブジェクトの作成方法

オブジェクトの作成方法は、主に2パターンあります。

1.リテラル表記を使用する

オブジェクトリテラルを使用して、簡単にオブジェクトを作成できます。
これが一般的によく使われる書き方です。

const car = {
  brand: "hoge",
  model: "foo",
  year: 2020
};

{ }を書くとオブジェクトが作成できるので簡単ですね。

const testObject = {};

2.コンストラクタを使用する

JavaScriptのObjectコンストラクタを使用してオブジェクトを作成することもできます。

const car = new Object();
car.brand = "hoge";
car.model = "foo";
car.year = 2020;

プロパティのアクセスと操作

オブジェクトのプロパティにアクセスしたり、変更したりする方法を見てみましょう。

1.ドット（ . ）表記を使用する

ドット表記を使用してプロパティにアクセスできます。

console.log(car.brand); // hoge

// yearの値を更新
car.year = 2021;
console.log(car.year); // 2021

2.ブラケット（ [ ] ）表記を使用する

ブラケット表記を使用すると、変数を使って動的にプロパティ名にアクセスできます。

console.log(car["brand"]); // hoge

// yearの値を更新
car["year"] = 2022;
console.log(car["year"]); // 2022

//実務でよくあるパターン。キー名が変数の場合はブラケット記法を使う。
const propertyName = "brand";
console.log(car[propertyName]); // hoge

プロパティの削除

オブジェクトのプロパティを削除するにはdelete演算子を利用します。
削除したいプロパティをdelete演算子の右辺に指定して、プロパティを削除できます。

const obj = {
    key1: "value1",
    key2: "value2"
};

// key1プロパティを削除
delete obj.key1;

// key1プロパティが削除されている
console.log(obj); // => { "key2": "value2" }

メソッドの追加と呼び出し

オブジェクトにメソッド（関数）を追加して、それを呼び出す方法を見てみましょう。
関数は「()」をつけることで実行できるという決まりがあることを踏まえるとそこまで難しくないと思います。

const car = {
  brand: "hoge",
  model: "foo",
  year: 2020,
  getDetails: function() {
    return `${this.brand} ${this.model} (${this.year})`;
  }
};

console.log(car.getDetails()); // hoge foo (2020)