Loom — プロジェクト管理ダッシュボード

概要

プロジェクト管理フロントエンドの完全な実装：計画・要件・不具合のフル CRUD、再利用可能なテンプレート、ガントビュー、派生指標によるダッシュボードを、ビルドステップなしの約 1,900 行のバニラ JavaScript で構築し、80 項目以上の Playwright テストで検証しています。本サイト上で実際に操作できます。

課題

求められたのは、織り糸のボーダー、半透明パネル、日光のグロー、絶え間ないアイドルモーションといった非常に具体的なビジュアル言語を持つ軽量な PM ツールであり、加えて「静的なモックは不可」という厳格なルールがありました。すべてのコントロールが動作し、データのループがブラウザ内で完結しなければなりません。しかし、重いアニメーションとガラス風パネルは、通常、可読性、入力精度、フレーム予算と衝突します。

実装したこと

各モジュールを宣言的なスキーマ（フィールド、バリデーション、列、完了状態）としてモデル化し、フォーム、テーブル、期限超過ロジック、テンプレートを手書きではなく生成するようにしました。派生状態を持つ単一のインメモリストア（計画のステータスは進捗から導出）を維持し、すべてのチャートをその場で差分更新される SVG として描画し、すべてのモーションを transform / opacity に限定してタイミングをずらすことで、十数枚の「呼吸する」パネルが滑らかに動き続けるようにしています。

アーキテクチャ

• ストア — add / update / remove を備えたインメモリ配列。言語非依存の列挙コードにより、データが UI の言語に依存しない
• モジュールスキーマ — モジュールごとの 1 つのオブジェクトが、フォーム生成、必須 / 範囲 / 日付のバリデーション、テーブル列、インラインのクイック編集を駆動
• ビュー — ダッシュボード（指標カード、織りリング、糸状の折れ線チャート、優先度バー、作業負荷ヒートマップ、二十四節気カレンダー、期限超過リマインダー、進捗の提出）、ガントタイムライン、3 つのリストモジュール
• レンダリング — スケルトンは一度だけマウントし、データ領域のみ再レンダリング。SVG チャートは属性をその場で更新し、requestAnimationFrame でトゥイーン
• i18n — プレースホルダー対応の EN / 中文 辞書を localStorage に永続化。ユーザーが編集するまで、シードデータは言語ごとに再読み込み
• モーションシステム — 呼吸するハロー、浮遊するパネル、流れる糸の光、光線、金粉、彗星を CSS キーフレームで実装し、reduced-motion と小画面向けの縮退に対応

技術的ハイライト

• prefers-reduced-motion 下で 3D 傾斜パネル内のボタンがクリックを受け取れなくなる Chrome のヒットテストのバグを特定。preserve-3d の除去で修正し、回帰テストで保護。
• 行クリック、インラインでのステータス・進捗編集、Delete キーによる一括削除、フォーム内テンプレートにより、よく使う操作を 1 回のインタラクションに集約。
• コード、ブラウザ QA、ビジュアル仕様の 3 回にわたる敵対的レビューから 25 件以上の修正を反映：日付範囲のガード、モーダルタイマーの競合、長文のオーバーフロー、スクロールバーの漏れ、カウントアップ指標。
• 80 項目以上のヘッドレス E2E テストで、CRUD、バリデーション、テンプレート、ガントチャートのジオメトリ、カレンダーの年境界、XSS エスケープ、レスポンシブ幅、クリックのヒットテストをカバー。

成果

• 実際に触れる成果物として公開：訪問者はバックエンドなしで、英語または中国語でツール全体をブラウザ上で操作できます。
• そのデザイントークンと糸のモチーフは、本サイトのビジュアルシステムになりました。