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

JavaScriptのアクセサプロパティとその属性を徹底解説！getterとsetterの使い方

JavaScriptにおけるアクセサプロパティ（accessor property）は、オブジェクトの値を読み書きする際に、関数（getter・setter）を実行できる特殊なプロパティです。単に値を保持するデータプロパティとは異なり、値の取得や設定のタイミングで独自の処理を挟むことができるため、データの検証や加工などに非常に便利です。

アクセサプロパティの4つの属性

アクセサプロパティには、以下の4つの属性があります。

  • get：プロパティが読み取られる際に呼び出される関数です。引数は取りません。
  • set：プロパティに値が設定される際に呼び出される関数です。引数は1つだけ受け取ります。
  • enumerable：trueに設定すると、そのオブジェクトを列挙可能（for...inループやObject.keys()の対象）にできます。
  • configurable：falseに設定すると、そのプロパティの削除や属性の変更ができなくなります。

これらの属性は Object.defineProperty() メソッドを使って定義することもできますが、オブジェクトリテラル内では get / set 構文を直接記述するのが一般的です。

アクセサプロパティの実装例

以下のコードは、getterとsetterを使ってpersonオブジェクトのプロパティを取得・変更するシンプルな例です。

<!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>
<br />
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、get / set を使ってpersonオブジェクトのプロパティを表示・変更します</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let person = {
        name: "Rohan",
        age: 22,
        occupation: "Student",
        get fullname() {
            return this.name;
        },
        set job(occupation) {
            this.occupation = occupation;
        },
    };
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML =
        "Name = " + person.fullname + " : Occupation = " + person.occupation;
        resEle.innerHTML += "<br>occupationプロパティ変更後 <br>";
        person.occupation = "Developer";
        resEle.innerHTML += "New Occupation = " + person.occupation;
    });
</script>
</body>
</html>

実行結果

JavaScriptのアクセサプロパティとその属性を徹底解説！getterとsetterの使い方

「CLICK HERE」ボタンをクリックすると、以下のように表示されます。

JavaScriptのアクセサプロパティとその属性を徹底解説！getterとsetterの使い方

コードのポイント

  • get fullname()：オブジェクトリテラル内でgetterを定義しています。person.fullname のように通常のプロパティと同じ形式でアクセスすると、関数が自動的に実行され、this.name の値が返されます。
  • set job(occupation)：setterの定義例です。代入時に呼び出され、受け取った引数を内部の occupation プロパティに格納します。
  • このようにアクセサプロパティを使うことで、外部からは普通のプロパティのように見えながら、内部で柔軟な処理を行うことができます。

getterとsetterを活用すれば、不正な値の代入を防ぐバリデーション処理や、値の変更をトリガーとした自動計算なども実現できるため、実務でも広く使われているテクニックです。

  1. JavaScriptのsourceプロパティとは？正規表現パターンテキストを取得する方法を解説

    JavaScriptのsourceプロパティは、RegExp（正規表現）オブジェクトに設定されたパターン文字列そのものを返すプロパティです。g（グローバルマッチ）やi（大文字・小文字を区別しない）などのフラグは結果に含まれず、マッチング対象となる純粋な正規表現テキストのみを取得できます。 動的に正規表現を組み立てたい場合や、デバッグ時に実際に適用されているパターンを確認したい場合などに活用できる便利なプロパティです。 基本構文 const regex = /pattern/flags; console.log(regex.source); // パターン文字列のみが返される サンプルコード

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

    JavaScriptでは、オブジェクトリテラル（波括弧 {}）を使うことで、キーと値のペアを持つオブジェクトを簡単に作成できます。作成したオブジェクトのプロパティには、ドット記法（obj.propertyName）やブラケット記法（obj[propertyName]）でアクセスします。 以下は、JavaScriptでオブジェクトを作成し、そのプロパティやメソッドにアクセスする具体的なコード例です。 コード例 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta