JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでオブジェクトのメンバー（プロパティ・メソッド）を設定する方法

JavaScriptでは、オブジェクトのメンバー（プロパティやメソッド）をドット記法を使って簡単に設定・追加できます。空のオブジェクトを作成した後でも、後から自由に新しいメンバーを動的に割り当てられるのがJavaScriptの柔軟な特徴です。

ここでは、実際のコード例を通じて、オブジェクトへのメンバー設定の基本を解説します。

コード例

以下は、JavaScriptでオブジェクトのメンバーを設定するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>オブジェクトメンバーの設定</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、studentオブジェクトのメンバーが設定され表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let student = {};
    BtnEle.addEventListener("click", () => {
        student.name = "Rohan";
        student.age = 22;
        student.displayInfo = function () {
            resEle.innerHTML = "Name = " + this.name + " : Age = " + this.age;
        };
        student.displayInfo();
    });
</script>
</body>
</html>

コードの解説

このサンプルコードのポイントは以下の通りです。

  • let student = {}; — まず空のオブジェクトを作成します。
  • student.name = "Rohan"; — ドット記法でnameプロパティを追加します。
  • student.age = 22; — 同様にageプロパティを追加します。
  • student.displayInfo = function () {...} — オブジェクトにメソッドを動的に追加し、内部ではthisを使って自身のプロパティを参照しています。

このように、宣言時にメンバーを定義しなくても、実行時に任意のタイミングでプロパティやメソッドを追加できる点が、JavaScriptのオブジェクト操作の大きな特徴です。

実行結果

JavaScriptでオブジェクトのメンバー（プロパティ・メソッド）を設定する方法

「CLICK HERE」ボタンをクリックすると、以下のようにstudentオブジェクトに設定された名前と年齢が画面に表示されます。

JavaScriptでオブジェクトのメンバー（プロパティ・メソッド）を設定する方法

  1. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars

  2. JavaScriptのforループを使って空のオブジェクトにプロパティを設定する方法

    JavaScriptでは、for...inループを使うことで、既存のオブジェクトから空のオブジェクトへプロパティを簡単にコピーできます。以下に、forループを使用して空のオブジェクトにプロパティを設定するサンプルコードを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,