JavaScript オブジェクト：プロパティの作成、アクセス、変更

はじめに

JavaScript オブジェクトに関する実験へようこそ。オブジェクトは JavaScript の基本的な構成要素であり、関連するデータやより複雑なエンティティのコレクションを格納するために使用されます。オブジェクトはキーと値のペアで構成され、キーは文字列（または Symbol）であり、値は他のオブジェクトや関数を含む任意のデータ型にすることができます。

この実験では、以下の方法を学びます。

オブジェクトリテラル構文を使用して JavaScript オブジェクトを作成する。
オブジェクトにプロパティ（キーと値のペア）を追加する。
オブジェクトのプロパティの値にアクセスして更新する。
既存のオブジェクトに新しいプロパティを追加する。

すべての作業は script.js ファイルで行います。コードの出力を確認するには、ブラウザの開発者コンソールを開く必要があります。これは、「Web 8080」タブに移動し、開発者ツールを開くことで行うことができます（通常は右クリックして「検証」を選択し、「コンソール」タブをクリックします）。

始めましょう！

波括弧 `{}` を使用してオブジェクトリテラルを作成する

このステップでは、最初の JavaScript オブジェクトを作成します。オブジェクトを作成する最も簡単な方法は、オブジェクトリテラル構文を使用することです。これは波括弧 {} のペアです。

まず、WebIDE の左側にあるファイルエクスプローラーで script.js ファイルを見つけます。それをクリックしてエディターで開きます。

次に、script.js に以下のコードを追加して、car という名前の定数変数を宣言し、空のオブジェクトを割り当てます。また、console.log() を使用してオブジェクトをコンソールに出力し、その作成を確認します。

const car = {};

console.log(car);

コードを追加したら、ファイルを保存します。結果を確認するには、「Web 8080」タブをクリックします。開発者コンソールを開きます（右クリック -> 検証 -> コンソール）。コンソールに空のオブジェクト {} が出力されているはずです。

WebIDE が script js ファイルとコンソール出力を表示している様子

オブジェクトにキーと値のペアを追加する

空のオブジェクトはあまり役に立ちません。オブジェクトはデータを保持するためのものであり、プロパティとして追加します。プロパティとは、キーと値のペアのことです。キーはそのプロパティの名前（文字列）であり、値はそのキーに関連付けられたデータです。

このステップでは、オブジェクト作成時に波括弧内で直接 car オブジェクトにプロパティを追加します。車のメーカー、モデル、年式といったプロパティを定義しましょう。

script.js のコードを以下のように変更してください。

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

ここでは、make、model、year がキーであり、それぞれ 'Toyota'、'Camry'、2021 が対応する値です。文字列の値はシングルクォートで囲まれていることに注意してください。

ファイルを保存し、「Web 8080」タブの開発者コンソールを再度確認してください。プロパティを持つオブジェクトが出力されているのが見えるはずです。

開発者コンソールに car オブジェクトのプロパティが表示されている様子

ドット記法でプロパティにアクセスする

プロパティを持つオブジェクトを作成したら、特定のプロパティの値を取得する必要がよくあります。最も一般的な方法はドット記法 (.) を使用することです。構文は objectName.propertyName です。

このステップでは、car オブジェクトの model にアクセスし、それをコンソールに出力します。

script.js ファイルの末尾に以下の行を追加してください。既存のコードはそのまま残しておきます。

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

// model プロパティにアクセスしてログに出力
console.log(car.model);

ファイルを保存し、「Web 8080」タブをリフレッシュしてください。開発者コンソールには、完全な car オブジェクトの後に文字列 Camry が表示されるはずです。

開発者コンソールに car の model の出力が表示されている様子

プロパティ値の代入を更新する

オブジェクト内のデータは固定ではありません。代入演算子 (=) を使用して、既存のプロパティの値を簡単に変更できます。これは、通常の変数に値を代入するのと同じ方法で行います。

このステップでは、car の year を 2021 から 2022 に更新しましょう。

script.js ファイルの末尾に以下の行を追加してください。プロパティを更新してから、変更を確認するためにオブジェクト全体を再度ログに出力します。

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

// year プロパティを更新
car.year = 2022;

console.log(car);

明確にするために、以前の console.log ステートメントを削除しても構いませんが、必須ではありません。ファイルを保存した後、「Web 8080」タブのコンソールを確認してください。出力には、year が 2022 に更新された car オブジェクトが表示されるはずです。

更新された car オブジェクトが表示されているコンソール出力

既存のオブジェクトに新しいプロパティを追加する

JavaScript のオブジェクトは動的です。これは、作成後にいつでも新しいプロパティを追加できることを意味します。構文はプロパティの更新と同じです。新しいプロパティ名にドット記法を使用し、値を代入します。

この最後のステップでは、car オブジェクトに新しい color プロパティを追加します。

script.js ファイルの末尾に以下の行を追加してください。これにより新しいプロパティが追加され、確認のためにオブジェクトがログに出力されます。

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

car.year = 2022;

// 新しい color プロパティを追加
car.color = "blue";

console.log(car);

ファイルを保存し、開発者コンソールを最後に確認してください。car オブジェクトには、make、model、year、そして新たに追加された color の 4 つのプロパティが表示されるはずです。

追加された color プロパティを持つ JavaScript の car オブジェクト

まとめ

JavaScript オブジェクトの実験を完了しました。JavaScript における最も重要なデータ構造の 1 つを扱うための基本的な操作を習得しました。

この実験では、以下のことを練習しました。

リテラル構文 ({}) を使用したオブジェクトの作成。
初期キーと値のペアでオブジェクトを格納すること。
ドット記法 (object.property) を使用したプロパティ値へのアクセス。
既存のプロパティの値の更新。
動的なオブジェクトへの新しいプロパティの追加。

オブジェクトの理解は、単純なデータストレージから複雑なアプリケーションアーキテクチャまで、あらゆる場所で使用されるため、あらゆる JavaScript 開発者にとって不可欠です。これらの概念を引き続き練習し、JavaScript プログラミングの強固な基盤を築いてください。

JavaScript オブジェクト