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

JavaScriptでオブジェクトの値を動的に設定する方法をわかりやすく解説

JavaScriptでは、オブジェクトのプロパティ（値）を後から動的に変更・設定することができます。本記事では、ボタンをクリックしたタイミングでオブジェクトの値を書き換える具体的なコード例を紹介します。

実装例：オブジェクトの値を動的に変更する

以下のコードでは、student オブジェクトの name プロパティと age プロパティを、ボタンクリック時に動的に更新しています。

<!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>JavaScriptオブジェクトの値を動的に設定する</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、studentオブジェクトの値が動的に変更されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let student = {
        name: "Rohan",
        age: 22,
        displayInfo() {
            return "Name = " + this.name + " : Age = " + this.age + "<br>";
        },
    };
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = student.displayInfo();
        resEle.innerHTML += "<br>プロパティ変更後 <br>";
        student.name = "Shawn";
        student.age = 19;
        resEle.innerHTML += student.displayInfo();
    });
</script>
</body>
</html>

コードのポイント

  • ドット記法による代入： student.name = "Shawn"; のように、既存のプロパティ名に対して新しい値を代入することで、簡単に値を更新できます。
  • メソッド内での this の活用： displayInfo() メソッドは this.name や this.age を参照しているため、プロパティを書き換えると表示内容も自動的に反映されます。
  • イベントリスナー： ボタンの click イベント内でプロパティを更新し、その結果を即座に画面へ出力しています。

出力結果

JavaScriptでオブジェクトの値を動的に設定する方法をわかりやすく解説

「ここをクリック」ボタンを押すと、次のようにプロパティ変更前後の値が表示されます。

JavaScriptでオブジェクトの値を動的に設定する方法をわかりやすく解説

このように、JavaScriptのオブジェクトは宣言後に自由に値を書き換えられる柔軟なデータ構造です。なお、プロパティ名が変数に格納されている場合などは、student["name"] のようなブラケット記法を使うことで、より動的なアクセスも可能になります。状況に応じてドット記法とブラケット記法を使い分けるとよいでしょう。

  1. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /

  2. JavaScriptで既存のオブジェクトにプロパティとメソッドを追加する方法

    JavaScriptのオブジェクトは動的な性質を持っており、一度作成した後でも、いつでも新しいプロパティやメソッドを追加できます。最もシンプルな方法は、ドット記法（オブジェクト名.プロパティ名）を使って値を代入することです。プロパティに関数を代入すれば、それがそのままメソッドとして機能します。 基本的な書き方 object.newProperty = value; object.newMethod = function() {   // 処理 }; サンプルコード 以下は、既存の student オブジェクトにプロパティとメソッドを追加し、その内容を画面に表示する完全な例で