【JavaScript】初心者向け！オブジェクトとは？オブジェクトの使い方について分かりやすく解説します。

なやむくん

JavaScriptのオブジェクトについて学びたい…。

なやむさん

プロパティにアクセスってどうやるの？値の変更や追加の方法についても知りたい…。

などの疑問や悩みを解決してまいります。

オブジェクトが苦手な方、学習しているが理解できず挫折してしまう方など、オブジェクトの理解に苦戦されている方はいると思います。

自分もJavaScriptを学び始めの頃は、オブジェクトをなかなか理解できずに苦しんだ思い出があります。

みつた

当時オブジェクトを車に例えた解説を見ながら学んでいましたが、全く理解ができませんでした…。

今回はJavaScript初心者の方に向けて、オブジェクトと使い方について解説していきたいと思います。

オブジェクトとは

オブジェクトは、入れ物である箱と、箱の中に入っている中身で成り立っています。

箱の中にどんなものが入っているのか分かるように、入れ物には名前をつけて必要なときに取り出していきます。

箱の中に入っている中身すなわち内容物のことをプロパティ（property）と呼びます。

オブジェクトの宣言

オブジェクトは {}（中括弧）を使って定義でき、これはオブジェクトリテラルという一般的なオブジェクトの宣言方法です。

let myObject = {};

このオブジェクトはまだ中身が空っぽですが、中にプロパティを追加することで、データを保持することができます。

プロパティはキーと値の組み合わせで構成され、キーは文字列や数値などで、値にはさまざまなデータ型（文字列、数値、他のオブジェクトなど）が入ります。

例えば、nameというプロパティを持つオブジェクトを作成し、それに文字列の値を割り当てると以下のようになります。

let person = {
  name: 'John Doe'
};

このようにして、オブジェクトを定義し、プロパティを追加することで、複雑なデータ構造を作成できます。

プロパティの作成とアクセス方法

前項では1つのプロパティを追加したコード例を紹介しましたが、ここでは複数のプロパティの指定と、そのアクセス方法を解説していきます。

複数のプロパティを指定する場合はカンマ「,」で区切りで記述していきます。

let person = {
  name: 'Alice',
  age: 30,
  job: 'Engineer'
};

オブジェクトのプロパティにアクセスするには、ドット演算子 . もしくはブラケット記法 [] を使用します。

console.log(person.name);
// 'Alice'

console.log(person['age']);
// 30

どちらの方法でも同じ結果を得ることができます。

ブラケット記法は、特に変数を使用して動的にプロパティにアクセスする際に便利です。

みつた

基本的にはドット演算子を使用してプロパティにアクセスしますが、ブラケット記法は後半に解説している繰り返し構文で使用します。

メソッドの作成と呼び出し方

メソッドは、オブジェクト内で関数を定義することで作成されます。

複数定義する場合はプロパティ同様カンマ「,」で区切ります。

let calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

メソッドを呼び出すには、オブジェクト名の後にドット演算子 . を使ってメソッド名を指定し、括弧 () をつけて呼び出します。

console.log(calculator.add(5, 3));
// 8

console.log(calculator.subtract(7, 2));
// 5

オブジェクトを車で例えて宣言してみる

オブジェクトの内容を何かに例えるとした場合は、「車」が一番例として挙げやすいです。

車をオブジェクトに例えると以下のような内容になります。

let car = {
  brand: 'Toyota',
  model: 'VOXY',
  year: 2022,
  color: 'white',
  start: function() {
    console.log('Engine started!');
  },
  stop: function() {
    console.log('Engine stop!');
  }
};

このcarオブジェクトは、ブランド（brand）、モデル（model）、製造年（year）、色（color）などのプロパティがあります。

また、startとstopいうメソッド（関数）も備えており、これを呼び出すことでエンジンを始動・停止することができます。

car.start();
// Engine started!

car.stop();
// Engine stop!

このように、オブジェクトはデータをまとめ、それに対する操作や機能を定義するための便利な仕組みです。

みつた

図にしてみると以下のような感じですね！

よろこびくん

身近なものに例えると理解しやすいです！

オブジェクト内での this の使い方と意味

JavaScriptの thisは、特定のコンテキスト内で呼び出されたときに、そのコンテキスト自体を指す特殊なキーワードです。

みつた

コンテキストとは、コードが実行される環境を表します。
主にグローバルコンテキストと関数コンテキストなどがあります。

特にオブジェクト内で this を使用する場合、そのオブジェクト自体を参照するために利用されます。

考え方として、this は呼び出し元であるオブジェクトを指します。

以下は this の使用例です。

let car = {
  brand: 'Toyota',
  model: 'Voxy',
  start: function() {
    console.log('Engine started for ' + this.brand + ' ' + this.model);
  }
};

car.start();
// 'Engine started for Toyota Voxy'

この例では、start メソッド内で this.brand と this.model を使用しています。

this を使うことで、そのメソッドが呼ばれた時点の car オブジェクトにアクセスし、そのプロパティの値を表示しています。

オブジェクトのループ処理について

オブジェクトのプロパティを反復処理する方法として for...in ループが利用されます。

このループはオブジェクト内の各プロパティを順番に取り出し、そのキーに対応する値に繰り返しアクセスすることができます。

let car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2022
};

for (let key in car) {
  console.log(key + ': ' + car[key]);
}
// brand: Toyota
// model: Camry
// year: 2022

よろこびくん

なるほど！keyにオブジェクトのキー名を代入しているためcar[key]でそのキーの値を出力しているのですね。

なやむさん

これはブラケット記法ではなくドットを使用するアクセス方法ではダメなのでしょうか。