mizdra's poem

雑なこと (日記/技術ポエム/メモ/…) を書くブログです.

2020-05-02

掃除

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

乱数調整向けのタイマー

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

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

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

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

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

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

あと色々機能入れたらタイマーのコアのコードが膨らんできたので表現力の乏しいいくつかの機能を削って, 表現力の高い機能で置き換える, といったリファクタリングをしている. 雑にリファクタリングしたらめっちゃテスト落ちて困ってる. ちゃんと落ちてて安心だけど, それはそうと直すのはだるい...

*1:新しい技術なら楽しい訳でもないけど...