スライダーを動かしても、画面が変わらなかった

日本経済シミュレーターをつくる第6回 ／ 全9回目次

計算が固まってきたので、ブラウザで実際に触って確かめる作業に入った。

消費税のスライダーを掴んで、10%から20%へ動かす。
スライダーの横のラベルは20.0になった。
変更したレバーに付く色も変わった。

右のダッシュボードだけが、まったく動かない。
名目GDPも、物価も、債務比率も、さっきと同じ数字のままだった。

エラーは出ていなかった

コンソールを見た。何も出ていない。
イベントは届いている。ラベルが更新されているのだから、そこは通っている。

実装はこうなっていた。

let queued = false;
function scheduleRecompute() {
  if (queued) return;
  queued = true;
  requestAnimationFrame(() => { queued = false; recompute(); });
}

スライダーを掴んでいるあいだ、入力イベントは1秒に何十回も飛んでくる。
そのたびに25年ぶんを計算してグラフを描き直すのはもったいないので、1フレームに1回にまとめていた。
よくある書き方だと思う。

裏に回ったタブでは、rAFが止まる

requestAnimationFrame は「次に画面を描くとき」に呼んでくれる仕組みだ。
そのタブが表示されていなければ、画面は描かれない。
だからコールバックも呼ばれない。

私が使っていた検証用のブラウザは、裏に回っていた。
イベントは届く。ラベルも更新される。でも計算だけが永久に待たされる。

タイマーに変えた。

let queued = null;
function scheduleRecompute() {
  if (queued !== null) return;
  queued = window.setTimeout(() => { queued = null; recompute(); }, 16);
}

16ミリ秒でまとめるのは同じ。
タブが裏でも動く。

直したあと、消費税を20%にすると2050年の借金が253%から140%に落ちて、実質の手取りが491万円から459万円に減った。
見たかったのはこれだ。

人が触っている限り、絶対に出ない不具合

この不具合には、少し考えさせられた。

誰かがこのページを開いて、目で見ながらスライダーを動かしている限り、タブは必ず表示されている。
だからこの不具合は起きない。
手で確かめているうちは、一生見つからなかったはずだ。

見つかったのは、自動で触ろうとしたからだった。
スクリプトからスライダーに値を入れて、結果を読み取ろうとして、読み取れなかった。

自動で確かめる仕組みは、手で確かめる作業を速くするものだと思っていた。
実際には、手では絶対に踏まない道を踏んでくれる。
そちらのほうが値打ちがあるのかもしれない。