JavaScriptを学ぶ上で欠かせない「オブジェクト」。
データを整理して扱う中心的な仕組みであり、JavaScriptの強力なツールです。この記事では、オブジェクトの基本から、応用的な使い方まで丁寧に解説します！初心者でも安心して理解できるように、サンプルコードを交えながらお伝えしますね。
オブジェクトとは？
オブジェクトは、「キー」と「値」の組み合わせでデータを管理する仕組みです。この組み合わせを「プロパティ」と呼びます。
また、オブジェクト内に関数を定義することもでき、これを「メソッド」と呼びます。
オブジェクトの例
javascriptコードをコピーするconst person = {
name: "太郎", // プロパティ: キーは "name", 値は "太郎"
age: 25, // プロパティ: キーは "age", 値は 25
greet: function() { // メソッド: プロパティに関数を設定
console.log("こんにちは、私は太郎です！");
}
};
// オブジェクトを表示
console.log(person);
オブジェクトの作り方
オブジェクトリテラルを使う（基本の方法）
もっとも簡単な方法が「オブジェクトリテラル」。キーと値をペアで定義します。
javascriptコードをコピーするconst book = {
title: "JavaScript入門",
author: "田中次郎",
year: 2025
};
コンストラクタを使う（応用編）
Object コンストラクタを使うと、動的にオブジェクトを生成することができます。
javascriptコードをコピーする<code>const car = new Object();
car.brand = "トヨタ";
car.model = "カローラ";
car.year = 2023;
console.log(car);
</code>プロパティとメソッドの操作
プロパティにアクセスする方法
オブジェクトのプロパティにアクセスするには、「ドット記法」または「ブラケット記法」を使います。
javascriptコードをコピーする<code>console.log(person.name); // "太郎"（ドット記法）
console.log(person["name"]); // "太郎"（ブラケット記法）
</code>プロパティの追加・変更・削除
オブジェクトは後からプロパティを追加・変更したり、削除することが可能です。
javascriptコードをコピーする<code>person.job = "エンジニア"; // プロパティを追加
person.age = 30; // プロパティを変更
delete person.job; // プロパティを削除
console.log(person);
</code>オブジェクトの反復処理
for…in ループ
オブジェクトのすべてのプロパティを1つずつ処理するために使います。
javascriptコードをコピーする<code>for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
</code>Object.keys() と Object.values()
すべてのキーや値を取得するために便利なメソッドです。
javascriptコードをコピーする<code>console.log(Object.keys(person)); // ["name", "age", "greet"]
console.log(Object.values(person)); // ["太郎", 30, [Function: greet]]
</code>オブジェクトのネスト
オブジェクトの中に、さらに別のオブジェクトを格納することも可能です。
データをより構造的に管理できるため、現実のデータモデルに近づけることができます。
javascriptコードをコピーする<code>const company = {
name: "TechCorp",
employees: {
CEO: "山田一郎",
developer: "鈴木花子"
}
};
console.log(company.employees.CEO); // "山田一郎"
</code>オブジェクトのコピー
シャローコピー（浅いコピー）
オブジェクトをコピーする簡単な方法ですが、ネストされたオブジェクトの中身まではコピーされません。
javascriptコードをコピーする<code>const copiedPerson = Object.assign({}, person);
console.log(copiedPerson);
</code>ディープコピー（深いコピー）
ネストされたオブジェクトも含めてコピーする場合、JSON.parse を使用します。
javascriptコードをコピーする<code>const deepCopied = JSON.parse(JSON.stringify(company));
</code>オブジェクトを使った実践例
ショッピングカートの管理
オブジェクトを使うと、データの構造化や計算が簡単になります。
javascriptコードをコピーする<code>const shoppingCart = {
items: [
{ name: "りんご", price: 100 },
{ name: "バナナ", price: 150 }
],
totalPrice: function() {
return this.items.reduce((total, item) => total + item.price, 0);
}
};
console.log(shoppingCart.totalPrice()); // 250
</code>まとめ
オブジェクトは、JavaScriptの中核をなすデータ構造です。プロパティとメソッドを使って、データを整理し、プログラムの動作を定義できます。今回学んだ以下のポイントを押さえておきましょう：
- オブジェクトの基本（リテラル記法やコンストラクタでの作成）。
- プロパティの操作（追加・変更・削除、アクセス方法）。
- オブジェクトの反復処理（
for...in、Object.keysなど）。 - 実践的な応用（ネストやコピー）。
オブジェクトを使いこなせば、JavaScriptの可能性がぐんと広がります！ぜひ、この記事のサンプルコードを試してみてくださいね。
コメント