作ったもの
Lifework Clock — https://sen.ltd/portfolio/lifework-clock/
- SVG ドーナツチャートで 24 時間を可視化
- 9 カテゴリ（睡眠 / 仕事 / 通勤 / 運動 / 食事 / 趣味 / 家族 / セルフケア / その他）
- 深夜をまたぐブロック対応（例: 23 時 → 7 時の睡眠）
- 平日 / 週末の切替
- 3 プリセット（オフィスワーカー / リモート開発 / 学生）
- 検証（重複・隙間・合計時間チェック）
- PNG / JSON エクスポート
vanilla JS、ゼロ依存、ビルド不要。node --test で 50 ケース。
角度計算
24 時間 = 360°、1 時間 = 15°。SVG の 0° は東向きなので -90° オフセットで 0 時を上に配置:
const rad = ((angleDegrees - 90) * Math.PI) / 180;
SVG アークパスの largeArc フラグ
const largeArc = endAngle - startAngle > 180 ? 1 : 0;
return `M ${cx},${cy} L ${start.x},${start.y} A ${r},${r} 0 ${largeArc},1 ${end.x},${end.y} Z`;
180° を超えるアークは largeArc = 1（長い方を回る）。これを忘れると 300° のアークが逆方向の 60° で描画される。
深夜またぎ
start=23, end=7 のブロックは「23→24」「0→7」の 2 アークとしてレンダリング。時間計算は (24 - start) + end で計算。単一ブロックとして保存しつつ、描画時だけ分割。
プリセットはテストで検証
3 つのプリセットは全て テストで検証。合計 24 時間、重複なし、隙間なしを満たす。ユーザが読み込んだ瞬間から有効な開始点。
シリーズ
100+ 公開ポートフォリオ シリーズの #66 です。