Year Progress

一年は50週ちょっとしかない

一年を週で数えると、52週とちょっと。

カレンダーで見ると長そうなのに、週で数えると急に短くなる。そんな感覚を形にしたくて、このページの上の方に進捗バーを置いた。

やっていることは単純で、「今年が何%進んだか」をリアルタイムで表示しているだけ。

なぜ作ったか

理由は3つある。

1. 時間を「量」として見たかった ── イベントや予定ではなく、単純に「どれだけ経ったか」を数値で見たかった。
2. 目に見える形にしたかった ── 抽象的な「一年」を、動く数字に落とすとどう感じるか試したかった。
3. 自分の場所に置きたかった ── 誰かのツールを借りるのではなく、自分のブログに自分で作ったものを置きたかった。

実装の話

せっかく作るなら、それなりに丁寧にやりたかった。

• Web Components で実装。ブログのCSSやDOMを汚さず、どこにでも持っていける。
• requestAnimationFrame で描画。固定間隔のタイマーではなく、画面更新に同期させることで滑らかさとリソース効率を両立。
• タブ復帰時に時刻を再同期。バックグラウンドで放置しても、戻ってきたときにズレない。

ブログ用の使い捨てスクリプトではなく、再利用できる部品として書いた。

年越しでズレないように

一番見たいのは 99.999...% から 0% に戻る瞬間。

そこでズレたら意味がないので、[performance.now](<http://performance.now>)() と [Date.now](<http://Date.now>)() を組み合わせた高精度タイマーを使っている。ブラウザの時計が多少ズレていても、定期的に補正がかかる仕組み。

焦らせたいわけではない

進捗バーを見て「時間がない」と焦る必要はない。

どのみち一年は50週ちょっとしかないし、その全部を有意義に使うのは無理だ。せめて今どこにいるかだけ、正確に知っていたいと思っただけ。

眺めながら、自分の一年がどれだけ進んでいるか、たまに意識してもらえたら嬉しい。