setterとgetterの実装

JavaScript本格入門(ISBN 978-4774184111)で基礎からJavaScriptを勉強するシリーズです。
今回はChapter5からアクセサーメソッドについてです。

アクセサーメソッドは、セッターメソッドとゲッターメソッドを合わせた言い方です。
アクセサーメソッドの実装の仕方と使用方法について勉強したのでまとめます。

アクセサーメソッドを使わない実装

let human = {
    name:"",
    age:"",
}

// 使う側（値のセット）
human.name = "Giorno Giovanna";
human.age = 15;

// 使う側（値のゲット）
console.log(human.name);  // Giorno Giovanna
console.log(human.age);   // 15

非常にシンプルな実装です。
続いてアクセサーメソッドを用いた実装をしてみます。

アクセサーメソッドを使った実装

let human = {
    set name(value){
        this._name = value;
    },
    get name(){
        return this._name;
    },
    set age(value){
        this._age = value;
    },
    get age(){
        return this._age;
    }
}

// 使う側（値のセット）
human.name = "Giorno Giovanna";
human.age = 15;

// 使う側（値のゲット）
console.log(human.name);  // Giorno Giovanna
console.log(human.age);   // 15

humanオブジェクトの中にset構文とget構文を用いてプロパティを定義してみました。

まずセッターメソッドの動きを見てみます。

1. human.nameに値をセットすると、セッターメソッドset name(value)が呼ばれます
2. セッターメソッドの中では、human._nameというプロパティを新しく作成し、そこにvalueの値を格納します

使う側は、human.nameに値を代入したつもりなのですが、セッターメソッドの動きによって値をhuman._nameという別のところに格納したことになります。

次にゲッターメソッドの動きを見てみます。

1. human.nameにアクセスしようとすると、ゲッターメソッドget name()が呼ばれます
2. ゲッターメソッドの中では、human._nameというプロパティの値を戻り値として返します

使う側は、human.nameの値を取得したつもりなのですが、ゲッターメソッドの動きによってhuman._nameという別の値を取得させられます。

セッターメソッドとゲッターメソッドの働きによって、間接的にhuman._nameの値をやり取りするので、使う側からはhumanオブジェクトの中身がアクセサーメソッドを使って実装されてあろうがなかろうが、値のセットとゲットの方法は変わらないことに注目です。

値のセットとゲットにワンクッションあるだけですので、これではあまり何がうれしいのかわかりませんので、セッターとゲッターを使うと便利になる例を紹介します。

例1: プロパティに格納する値のチェックをしたい場合

human.nameに入る値は文字列でないといけないし、human.ageは数値であるべきです。
そのような場合、セッターメソッドにチェックする実装を入れてやることができます。

before

let human = {
    name:"",
    age:"",
}

// 使う側（値のセット）
human.name = 15;                   // 望ましくない値として数値が入ってきた
human.age = "Giorno Giovanna";     // 望ましくない値として文字列が入ってきた

// 使う側（値のゲット）
console.log(human.name);  // 15
console.log(human.age);   // Giorno Giovanna

望ましくない値がそのままプロパティにセットされてしまいます。

after

let human = {
    set name(value){
        if(typeof value === "string"){
            this._name = value;
        }else{
            console.log("nameが文字列じゃないじゃあないか！");
        }
    },
    get name(){
        return this._name;
    },
    set age(value){
        if(typeof value === "number"){
            this._age = value;
        }else{
            console.log("ageが数値じゃないじゃあないか！");
        }
    },
    get age(){
        return this._age;
    }
}

// 使う側（値のセット）
human.name = 15;
human.age = "Giorno Giovanna";

// 使う側（値のゲット）
console.log(human.name);  // undefined
console.log(human.age);   // undefined

実行結果

nameが文字列じゃないじゃあないか！
ageが数値じゃないじゃあないか！
undefined
undefined

セッターメソッドで値のチェックをすることができ、使う側が幾分か安全になりました。

例2: プロパティを読み取り専用にしたい場合

年齢は毎年変わりますが、名前はそう簡単には変わるものではありません。

なので、human.ageは後から書き換え可能にしたいですが、human.nameは後から変えられないように読み取り専用にしたいとします。

before

let human = {
    name: "Giorno Giovanna",  // もともとの名前
    age: 15,                  // もともとの年齢
}

// 使う側（値のゲット）
console.log(human.name);  // Giorno Giovanna
console.log(human.age);   // 15

// 使う側（値のセット）
human.name = "汐華初流乃";    // 改名！
human.age = 16;              // 加齢！

// 使う側（値のゲット）
console.log(human.name);  // 汐華初流乃（改名されてしまった。望ましくない）
console.log(human.age);   // 加齢された（これは望ましい）

これではhuman.nameの値が後から書き換えられてしまいます。
アクセサーメソッドを使ってhuman.nameを読み取り専用にしてみます。

after

let human = {
    _name : "Giorno Giovanna",  // もともとの名前
    _age : 15,                  // もともとの年齢
    get name(){
        return this._name;
    },
    set age(value){
        this._age = value;
    },
    get age(){
        return this._age;
    }
}

// 使う側（値のゲット）
console.log(human.name);  // Giorno Giovanna
console.log(human.age);   // 15

// 使う側（値のセット）
human.name = "汐華初流乃";    // 改名！
human.age = 16;              // 加齢！

// 使う側（値のゲット）
console.log(human.name);  // Giorno Giovanna（改名が阻止できた）
console.log(human.age);   // 加齢された（これは望ましい）

改名が阻止できました。
何をしたかというと、nameのセッターメソッドの実装をやめゲッターメソッドだけ持つようにするようにしました。これにより、human.nameは読み取り専用となりました。
human.ageは後で加齢できるように読み書きできるようにセッターメソッド、ゲッターメソッドの両方を持ちます。

例3: 例1と2を組み合わせる

プロパティに入れられる値をチェックし、なおかつ読み書きの制御も行います。
human.nameは後から書き換えできないように、human.ageはプロパティの値を加算するための専用の関数を定義します。これにより不用意に年齢を減らされたりすることがなくなるという意図です。

sample3

let human = {
    _name : "Giorno Giovanna",  // もともとの名前
    _age : 15,                  // もともとの年齢
    get name(){
        return this._name;
    },
    get age(){
        return this._age;
    },
    addAge(){                 // 年齢を加算するための関数
        human._age++; 
    }
}

console.log(human.name);  // Giorno Giovanna
console.log(human.age);   // 15

// 使う側（値のセット）
human.name = "汐華初流乃";      // 改名！
human.addAge();                // 加齢！

// 使う側（値のゲット）
console.log(human.name);  // Giorno Giovanna (セッターメソッドを持たないので改名は失敗)
console.log(human.age);   // 16 (addAgeを使って加齢できている)

まとめ

セッターメソッドとゲッターメソッドを使うことで、

1. プロパティに予期しない値が入るのを防ぐこと
2. プロパティの値が後から書き換わることを防ぐこと
   ができることがわかりました。

ただし、この実装では限界があり、使う側が直接human._nameやhuman._ageをアクセスしてしまうと、1、2が保証できなくなってしまいます。

コーディング規約などでアンダースコア付きのプロパティには直接アクセスしないことをお約束しておく必要があります。

おまけ

クロージャやシンボルを使うともう少し安全なアクセサーメソッドを実装することができます。

以下の記事で紹介されているものがわかりやすいです。
JavaScriptのgetter/setterの使い方を考えよう