Hubtan — プロジェクト技術評価レポート

1 総合評価

4.4 / 5

総合スコア

要件定義から設計・実装・インフラ構築・デプロイまでの全工程を1名で789.5時間（98.7人日）で遂行しており、各工程の判断が一貫している。バックエンドにクリーンアーキテクチャを適用し、41テーブル・29ルーター・97ユースケースの規模で設計方針のブレが少ない。 Next.js 15 + Hono + Clerk + Supabase という技術選定は2026年時点の業界標準に沿っており、特にHono採用によるAPIサーバー分離は、Next.jsへの依存を制御する合理的な判断と認められる。音声入力（Google Cloud Speech-to-Text + Gemini AI要約）やFullCalendar統合など、高度な機能も実装されている。

プロジェクト概要: Hubtanは、現場出張者の旅費精算書・作業報告書の入力をサポートし、データの管理、承認フローの管理をするエンタープライズ業務アプリケーション。スマートフォン・PC両対応の入力画面、FullCalendarによる経費カレンダー表示、音声入力による作業報告、多段階承認ワークフロー、メール通知、Kintone連携、PDF帳票アップロード等の機能を備える。

789.5h

総開発時間

179,785

コード行数（TS/TSX）

29

APIルーター

97

ユースケース

41 / 12

テーブル / Enum

380+

機能コンポーネント

29

ページ

46

UIコンポーネント

2 評価一覧

開発スコープ（1人での全工程実施） ★★★★★ 5.0

使用技術（業界標準との整合性・市場価値・難易度） ★★★★★ 4.5

設計品質（クリーンアーキテクチャ・統一性・変更容易性） ★★★★☆ 4.5

実装機能（充実度・複雑さ・ドメイン知識の反映・UX） ★★★★☆ 4.5

デザイン（統一感・洗練さ・レスポンシブ対応） ★★★★☆ 4.0

セキュリティ（Clerk認証・RBAC・多層防御） ★★★★☆ 4.5

CI/CD・クラウド構成（自動化・運用設計） ★★★★☆ 4.5

データベース設計（41テーブル・正規化・監査設計） ★★★★☆ 4.5

テスト（Vitest / Playwright / Husky） ★★★★☆ 4.0

3 開発スコープ ★★★★★5.0

評価: ヒアリング・要件定義からデザイン設計・技術選定・仕様検討・設計・実装・テスト・デプロイまでの全工程を1名で789.5時間で遂行している。フロントエンド開発（357.5h / 45.3%）とバックエンド開発（193.5h / 24.5%）で全体の約70%を占め、残りを設計・環境構築・資料作成・打ち合わせに充てている配分は、この規模のプロジェクトとして合理的である。デザイン設計（4.5h）からデータベース設計（18h）、環境構築（56h）まで偏りなく工数を配分している点は、フルスタックエンジニアとしての広範なスキルを示している。

開発時間内訳（総計 789.5時間）

フロントエンド開発

357.5h

45.3%

バックエンド開発

193.5h

24.5%

資料作成

65.5h

8.3%

環境構築

56h

7.1%

打ち合わせ

27h

3.4%

DB開発・設計

42.5h

5.4%

アプリケーション設計

21.5h

2.7%

要件定義

15h

1.9%

技術調査・検証

7h

0.9%

4 使用技術 ★★★★★4.5

評価: 各レイヤーで2026年時点の業界標準ライブラリを採用しており、技術的に陳腐化するリスクが低い。 Next.js 15 + React 19 という最新フレームワークの採用に加え、Hono によるAPIサーバー分離は FE/BE 独立デプロイを可能にする設計判断として合理的。 Google Cloud Speech-to-Text + Gemini AI による音声入力・テキスト要約機能は、業務アプリケーションとしては高度な実装。 Clerk認証、Supabase（DB + Storage）、Kintone連携など外部サービスの統合も的確に行われている。

フロントエンド

Next.js 15.5 (App Router, Turbopack)
React 19, TypeScript 5
Tailwind CSS v4
shadcn/ui + Radix UI (46コンポーネント)
TanStack React Query 5
Zustand (状態管理)
React Hook Form + Zod
Framer Motion, Recharts, Tremor
FullCalendar (経費カレンダー)
dnd-kit (ドラッグ&ドロップ)
Web Audio API (音声入力)

バックエンド / BaaS

Hono 4.7 (TypeScript API)
Clerk (認証・認可)
Supabase (DB・Storage)
Prisma ORM v6 + PostgreSQL
Cloud Speech-to-Text
Gemini AI (テキスト要約)
Cloud Storage
Nodemailer (メール送信)
Sharp (画像処理)
Kintone REST API (外部連携)
Svix (Webhook)

インフラ / DevOps

Google Cloud Platform
Cloud Run (4サービス)
Cloud Scheduler (バッチ)
Artifact Registry / Container Registry
Cloud Storage (DBバックアップ)
Docker (4マルチステージイメージ)
GitHub Actions (6ワークフロー)
Turborepo + pnpm (モノレポ)
Husky (Git Hooks)
Vitest + Playwright (テスト)

5 設計品質 ★★★★☆4.5

評価: フロントエンドのFeature-based構成とバックエンドのクリーンアーキテクチャが、@hubtan/typesパッケージを介して型レベルで接続されている設計は、 FE/BEの独立変更を可能にしつつ型の不整合を防ぐ構成として合理的。 29ルーターの背後にある97のユースケースがそれぞれ単一責務を持ち、22のGatewayがDB操作を抽象化している点は、テスタビリティとリファクタリング容易性の確保に寄与している。 API層のclient/server分離（React Queryラッパー + Server Actions）も適切に設計されている。

アーキテクチャ構成

クライアントフェッチ (参照系)

Page / Component

Custom Hooks

React Query

lib/api/*Client.ts

Hono API (apps/server)

PostgreSQL (Supabase)

サーバサイドフェッチ (RSC)

Page (Server Component)

lib/api/*/server/

Hono API (apps/server)

PostgreSQL (Supabase)

バックエンド: クリーンアーキテクチャ

Presentation (29 Routers)

Application (97 UseCases)

Domain (Repository IF)

Infrastructure (22 Gateways)

PostgreSQL / External Services

設計のポイント

Feature-based ディレクトリ構成（380+ コンポーネント）
Route Groups による認証境界の分離 ((authorized) / (public))
@hubtan/types, @hubtan/prisma による型の一元管理
UseCase 97件 / Gateway 22件の責務分離
Zodスキーマによる入出力バリデーションの統一
依存性逆転の原則 (Infrastructure -> Domain)

モノレポ構成

apps/client — Next.js 15 (29 pages)
apps/server — Hono API (29 routers)
apps/batch/mail-scheduler — 通知バッチ
apps/batch/kintone-sync — Kintone同期バッチ
packages/prisma — Prisma + Supabase
packages/types — 共有型定義

6 実装機能 ★★★★☆4.5

シート管理

製作番号ベースのシートCRUD。出張予定期間、出張者（ランク含む）、品証区分、承認ルート設定。シート複製機能。関連する旅費精算書・作業報告書の自動生成。ドキュメントアップロード（Supabase Storage）。

旅費精算

FullCalendarベースの月次カレンダー表示。日別の経費入力（費目・金額・備考）。借受金・旅費・残高のリアルタイム集計。PC用ダイアログ/スマホ用ページ遷移の二重インターフェース。製作番号別の経費集計ビュー。スナップショット機能。

作業報告

作業報告の入力・閲覧。Google Cloud Speech-to-Text + Gemini AIによる音声入力・自動要約。作業報告画像の添付・並べ替え（dnd-kit）。苦情製番時の追加項目。メール送信機能（HTMLテンプレート）。

承認ワークフロー

多段階承認ルートの定義（ステップ・ロール・承認ルール OR/AND）。一括承認・差戻し・取消。旅費精算書・作業報告書それぞれに独立した承認フロー。承認ステップごとのメール通知。権限チェック（PermissionEnum 14段階）。

認証・認可・ユーザ管理

Clerk認証（SSO対応）。14段階のPermissionEnumによるRBAC。ユーザ管理CRUD。所属・役割・通知設定。ClerkユーザとローカルDBの同期（Svix Webhook）。プロフィール編集（画像圧縮アップロード）。お気に入りページ。

アプリケーション設定

所属マスタ、役割マスタ、承認ステップ、承認ルートのCRUD。経費費目・経費項目のCRUDと並べ替え（dnd-kit）。日当サーチャージ設定。ドラッグ&ドロップによる承認ステップ順序変更。

通知・バッチ処理

承認進捗・差戻し・取消のメール通知（HTMLテンプレート8種）。ユーザ単位の通知設定（即時/定時/曜日別）。Cloud Schedulerによる未読通知バッチ。Kintone連携バッチ（製作番号別の現場経費同期）。

スナップショット・帳票

経費データのスナップショット（ポイントインタイム保存）。PDF帳票のアップロード・閲覧（Supabase Storage）。Signed URL による安全なファイルアクセス。html-to-image によるキャプチャ。JSZip によるダウンロード。

音声入力

Web Audio API + MediaRecorder によるブラウザ録音。Canvasベースのリアルタイム波形可視化。iOS/Safari最適化。Google Cloud Speech-to-Text によるテキスト変換。Gemini AI によるテキスト要約。信頼度スコア付き。

7 API設計 / データベース設計 ★★★★☆4.5

Hono API（29ルーター / 97ユースケース）

ルーター	主な操作
sheetRouter	CRUD, copy, stats, product search
expenseInputRouter	日別入力, calendar, stats, selection
expenseManagementRouter	sheets, product-view, approval
workReportRouter	sheets, reports, update
workReportManagementRouter	sheets, reports, stats
snapshotRouter	create, list, latest, delete
speechToTextRouter	音声 → テキスト変換
workReportImageRouter	upload, delete, reorder
workReportEmailRouter	send, history, images
approvalRouter	CRUD, steps, step-order
userManagementRouter	CRUD, check-email
その他 18ルーター	role, division, expense-category, item, location, order, webhook...

データベース設計（41テーブル / 12 Enum）

41テーブル + 12 Enumの大規模スキーマ
Prisma v6によるマイグレーション管理
14段階のPermissionEnumによるRBAC
多段階承認ルート（ステップ・ロール・EVERY/ANY承認ルール）
論理削除 (isDeleted, deletedAt) + 監査カラム (updateUserHandle, createdAt, updatedAt)
削除済みシートのJSON全量スナップショット保存
仮払金履歴・支払履歴の追跡
Worker snapshot（入力時点の所属・ランク凍結）

API設計の特徴

クリーンアーキテクチャ 4層の責務分離
Zodによるリクエストバリデーション
統一レスポンス形式 { success, message, data, error }
Gateway パターンによるDB操作の抽象化（22 Gateways）
Middleware: Clerk認証, CORS, エラーハンドリング

8 デザイン ★★★★☆4.0

評価: shadcn/ui（Radix UI ベース）の46コンポーネントをカスタマイズし、アンバー/オレンジ系のブランドカラーで統一したデザインシステムを構築。ドキュメントステータスに応じた10色のセマンティックカラー、カスタムスクロールバー、レスポンシブ対応（PC/タブレット/モバイル）を備えている。 PC用ダイアログとスマホ用ページ遷移のデュアルインターフェースは、利用シーンを意識した実用的な判断。 FullCalendarの統合、dnd-kitによるドラッグ&ドロップ、Canvas音声波形可視化など、UI/UXへの配慮が見られる。

UIコンポーネント構成

カテゴリ	数	内容
UIベース (shadcn/ui)	46	Button, Dialog, Table, Form, Calendar...
機能コンポーネント	380+	features/ 配下の専用コンポーネント
レイアウト	-	Sidebar, Header, Footer
共有	-	atoms, icons, permissions

デザインシステムの特徴

アンバー/オレンジ系のブランドカラー体系（main-light/base/dark/strong）
10色のドキュメントステータスカラー（draft〜cancelled）
ステータスカラー4色（success, error, warning, info）
カスタムスクロールバー（Chrome/Safari/Firefox）
oklch カラースペースによるshadcn/uiテーマ
PC/スマホデュアルインターフェース
Canvas音声波形可視化、FullCalendar統合

9 セキュリティ / CI/CD / クラウド構成 ★★★★☆4.5

セキュリティ

認証・認可

Clerk 認証（SSO対応）
14段階 PermissionEnum によるRBAC
Next.js Middleware + Hono Middleware 二重認証ガード
Svix Webhook によるユーザ同期
Clerk公開/秘密鍵のサーバサイド検証

データ保護

Supabase Signed URL による安全なファイルアクセス
クライアントサイド画像圧縮（300KB上限）
ファイルタイプ・サイズバリデーション（Zod）
Server Actions による機密操作の分離

CI/CD

GitHub Actions（6ワークフロー）

frontend.yml: テスト → Docker Build → Cloud Run デプロイ
backend.yml: Prisma Generate → Build → Docker → Cloud Run
mail-scheduler.yml: バッチジョブビルド → Cloud Run Jobs
kintone-sync.yml: バッチジョブビルド → Cloud Run Jobs
test.yml: Vitest 単体テスト → カバレッジ
backup.yml: 毎日0:10 JST 自動DBバックアップ（pg_dump → GCS）

クラウド構成

Cloud Run: 4サービス（Client, API, Mail Batch, Kintone Batch）
リージョン: asia-northeast1（東京）
Artifact Registry + Container Registry
Cloud Storage: DBバックアップ（圧縮二重保存 .dump + .sql.gz）

10 テスト ★★★★☆4.0

評価: テスト基盤のセットアップは完了しており、Vitest（単体テスト）+ Playwright（E2E）+ React Testing Library + Clerk Testing の構成は業界標準に則している。 CI/CDパイプラインでのテスト自動実行、カバレッジ計測、Husky による pre-commit フック（コード品質ゲート）が整備されている前提で評価。 Playwrightのプロジェクト分割（globalsetup/setup/basic）による段階的テスト実行は、E2Eテストの保守性に配慮した設計。

単体テスト

Vitest 3.1.1 + React Testing Library
@testing-library/user-event（ユーザ操作シミュレーション）
@testing-library/jest-dom（DOMアサーション拡張）
@vitest/coverage-v8（カバレッジ）
jsdom（ブラウザ環境エミュレーション）

E2Eテスト

Playwright 1.55.0
プロジェクト分割: globalsetup / setup / basic
@clerk/testing（認証テスト統合）
CI/CDパイプラインでの自動実行
Husky pre-commit による品質ゲート

11 まとめ

総括

789.5時間（98.7人日）という限られた工数の中で、設計方針に一貫性を保ちながら 41テーブル・29ルーター・97ユースケース・380+コンポーネント・29ページの規模を構築した点は、工数配分と優先順位判断の的確さを示している。バックエンドのクリーンアーキテクチャと、フロントエンドのFeature-based構成を、 @hubtan/types による型共有で接続した設計は、チーム開発へのスケールを前提とした判断として評価できる。音声入力（Speech-to-Text + AI要約）、FullCalendarベースの経費管理、多段階承認ワークフロー、 Kintone連携バッチといった業務固有の高度な機能実装は、ドメイン理解の深さとフルスタックの実装力を証明している。 GCPの4サービス独立デプロイ、6つのCI/CDワークフロー、自動DBバックアップは、運用を見据えた実用的な構成である。

技術

フルスタック実装
Next.js 15 + Hono
AI音声入力

設計

クリーンアーキテクチャ
Feature-based FE
41テーブルDB設計

実績

98.7人日で完遂
179,785行のコード
4サービスの運用基盤

ドメイン

業務知識の反映
承認ワークフロー
Kintone連携

+ 付録: プロジェクト基本情報

基本情報
プロジェクト名	Hubtan
種別	経費・作業報告管理システム
開発体制	1名（全工程フルスタック）
開発者	shota_h / 林翔太
総開発時間	789.5h (98.7人日)
コード行数	179,785行（TS/TSX）
ファイル数	1,114（.ts + .tsx）
テーブル / Enum	41 / 12
APIルーター	29
ユースケース	97
ゲートウェイ	22
機能コンポーネント	380+
ページ数	29

技術スタック
フレームワーク	Next.js 15.5, React 19, TypeScript 5
API	Hono 4.7 (TypeScript)
認証	Clerk
スタイリング	Tailwind CSS v4, shadcn/ui
状態管理	Zustand, React Query 5
BaaS	Supabase (PostgreSQL + Storage)
ORM	Prisma v6
AI	Google Cloud Speech-to-Text, Gemini
クラウド	Google Cloud Platform
CI/CD	GitHub Actions (6 workflows)
デプロイ	Cloud Run (4サービス)
テスト	Vitest, Playwright
モノレポ	Turborepo + pnpm