CSS変数とsetIntervalのランダムカラーピッカー

はじめに

前回CSS変数を使ってbackground-colorを自動で変える、と言うのをやってみて

start / stop

ボタンを付けようとしたらrequestAnimationFrameではちょっと無理みたいだったので、setIntervalベースに書き換えました。
呼び出すたびにrandomで選ぶのをやめて最初にリストをランダムソートしてcounterで頭から順に代入していく方法にしました。たった150色なのにランダムに選んでいるとすぐ同じ色が出てきてしまうのがこれで解決します。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

感想

ネットでReactではsetIntervalやrequestAnimationFrameは扱いが難しいと書いている人が多いけど必ずしもそうは感じなかった。
題材としてはちょっと前だと途方に暮れるような話がエラーを潰していくと出来てしまうのはReact+TypeScriptのすごいところです。
改めて感じました。