BFE.devでのAI解答例 - JavaScript コーディング問題
154. Two-way bindingを実装する

以下が解答例です。

function model(state, element) {
  // 初期値の設定
  element.value = state.value 

  // input要素の値が変更されたときの処理
  element.addEventListener('input', () => {
    state.value = element.value
  })

  // stateオブジェクトの値が変更されたときの処理
  Object.defineProperty(state, 'value', {
    get() {
      return this._value
    },
    set(newValue) {
      this._value = newValue
      element.value = newValue
      element.dispatchEvent(new Event('change'))
    }
  })
}

解説：

1. model関数は、stateオブジェクトとelementオブジェクトを受け取って、二者間の監視を始める関数です。
2. 初期値の設定は、各valueプロパティが保持している値をinput要素のvalueプロパティに設定することで実装されます。
3. addEventListener('input')メソッドが使われているため、ユーザーがinput要素に入力したときに監視対象とすることができます。
4. Object.defineProperty()を用いることで、stateオブジェクトのvalueプロパティの値変更を監視し、element要素のvalueプロパティを変更していきます。また、element.dispatchEvent(new Event('change'))を呼ぶことで、input要素のchangeイベントを発生させています。