2020-05-02 - mizdra's poem

掃除

連休初日の朝から机周り掃除した. めっちゃ偉い.

乱数調整向けのタイマー

rocketimerという乱数調整向けのタイマー作ってる. 昔emtimerという乱数調整向けのタイマー作ったことあって, それの第二世代という位置づけ. emtimerは既存の乱数調整向けのタイマーがFlash製で数年後にサポート終了することから, その代替として開発したものだった. 機能も既存の乱数調整向けのタイマーとほぼそっくりで, いわばモダンな技術でタイマーを作り直しただけ. UIがモダンだったり, モバイルフレンドリー, Flashの無い環境でも動くといった点がウケたのか, 今でもそれなりのアクセス数がある.

一方で, emtimerには以下のような問題がある.

Viewとタイマーのコアが密結合している
- 新しいタイプのカウントダウンタイマーを実装しようにも, 既存のタイマーを壊さずに導入することが困難
テストが無い
- Viewのテストもタイマーのコアの部分のテストも一切無い
- 密結合しているためタイマーの部分だけテストすることが難しく, 結果としてテストが無い状態
- リファクタリング困難
- タイマーでは performance.now や Audio#play などデバイスレベル/低レベルなAPIに強く依存しており, ブラウザのアップデートにより壊れやすい
- テストが無いので壊れても気づけない
60pfsで描画されない
- 乱数調整では1/60秒単位でゲームの操作を要求されるため, タイマーも60fpsで動作してほしい
- しかし今のemtimerは40〜55fpsほどしか出ていない
多段タイマー機能がない
- 1つ目のタイマーが終わったら, 2つ目のタイマーを開始してほしい(多段タイマー), という需要があるが, それをサポートする機能が今のemtimerにはない
- Viewとタイマーのコアが密結合しているため実装が困難
コードベースが古い
- アップデートをサボっていたせいでライブラリやフレームワークのバージョンが古い
- 今だったらもっと格好良い書き方できるはずだけどフレームワークのバージョンが古くてそんなことはできない, みたいな状態

どこ弄ったらどうなるか分からないし, ちょっと弄ったらすぐ壊れるし, そもそも技術が古いのでコード書いてて特に楽しさはない*1.

これらの反省を踏まえて, Viewとタイマーのコアが疎結合で, テストがあって, 60fpsで動作して, ユーザからの機能拡張の要望に答えられ, ライブラリなどのアップデートに追従できるタイマーを開発しましょう, ということになった. 具体的にはVue.js v2からReactに移行 / タイマーのコアは単なるクラスとして切り出し, それを対象にテストを用意する / タイマークラスはReact Hooksを使ってViewと繋ぎこむ / CIとdependabotを導入する, といったことをしている.

今日は秒の位が切り替わる度に音を鳴らす仕組みを作っていた. Hooks使うとこういうのサッと書けて良いですね.