Zenn
🗾

[JavaScript]オブジェクト とは （備忘録）

に公開
JavaScript
初心者
メモ
tech

１．はじめに

・オブジェクトとは、名前（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("プロパティが存在する");
}
実行結果
プロパティが存在する
プロパティが存在する

３．参考

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

４．その他

・実行環境

Discussion