JavaScriptでクラスのオブジェクトの値が変更されたかを確認し、それに基づいて別の値を更新するには？

はじめに

JavaScriptでは、クラスから生成したオブジェクト（インスタンス）のプロパティ値が変更されたかどうかを確認したい場面があります。そのような場合に役立つのが、ゲッター（getプロパティ）の仕組みです。ゲッターを利用すると、プロパティへアクセスするタイミングで任意の処理を挟めるため、値の変更を意識した設計が可能になります。

実装例

以下のコードでは、Studentクラスを定義し、コンストラクタ内でgetValuesというゲッター付きのオブジェクトを作成しています。

class Student{
    constructor(studentMarks1, studentMarks2){
        this.studentMarks1 = studentMarks1
        this.studentMarks2 = studentMarks2
        var alteredValue = this;
        this.getValues = {
            get studentMarks1() {
                return alteredValue.studentMarks1
            },
            get studentMarks2() {
                return alteredValue.studentMarks2
            }
        }
    }
}
var johnSmith = new Student(78,79)
console.log("Before incrementing the result is=")
console.log("StudentMarks1="+johnSmith.studentMarks1,"StudentMarks2="+johnSmith.studentMarks2);
johnSmith.studentMarks2+=10;
console.log("After incrementing the value 10 in the studentMarks2, the result is as follows=")
console.log("StudentMarks1="+johnSmith.studentMarks1,
"StudentMarks2="+johnSmith.getValues.studentMarks2);

プログラムの実行方法

上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo200.js」として保存しています。

実行結果

このプログラムを実行すると、次のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo200.js
Before incrementing the result is=
StudentMarks1=78 StudentMarks2=79
After incrementing the value 10 in the studentMarks2, the result is as follows=
StudentMarks1=78 StudentMarks2=89

コードのポイント解説

• コンストラクタ内の変数alteredValueには、this（インスタンス自身）への参照を保持しています。これにより、ゲッターから常に最新のプロパティ値を参照できます。
• getValuesオブジェクトには、studentMarks1とstudentMarks2の2つのゲッターが定義されています。アクセスされるたびに現在の値が返されるため、変更後の状態を確実に取得できます。
• 実行例では、直接アクセスした値（変更前）と、ゲッター経由で取得した値（10点加算後）を比較することで、値の変化を確認しています。

補足：より高度な変更検知の方法

単純な比較だけでなく、プロパティの変更自体をフックしたい場合は、Object.defineProperty()でsetアクセサを定義する方法や、ES2015で導入されたProxyオブジェクトを利用する方法もあります。Proxyを使えば、プロパティの読み書きに介入できるため、「値が変更されたら別の値を自動的に更新する」ようなリアクティブな処理も柔軟に実装できます。