JavaScript で状態管理から部分更新にしたらハッピーになれた

ども、@kimihomです。

今回はプログラミングにおける考え方について。

JavaScript による状態管理について

JavaScriptを用いたリッチな Web アプリケーションを作ろうとすると、状態管理が結構難しくなってくる。「Aという部分が更新されると、BとCが変わる。Bが削除されると、AとCが変わる」みたいなUIを作ろうとした時、それらすべてをAjaxで更新後にJavaScriptでUIをいじる、というような操作をしなければならなくなる。これは結構大変で、バグを起こしやすい。

そこで最近はバインディングとか、リアクティブプログラミングとかが人気になっている。まさにエクセル関数のようなものだ。 "AはBとCの値の結果だ"とあらかじめ定義しておけば、BとCが変わった時に自動でAも変わるような仕組みを作ることができる。これは良いアプローチだとは思うが、JavaScriptに依存しすぎているので、個人的にはあまりやりたくない。

ちなみに jQuery でも、"trigger" という関数をうまく使えば、上記のような実装が可能になる。triggerはあまり知られてないようで、とても使える関数なので、知らなかった人はぜひ調べてみてほしい。iOS でいう Local Notification、AndroidでいうEventBus のような仕組みを作れるというとイメージしやすいか。

部分更新について

部分更新とは本ブログで便宜的に命名しているだけであるので注意していただきたい。部分更新が具体的にどういうことかというと、状態管理が複雑なUI部分については、すべてAjaxでHTMLを取得するようにし、その部分を適宜更新していくというやり方だ。これはとてもうまくいくし、シンプルに記述することができるようになる。

  var ajaxHtml = function(url, wrapper) {
    $.ajax({
      type: "GET",
      url: url,
      success: function(res){
        $(wrapper).html(res);
      }
    });
  };

  // 例
  ajaxHtml("/header", "#header");

部分更新したいパーツを指定し、更新したいときにajaxHtmlを呼ぶようにする。こうすると、状態管理はすべてサーバーサイドの View 側に集約されるので、JavaScript側で状態管理をする必要がなくなる。状態が変化したときは毎回 ajaxHtml を呼ぶだけでよくなる。このテクニックは、場合によっては一瞬パーツが切り替わってしまう。最近のWebサービスではその部分更新されるパーツは、ローディング中は何かしら画像を出すようにして待たせるようなUIにしているところも多い。

部分更新のテクニックにより、状態管理の必要がなくなり、しかもコードはとてもシンプルになる！

だが、もし、切り替わりなどの制約を受けたくないという残念な仕様な場合はJavaScriptで徹底的に状態管理をするしかなくなる。そういう場合は最近流行りのJSフレームワークを使ったほうがいいのかもしれない。