以前書いた bingoゲーム
GitHub - kanayannet/bingo: bingo game helper
を Vue.js を使い 勉強がてらに書き直して見ました。
やってみての感想は 前回が データを整形するアルゴリズムの部分 と DOMにデータを反映するコードが一緒くたになってしまったのですが、今回は比較的分離する事に成功しました。
( そうする事で データを整形するアルゴリズムの部分だけにテストコードを適用できる )
なぜやり易かったのか、振り返って見ると..
変数の値を書き換えるだけで view(dom)の書き換えを自動的に行ってくれるポイントが大きかったように見えます。(双方向のデータバインド)
jquery だけの場合 変数の値を書き換える -> DOM にその情報を渡す という二つのコーディングが必要ですが( 非同期処理内で行うと 一緒くたになりやすい) Vueの事前に宣言しておくだけで双方向のデータバインドが可能になる方法だと 非同期処理内では データ書き換えだけを行えば良く上手くいきました。
言葉にすると解りづらいのですが(汗) コードを比較すると解ると思います。
おまけ: 非同期処理のテストコードを jest で書いたのですが、setInterval した後の値の評価を どうしたら良いか始め解らなかったのでついでにここに記します。
http://jestjs.io/docs/ja/timer-mocks.html
非同期処理が全て走った後, 非同期処理が何回繰り返した など 拾え(コントロールできる)て便利です。
