更新メソッド(setter)や関数を定義しよう！

なぜsetter(更新関数)を定義するの?

やるメリット

• 同じ意味をもつ更新がどこで行われているかわかる(なぜ関数を定義するのか)
• 行われうる更新を宣言することで逆に行われない更新を自明にできる

やらないデメリット

• 同じ更新が他の箇所でも書かれていてコード重複がおきている可能性がある
• 更新関数がないということは別の関数が更新関数を実現しているはずなのでその別の関数が太ってしまう
• どこでどんな更新が行われているのかわからなくなる

Object.assign(スプレッドシンタックス)はだめなの！？

• あるクラス(型)の中でプライベートに使うのはいいけど、クラス(型)の利用者が使うのやめたほうがいいんじゃないかな！
• ショートハンドはセッターとは違うぞ！

setterがない場合

const user = {id: 100, firstName: 'yamada', lastName: 'hanako' }

function onClickNameChangeSubmit(event) {
    const firstName = event.target.value

    let updatedUser = JSON.stringfy(JSON.parse(user))
    updatedUser.firstName = firstName

    save(updatedUser)

    alert("苗字が変更されました!")
}

object.assign(スプレッドシンタックス)を使ったら

const user = {id: 100, firstName: 'yamada', lastName: 'hanako' }

function onClickNameChangeSubmit(event) {
    const firstName = event.target.value

    // ぱっと見わかりやすくなった風だがこれをみてユーザの苗字を変えるとは読めないぞ...
    const updatedUser = {...user, firstName}

    save(updatedUser)

    alert("苗字が変更されました!")
}

setterを定義したら

• setUserFirstNameはonClickNameChangeSubmit以外の関数でも使えそうだね！

const user = {id: 100, firstName: 'yamada', lastName: 'hanako' }

function setUserFirstName(user, firstName) {
    return {...user, firstName}
}

function onClickNameChangeSubmit(event) {
    const firstName = event.target.value
    // 上から下へこの関数を読んだときにここでは苗字が更新されることが一目でわかる
    const updatedUser = setUserFirstName(user, firstName)
    save(updatedUser)

    alert("苗字が変更されました!")
}