new-js-clock のご紹介

open-sourcejavascripttypescriptrelease

15年以上前、JS-Clock という小さな jQuery プラグインを公開しました。DOM 要素に時を刻む時計を表示するシンプルなウィジェットで、使いやすく、率直で、当時の時代を色濃く反映したものでした。jQuery に依存し、複数インスタンスのサポートにいくつかの問題を抱えており、最初のリリース以降は実質的に更新されることがありませんでした。

今日、それが変わります。new-js-clock 1.0.0 をリリースします。オリジナルの精神を受け継ぎながら、すべての制限を過去に置き去りにした、ゼロから書き直した TypeScript バージョンです。デモページで実際の動作をご確認いただけます。

1.0.0 の新機能

このリリースに含まれるすべての内容：

  • 🔒 TypeScript — コードベース全体にわたる包括的なインターフェースによる完全な型安全性。
  • 🌐 E2E + ユニットテストスイート — 決定論的な Jest カバレッジに加え、実際のブラウザでの Selenium E2E テスト。バックグラウンドタブの動作検証も含む拡張テストに対応。
  • 📦 ゼロ依存 — 純粋なバニラ JavaScript。jQuery 不要。
  • 🐛 バグ修正 — 複数インスタンスのサポートが正しく動作するようになりました。これは 0.8 での主要な問題でした。
  • ⚡ モダン API — 作成した各時計に適切なインスタンスメソッドを備えた、クリーンで直感的な API。
  • 🧪 完全テスト済み — 162 の決定論的な Jest テスト、行カバレッジ 99.74%、文カバレッジ 99.02%、関数カバレッジ 100%、ブランチカバレッジ 98.32%。
  • 🐳 Docker 化 E2E グリッド — pnpm run e2e:docker でローカルおよび CI 環境にてヘッドレス Chrome・Firefox・Edge を実行する Selenium Grid。
  • 📱 ES モジュール — CommonJS および IIFE バンドルに加え、ツリーシェイキング対応の ES Module インポート。
  • 🌍 DST 対応タイムゾーン — 夏時間の自動処理を備えた IANA タイムゾーンサポート。
  • ⏱️ ストップウォッチモード — 00:00:00 からカウントアップする新しいストップウォッチ。
  • 🏁 ラップ & スプリットタイム — ストップウォッチモードでラップタイム（デルタ）および累積タイム（スプリット）を記録。
  • 📊 ベスト/ワーストラップ — セッション内で最速・最遅のラップを見つけるための組み込みヘルパー関数。
  • 🎯 高精度タイミング — performance.now() によるミリ秒以下の精度でのラップデルタ計測。

インストール

npm install new-js-clock
# または
pnpm add new-js-clock

ブラウザで直接利用できる CDN 版も提供しています。unpkg と jsDelivr のリンクは README をご参照ください。

なぜこんなに時間がかかったのか

正直に言うと？人生です。もともとの JS-Clock は、亡き友人 Gustavo Beltrão（当時は PHP の達人で、一度ならず一緒に仕事をする機会に恵まれた人物です）の依頼で書かれたもので、社内の企業ダッシュボードや、異なるタイムゾーンからの来場者を対象としたイベントの一ページウェブサイトで使用するためのものでした。十分に役割を果たしていたため、見直しが急務に感じられることはありませんでした。しかし、jQuery はとっくにモダンなプロジェクトから姿を消し、TypeScript はライブラリ開発の標準となり、複数インスタンスのサポートに関するバグはずっと私を悩ませてきました。ようやく腰を据えてきちんと修正しようとしたとき、せっかくなら正しく作ろうという気持ちになりました。型、テスト、モダンなモジュールシステム、そして 2026 年に本当に役立てるだけの機能を備えた形で。次の商用プロジェクトでも使う予定です。

遅くても来ないよりまし。

イエス・キリストにのみ栄光あれ！