JavaScriptのオブジェクト活用例！実践的なサンプルコードで学ぶ
生徒
「JavaScriptのオブジェクトってどんなふうに使うんですか？実際の使い方を知りたいです。」
先生
「いい質問ですね。オブジェクトはデータをまとめて扱うのに便利で、例えば人物情報や商品情報などを管理するときに使います。実際のコードで説明しましょう。」
生徒
「お願いします！実践的なサンプルを見ながら学びたいです。」
先生
「それでは、いくつかの活用例を順に紹介しますね。」
1. 人物情報を管理するオブジェクトの活用例
まずは「人物」を表すオブジェクトを作り、名前や年齢、趣味を管理する例です。オブジェクトは複数の情報を一つにまとめる箱のようなものです。
const person = {
name: "佐藤 太郎",
age: 30,
hobbies: ["読書", "映画鑑賞", "ジョギング"]
};
console.log(person.name); // 佐藤 太郎
console.log(person.hobbies[1]); // 映画鑑賞
このようにオブジェクトは関連する情報をひとまとめにして扱えます。
2. 商品情報をオブジェクトで管理する例
オンラインショップなどでは商品情報を管理します。商品名や価格、在庫数などをオブジェクトにまとめましょう。
const product = {
id: 1001,
name: "コーヒーメーカー",
price: 8500,
stock: 15
};
// 価格を表示
console.log("商品名：" + product.name);
console.log("価格：" + product.price + "円");
// 在庫があるかチェック
if (product.stock > 0) {
console.log("在庫あり");
} else {
console.log("在庫なし");
}
このようにオブジェクトは状態の管理に便利です。
3. オブジェクトのプロパティを追加・変更する実例
後からオブジェクトに新しい情報を追加したり、値を更新することもよくあります。
// 新しいプロパティを追加
product.discount = 500;
// 価格を更新
product.price = product.price - product.discount;
console.log("割引後の価格：" + product.price + "円");
このように簡単にオブジェクトの内容を変えられます。
4. 複数のオブジェクトを配列にまとめて管理する例
複数の人物や商品を扱うときは、オブジェクトを配列にまとめます。
const people = [
{name: "佐藤 太郎", age: 30},
{name: "鈴木 花子", age: 25},
{name: "高橋 一郎", age: 40}
];
// 全員の名前を表示
for (let i = 0; i < people.length; i++) {
console.log(people[i].name);
}
オブジェクトと配列の組み合わせで複雑なデータも管理できます。
5. オブジェクトのメソッドを使った便利な操作
オブジェクトの中に「メソッド（関数）」を入れて、データの操作や処理をまとめることもできます。
const calculator = {
a: 10,
b: 5,
sum: function() {
return this.a + this.b;
},
multiply() {
return this.a * this.b;
}
};
console.log(calculator.sum()); // 15
console.log(calculator.multiply()); // 50
このようにオブジェクトの中で関数を使うことで、データと処理をまとめられます。
6. オブジェクトを関数で作成する「ファクトリ関数」
同じ種類のオブジェクトを何度も作りたいときに便利な作り方です。
function createPerson(name, age) {
return {
name: name,
age: age,
greet() {
console.log("こんにちは、" + this.name + "です。");
}
};
}
const person1 = createPerson("田中 健", 28);
const person2 = createPerson("山田 美咲", 32);
person1.greet(); // こんにちは、田中 健です。
person2.greet(); // こんにちは、山田 美咲です。
このように関数を使うと、同じ形のオブジェクトを簡単にたくさん作れます。
7. ネスト（入れ子）されたオブジェクトの扱い方
オブジェクトの中にさらにオブジェクトを入れて複雑なデータを表現できます。
const user = {
name: "佐々木",
address: {
city: "大阪市",
street: "梅田1-2-3"
}
};
console.log(user.address.city); // 大阪市
深い階層のデータにアクセスするときは、こうした書き方を覚えましょう。
8. オブジェクトの安全なプロパティアクセス（Optional Chaining）
ネストしたオブジェクトの中身がないとエラーになることがあります。そんなときは「オプショナルチェイニング」を使います。
console.log(user.contact?.email); // undefined（エラーにならない）
「?.」を使うことで、途中に存在しないプロパティがあっても安全にアクセスできます。
9. JSON形式でオブジェクトを文字列に変換・戻す例
JavaScriptのオブジェクトはネット通信や保存のために文字列に変換（シリアライズ）できます。
const jsonStr = JSON.stringify(person);
console.log(jsonStr);
const obj = JSON.parse(jsonStr);
console.log(obj.name);
文字列にして送ったり保存したりし、また元に戻せるのでとても便利です。
10. 実際のWebアプリでのオブジェクト活用例
たとえば買い物かごアプリでは商品をオブジェクトで管理し、追加・削除・合計金額計算などを行います。
const cart = {
items: [],
addItem(item) {
this.items.push(item);
},
getTotal() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
};
cart.addItem({name: "りんご", price: 100});
cart.addItem({name: "バナナ", price: 150});
console.log(cart.getTotal()); // 250
このようにオブジェクトでデータを整理し、メソッドで操作することが現実のプログラムで多く使われます。
