フロントエンドFWのState管理を素のjavascriptで表現する

概要

以前、Reactの特徴をjQueryで表現するという趣旨の非常に価値のある記事があったのですが翻訳記事・翻訳元の記事どちらも消えて見えなくなってしまったため、その記事を私なりの解釈で改めてまとめ直してみることにしました。

この記事では、フロントエンドフレームワーク(React, Vue.js)の特徴の中でも重要な考え方であるState管理に焦点を絞って解説します。なお、jQueryではなく素のjavascriptを使用しています。

元のコード

<span id="colored-counter">0</span>
<input id="color" placeholder='#000'></input>
<input type="button" id="count_button" value='add' />

<script>
  document.querySelector("#color").onkeyup = function() {
    document.querySelector('#colored-counter').style.color = this.value;
  }

  document.querySelector("#count_button").onclick = function() {
    const oldValue = document.querySelector('#colored-counter').innerHTML;
    const newValue = 1 + Number(oldValue);
    document.querySelector('#colored-counter').innerHTML = newValue;
  }
</script>

動かして確認するほど大層なものではありませんが、動かしたい場合はコピペで動くはずです。
機能は、以下のようなものです。

• ボタンを押すとカウントが1加算される
• カラーコードを入力するとカウントの色が変わる

これを、State管理の考え方を以て書き直してみます。

State管理の考え方を取り入れたコード

<span id="colored-counter">0</span>
<input id="color" placeholder='#000'></input>
<input type="button" id="count_button" value='add' />

<script>
  let state = {color: '', value: 0};

  function setState() {
    document.querySelector('#colored-counter').style.color = state.color;
    document.querySelector('#colored-counter').innerHTML = state.value;
  }

  document.querySelector('#color').onkeyup = function () {
    state.color = this.value;
    setState();
  }

  document.querySelector('#count_button').onclick = function () {
    state.value++;
    setState();
  }
</script>

機能は、上のコードと同じです。
ここで表現したいことは、

• あちこちのコードでDOMを直接操作しないようにする(.innerTextや.styleを使う場所を1箇所に集約する)
• DOMの状態は1つのHash変数で管理する
• その変数を元に画面更新メソッドにより描画の更新が行われる

と言った内容。考え方としてはReact, Vue.jsどちらも大体同じであるはず。

なお、これはフロントエンドフレームワークを使えない・使いたくない人にこそ知ってほしい考え方の紹介であって、単純に「jQuery、バニラでもできるからやろう」という意味ではありません（jQuery、バニラで取り入れては絶対だめということではありませんが）。