JavaScript超入門⑥ オブジェクトとJSONでデータを整理しよう
オブジェクト、プロパティ、メソッド、JSON.stringify、JSON.parseを学びます。
第6回では、関係する値をひとまとめにするオブジェクトを学びます。
オブジェクト
const student = {
name: "Aoi",
score: 80,
passed: true
};
console.log(student.name);
console.log(student.score);nameやscoreをプロパティと呼びます。ドットを使って値へアクセスします。
値を変更・追加する
student.score = 90;
student.className = "A";存在するプロパティなら変更され、新しい名前なら追加されます。
メソッド
オブジェクトの中へ関数を入れることもできます。
const player = {
name: "Aoi",
hp: 100,
showStatus() {
console.log(`${this.name}: HP ${this.hp}`);
}
};
player.showStatus();オブジェクトの中の関数をメソッドと呼びます。thisは、そのメソッドを持つオブジェクト自身を表します。
オブジェクトの配列
const students = [
{ name: "Aoi", score: 80 },
{ name: "Ren", score: 65 }
];
for (const student of students) {
console.log(`${student.name}: ${student.score}点`);
}複数人のデータを扱えます。
JSON
JSONは、データを文字列として保存・送信するときによく使われる形式です。
const text = JSON.stringify(student);
console.log(text);
const restored = JSON.parse(text);
console.log(restored.name);stringifyはオブジェクトをJSON文字列へ変換し、parseはJSON文字列をオブジェクトへ戻します。
小さな練習
商品名、価格、在庫数を持つproductオブジェクトを作り、文章として表示してください。
模範解答
const product = {
name: "キーボード",
price: 4800,
stock: 6
};
console.log(`${product.name}は${product.price}円で、在庫は${product.stock}個です`);解説
1つの商品に関係する3つの値をproductへまとめています。product.nameのように、オブジェクト名とプロパティ名をドットでつなぐと値を取り出せます。
まとめ
- オブジェクトは、関係する値をプロパティとしてまとめます。
- オブジェクトの中の関数をメソッドと呼びます。
- JSONはデータの保存や通信でよく使われます。