１．はじめに

・オブジェクトとは、名前（key）と値（value）のペアで構成されたデータの集合体です。
・名前（key）と値（value）がペアになったものを、プロパティと呼びます。
・オブジェクトは、メソッドと呼ばれる関数を値として持つことが可能で、オブジェクトの振る舞いを定義する役割を果たします。

オブジェクトの作成例

const オブジェクト名 = {
    // プロパティ
    key1: value,
    // メソッド
    key2: function() {
        // 処理内容
    }
};

２．サンプルプログラム

〇例１：まずはじめに...

Sample_1.js

const fruit = {
    info: "輸入品",
    list: ["オレンジ", "バナナ", "パイナップル"],
    price: ["150", "200", "300"],
    // メソッド
    msg: function() {
        console.log(`${this.list[0]}の価格は、${this.price[0]}円です。`);
    },
};

// ドット記法を使用し、プロパティへ接続
console.log(fruit.info);
// ドット記法を使用し、メソッドを呼び出す
fruit.msg();

実行結果

輸入品
オレンジの価格は、150円です。

〇例２：簡潔なメソッドの書き方

Sample_2.js

const fruit = {
    info: "輸入品",
    list: ["オレンジ", "バナナ", "パイナップル"],
    price: ["150", "200", "300"],
    //　簡潔なメソッドの書き方
    msg() {
        console.log(`${this.list[0]}の価格は、${this.price[0]}円です。`);
    },
};

// ドット記法を使用し、プロパティへ接続
console.log(fruit.info);
// ドット記法を使用し、メソッドを呼び出す
fruit.msg();

〇例３：複数の単語から構成されるプロパティ名

Sample_3.js

const user = {
    name: "山田",
    age: 20,
    //　複数の単語から構成されるプロパティ名
    "is student": true
};

// ブラケット記法を使用し、プロパティへ接続
console.log(user["is student"]);

// プロパティを削除
delete user["is student"];
console.log(user);

// プロパティを再設定
user["is student"]　= false;
console.log(user);

実行結果

true
{ name: '山田', age: 20 }
{ name: '山田', age: 20, 'is student': false }

〇例４：オブジェクトの中でオブジェクトを使用

Sample_4.js

const person_info = {
    name: "大谷",
    age: 30,
    address: {
        prefecture: "東京",
        //　複数の単語から構成されるプロパティ名
        "postal-code": "123-4567"
    }
}

// ドット記法を使用し、プロパティへ接続
console.log(`名前: ${person_info.name}`);
console.log(`年齢: ${person_info.age}`);

// ブラケット記法を使用し、プロパティへ接続
console.log(`住所：${person_info["address"]["prefecture"]}、郵便番号：${person_info["address"]["postal-code"]}`);

実行結果

名前: 大谷
年齢: 30
住所：東京、郵便番号：123-4567

〇例５：データの動的な取得/更新

その１

Sample_5.js

const person_info = {
  name: "山本",
  age: 30,
};

function getPersonInfo(key) {
    // 動的にプロパティの値を参照
    return person_info[key];
}

console.log(getPersonInfo("name"));
console.log(getPersonInfo("age"));

実行結果

山本
30

その２

Sample_6.js

const customerInfo = {
    name: "シュワルツネッガー",
    email: "schwarzenegger@example.com"
};

// 動的にプロパティを更新する関数
function updateInfo(key, value) {
     // 指定されたプロパティを動的に更新
    customerInfo[key] = value;
}

// 名前を更新
updateInfo("name", "ターミネーター");
// メールアドレスを更新
updateInfo("email", "terminator@example.com");

// 更新確認
console.log(customerInfo);

実行結果

{ name: 'ターミネーター', email: 'terminator@example.com' }

その３

Sample_7.js

const movieInfo = {
    name: "Terminator",
};

// オブジェクトにプロパティを追加する関数
function updateInfo(key, value) {
    movieInfo[key] = value;
}

// 関数を呼び出す
updateInfo("quote", "There is no fate but what we make for ourselves.");

// 更新確認
console.log(movieInfo);

実行結果

{
  name: 'Terminator',
  quote: 'There is no fate but what we make for ourselves.'
}

その４

Sample_8.js

const languages = {
    ja: "日本語",
    en: "英語",
    zh: "中国語",
    de: "ドイツ語",
    ar:	"アラビア語"
};

const nativeLanguage = "ja";

console.log(`私の母国語は、${languages[nativeLanguage]}です。`);

実行結果

私の母国語は、日本語です。

〇例６：プロパティの存在確認

Sample_9.js

const customerInfo = {
    name: "田中",
    email: undefined
};

if ("name" in customerInfo) {
    console.log("プロパティが存在する");
}

if ("email" in customerInfo) {
    console.log("プロパティが存在する");
}

if ("msg" in customerInfo) {
    console.log("プロパティが存在する");
}

実行結果

プロパティが存在する
プロパティが存在する

!

in 演算子について：
・in 演算子は、指定したプロパティがオブジェクト内に存在するか判定する時に使用します。
・判定結果は、真偽値を返します。
・プロパティの値が undefined であっても、プロパティそのものが存在する場合には true を返します。

in 演算子の書き方

if ("プロパティ名" in オブジェクト名) {
    // 処理内容
}

３．参考

・JavaScript オブジェクトの基本
・オブジェクト

４．その他

・実行環境

Discussion