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

JavaScriptでオブジェクトを作成し、プロパティにアクセスする方法を徹底解説

JavaScriptでは、オブジェクトリテラル（波括弧 {}）を使うことで、キーと値のペアを持つオブジェクトを簡単に作成できます。作成したオブジェクトのプロパティには、ドット記法（obj.propertyName）やブラケット記法（obj["propertyName"]）でアクセスします。

以下は、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;
    }
</style>
</head>
<body>
<h1>JavaScriptのオブジェクト操作</h1>
<div style="color: green;" class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、オブジェクトが作成され、そのプロパティが表示されます
</h3>
<script>
    let btnEle = document.querySelector(".btn");
    let resEle = document.querySelector(".result");
    let obj = {
        firstName: "Rohan",
        lastName: "Sharma",
        welcome() {
            return "Welcome " + this.firstName + " " + this.lastName;
        },
    };
    btnEle.addEventListener("click", () => {
        resEle.innerHTML = "obj.firstName = " + obj.firstName + "<br>";
        resEle.innerHTML += "obj.lastName = " + obj.lastName + "<br>";
        resEle.innerHTML += "obj.welcome() = " + obj.welcome() + "<br>";
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

JavaScriptでオブジェクトを作成し、プロパティにアクセスする方法を徹底解説

続いて、「CLICK HERE」ボタンをクリックすると、オブジェクトの各プロパティの値とメソッドの実行結果が画面に出力されます。

JavaScriptでオブジェクトを作成し、プロパティにアクセスする方法を徹底解説

ポイント解説

  • プロパティへのアクセス： obj.firstName のようにドット記法を使うことで、オブジェクト内の値を取得できます。キー名が変数や特殊な文字列の場合は、obj["firstName"] のようなブラケット記法も利用可能です。
  • メソッドの定義と呼び出し： オブジェクトの中に関数を定義するとメソッドとして扱えます。welcome() 内では this キーワードを使い、同じオブジェクトの firstName や lastName を参照しています。
  • イベント処理との組み合わせ： addEventListener でクリックイベントを検知し、innerHTML に結果を追記することで、ユーザーの操作に応じて動的に画面へ出力しています。
  1. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座

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

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