About

勤怠烈破 / kintai-reppa

フリーランスの勤怠管理と請求書発行を 1 つにまとめた Web アプリ。 1 タップ打刻、月別勤務表、案件マスタ、PDF 出力までを Next.js + Supabase + Vercel で構築した、 開発者の Web アプリ開発ポートフォリオ第 3 弾 です。

Next.js 16 App RouterTypeScriptSupabaseTailwind CSS 4VercelPlaywright PDF

このシステムについて

何をするツールか

自分の作業時間を記録し、月単位で勤務表 PDF と請求書 PDF を発行できるアプリです。 一次ユーザーは開発者自身（フリーランスエンジニア）、副次的にポートフォリオとして公開しています。

スマホで「1 ボタン打刻」、PC で「月別勤務表の編集」「請求書プレビューと発行」、と シーンごとに最適化された UI を用意しました。

技術スタック

採用した技術と理由

  • Next.js 16（App Router）+ TypeScript — Server Components 中心、必要なところだけ Client Component。型は Supabase typegen で DB と同期
  • Supabase（PostgreSQL + Auth + Storage） — RLS で多テナント前提のセキュリティ。マジックリンク + パスワード併用
  • Vercel — 無料枠で運用開始、push で自動デプロイ
  • Tailwind CSS 4 — デザインシステムは小規模なので軽量に
  • Playwright + HTML/CSS — PDF 生成。tabular-nums や Hiragino フォント等で日本語 PDF を自然に表現

採用しなかった選択肢：自前 PostgreSQL + VPS（運用負荷）、Firebase（NoSQL は関係性データに不向き）、Laravel + MySQL（PWA最適化と Web 案件アピールが弱まる）など、選定根拠も spec に記録しています。

設計上の判断ハイライト

ドメインモデリングで効いた決断

中抜け＝複数セッション方式

1 日に複数の work_session を持つ設計で、午前・午後・夜の作業ぜんぶ、それに会社の切り替え・休日も統一的に表現できる。「特殊ケース用フラグ」を持たない素直なデータモデル。

会社マスタと案件マスタの分離

開発の途中で「同じ会社でも案件で単価が変わる」「同じ会社でも部署で宛先が変わる」と判明し、companies と projects に早期分離。後に回せばリファクタが何倍にも膨らむので、業務境界を見抜いた瞬間に動けるかが勝負どころ。

1 ボタン打刻

案件マスタにデフォルト時刻を持たせ、定時勤務日は「今日もコードリブン定時で 9:00〜18:00 ✓」のワンタップで完了。スマホで開いて即作業に戻れる体験を優先。

休憩時間 = max(セッション間ギャップ, 定時休憩との重なり)

複数セッションで成立しがちな「中抜けの方が長い」「定時休憩を実際は取らなかった」両ケースに対応する自動算出ロジック。手動 override も別途保持。

発行済み請求書の金額スナップショット

invoices テーブルに subtotal / tax_amount / total まで保存。後から projects.unit_price を改定しても発行済の請求書は不変。

開発者の強み

ドメイン分析 → データモデル設計 → 業務システム設計

このアプリの設計プロセスは「業務ルールを的確にコード構造（モデル）に落とし込む」 いわゆる ドメイン駆動設計（DDD）の発想で進めています。

特に「同じ会社でも案件で条件が変わる」「同じ会社でも部署で宛先が変わる」のような 業務境界を、DB 構造（テーブル分離 / 外部キー / PK 設計）に正しく反映することに重きを置いています。 IT 業界 31 年・PM 歴 15 年の経験で、要件抽出から実装まで一気通貫で判断する強みを活かしています。

やらない判断

YAGNI と教訓参照のバランス

初期検討で「見込みモード」「基準月稼働時間（Over 時間管理）」を入れる議論がありましたが、 いずれも特定取引先・特定運用に特化した機能で、汎用性が低いと判断して MVP から削減しました。

一方、過去の請求書発行案件（tegata）から得た教訓 — 適格請求書対応 / 税率別集計 / 負金額の端数処理 / payment_term の別テーブル化 など — は spec に明示的に取り込み、V2 候補として記録しています。

開発プロセス

Claude Code と対話的に

  • Claude Code（Anthropic）と対話的に仕様を詰めながら、spec ファイルを「議論履歴付き」で育てる方式を採用
  • 過去のフリーランス勤怠の Excel ファイル 3 パターンを構造解析してデータモデルに反映
  • 実物の請求書 PDF（複数社分）を解析して PDF テンプレートのレイアウトを確定
  • 過去案件の教訓を「最後にもう一度」参照して抜け漏れチェック

命名由来

勤怠烈破（キンタイレッパ）

Capcom & SNK の格闘ゲーム文化圏で受け継がれてきた必殺技ネーミング流派を踏襲。 餓狼 MARK OF THE WOLVES の「烈破弾」（ロック・ハワード）、 龍虎の拳・KOF の「龍撃拳・烈破」（リョウ・サカザキ）、 ストリートファイター 6 のケンの「昇竜列破」からの系譜です。