何を作ったか
Excel・スプレッドシートで管理していた点検案件を、認証、権限、期限、履歴、検索、CSV移行を備えたWebアプリへ移行した模擬納品事例。
業務移行 / Webアプリ開発 / 模擬納品ケーススタディ
点検案件管理のWebアプリ化
Excel・スプレッドシートで属人化していた点検案件管理を、権限、期限、履歴、検索、CSV移行を備えたWebアプリへ移行したケース。
模擬顧客
社員20人、専任エンジニアなしの架空設備点検会社。
担当範囲
要件整理、現行業務整理、DB設計、Next.js実装、Supabase Auth、RLS、CSV移行、テスト、操作手順書、管理者向け引継ぎ資料、本番公開。
現在の状態
GitHub、Supabase本番、Vercelへ公開済み。架空企業・架空データを使用した模擬納品であり、実在企業への納品実績ではない。
| 種別 | 業務移行 / Webアプリ開発 |
|---|---|
| 模擬顧客 | 社員20人、専任エンジニアなしの架空設備点検会社 |
| 担当 | 要件整理 / DB設計 / 認証・権限 / CSV移行 / テスト / 公開 |
| 公開状況 | GitHub公開、Supabase本番構築、Vercel本番公開済み |
- Next.js
- React
- TypeScript
- Tailwind CSS
- Supabase
- PostgreSQL
- Supabase Auth
- Row Level Security
- Zustand
- Playwright
- GitHub Actions
- Vercel
模擬納品であることの明示
架空企業・架空データで制作したケース
公開されている業務委託・開発案件で求められる業務を参考に、架空の企業・データを用いて制作した模擬納品事例です。実在企業への納品実績ではありません。掲載内容はコード、DB、テスト、資料、本番画面から確認できる事実に限定しています。
実際の画面
公開デモと同じ画面から、認証、案件管理、検索、CSV、権限差を確認できる画像です。クリックすると拡大できます。
移行前の問題
整理した問題
重複登録や必須項目漏れを画面外で防ぎにくい。
整理した問題
期限超過、進捗、請求状況、担当者別の確認が人に依存する。
整理した問題
全員編集、更新履歴なし、引継ぎ資料なしのため変更理由を追いにくい。
移行前からWebアプリへの流れ
Excel / スプレッドシート
現行業務整理
DB設計
認証・権限・RLS
CSV移行
本番公開 / 引継ぎ
担当範囲
Excel・スプレッドシート運用の問題整理
7テーブルのPostgreSQL設計
Supabase Authとadmin / staff / viewerの3権限
RLSによるSELECT / INSERT / UPDATE制御
案件番号のDB一意制約
期限、進捗、請求状況、担当者による管理
顧客名、現場名、住所、担当者を含むDB検索
CSVプレビュー、検証、正常行取込、エラー記録
job_historyによる更新履歴
操作手順書、DB設計、移行対応表、管理者引継ぎ資料
GitHub Actions、Supabase本番、Vercel公開
DB設計
1本のマイグレーションで7テーブル、制約、トリガー、RLSを定義しています。
customers
顧客
sites
sites
現場
inspection_jobs
profiles
担当者・権限
inspection_jobs
inspection_jobs
更新履歴
job_history
import_batches
CSVエラー
import_errors
7テーブル
profiles、customers、sites、inspection_jobs、job_history、import_batches、import_errors。
DB制約
案件番号unique制約、日付CHECK制約、金額CHECK制約で画面外からの不整合も抑えます。
トリガー
updated_atトリガーとjob_historyトリガーで、更新時刻と作成・更新履歴をDB側で記録します。
認証・3権限・RLS
admin
全案件の閲覧、登録・編集、CSV、利用者管理を扱います。
staff
自分担当案件だけを閲覧・更新でき、新規登録もできます。
viewer
全案件を閲覧できますが、登録・編集はできません。
RLSで守る範囲
7テーブルすべてでRLSを有効化し、SELECT / INSERT / UPDATEの権限をDB側で制御しています。本番Supabase上でadmin / staff / viewerのログインとRLSを確認済みです。
検索・期限・更新履歴
検索
案件番号、顧客コード、顧客名、現場名、郵便番号、住所、点検種別、担当者名、担当者連絡先、備考を対象にDB検索しています。
期限管理
予定日、提出期限、期限超過、7日以内、進捗、請求状況、担当者で確認できます。
更新履歴
job_historyに作成・更新内容を記録し、案件詳細から変更前後を追えるようにしています。
CSVデータ移行
取込
- 正常行だけ明示確認後に取込。
- 異常行は登録しない。
- 行番号、対象列、理由を表示。
- import_batchesとimport_errorsへ記録。
出力と対策
- 画面検索とCSV出力の検索条件が一致。
- CSV出力を実装。
- CSVインジェクション対策を実装。
テスト・品質管理
lint成功
typecheck成功
unit/db 20件成功
integration 2件成功
Playwright E2E 10件成功
build成功
GitHub Actions成功
本番Supabase・本番Vercelで確認済み
PC、タブレット、モバイル確認済み
納品資料・引継ぎ
操作手順書
ログイン、案件確認、登録・編集、CSV移行、権限別の使い方を確認できる資料を用意しています。
設計資料
DB設計、マイグレーション、移行対応表、RLS方針を確認できる形で残しています。
管理者引継ぎ
管理者向けに、利用者管理、公開環境、テスト、運用確認の観点をまとめています。
AI / Codex利用方法
開発支援として使う
要件、仕様、公開可否、最終判断はYuta Matsufujiが行い、Codexは実装、レビュー、テスト確認、文章整理の支援として使用しました。採用前にコード、DB、テスト、画面、本番動作を確認しています。
対象外・既知の制約
対象外
マルチテナント、請求書PDF、会計連携、通知送信、AIチャットは対象外。
対象外
顧客・現場の専用管理画面は対象外。公開デモは架空企業・架空データのみを使用。
透明性
実績と誤認しないための掲載方針
公開されている業務委託・開発案件で求められる業務を参考に、架空の企業・データを用いて制作した模擬納品事例です。実在企業への納品実績ではありません。掲載内容はコード、DB、テスト、資料、本番画面から確認できる事実に限定しています。