momochico

### プロジェクト 1. BtoB 業務管理 Web アプリ（建築業向け / jQuery → Next.js リプレース） **期間**: 2025年2月〜現在 | **体制**: PM + FE（自分）+ BE 1人 **技術スタック**: TypeScript / React / Next.js (App Router) / Tailwind CSS / shadcn/ui / TanStack Query / TanStack Table / Drizzle ORM 画面数 100 超の大規模 Windows アプリ（jQuery）を Next.js でリプレースするプロジェクトに途中から参画。既存コードは Pages Router + クラスコンポーネントで構築されており、MUI と Chakra UI が混在するカオスな状態だった。Chakra UI v2→v3 の破壊的変更を機にコンポーネントライブラリの統一が決まり、FE の技術選定を主導。 #### 技術選定の意思決定 Tailwind CSS を上長に提案・承認を得た上で、「Tailwind を使うなら shadcn/ui が最適」という流れで提案を進めた。 | 選定 | 代替案 | 選定理由 | | ------------------ | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Tailwind CSS** | CSS Modules 等 | エコシステムの勢いと AI との親和性の高さ。上長に提案し承認 | | **shadcn/ui** | MUI / Chakra UI | Tailwind 採用を前提に提案。内部の Radix UI は成熟しており破壊的変更が少なく長期運用に適する。見た目をフルカスタマイズできる柔軟性 | | **TanStack Query** | SWR | エンタープライズ向けの機能の充実度（DevTools、mutation 管理等） | | **TanStack Table** | AG Grid 等 | shadcn/ui が内部的に採用しており、エコシステムを統一できる | | **Drizzle ORM** | Prisma | Prisma 7 で Rust エンジン廃止や post-install フック削除など破壊的変更が多く、移行コストが懸念された。Drizzle は TypeScript ファーストで型安全性が高く、SQL Server にも対応 | #### 主な成果 **大規模フォームの設計・実装**（2025年6月〜8月 / 約2ヶ月） - **状況**: 建築業の業務データを扱う複雑なフォームが必要。既存機能はクラスコンポーネントで書かれており参考にならない状態 - **課題**: 52フィールド・タブ区切り構成で、タブ間の双方向状態同期・状態遷移による値のリレーション・複雑なバリデーションを両立させる設計が求められた - **行動**: shadcn/ui ベースのコンポーネントをイチから構築。編集可能テーブルによる金額自動計算、props ドリリングの削減を設計に組み込んだ - **成果**: 52フィールド＋双方向同期という複雑度のフォームを、一人で約2ヶ月で設計・実装完了 **帳票印刷・Excel 出力機能の追加**（2025年2月〜4月） - **状況**: 見積書・発注書・請求書・契約書の4種類の帳票を印刷・Excel 出力する機能が必要 - **課題**: BE 側の API が未完成の状態で FE の開発を止めないこと - **行動**: API 仕様のすり合わせを事前に行い、モックデータで FE を先行開発する連携フローを確立。4種類の帳票を実装 - **成果**: BE 完成を待たずに FE 開発を進行できるフローを確立。ただし共通化不足が仕様変更時に露呈し、以降の共通化徹底の契機となった（→ PJ3 の設計に反映） **既存機能のフィードバック対応**（2025年8月〜現在） ---

### プロジェクト 2. BtoB 業務管理マルチアプリ（3アプリ統合） **期間**: 2025年8月〜現在 | **体制**: 別チーム（PM と自分はプロジェクト1と兼任） **技術スタック**: TypeScript / React 19 / Next.js 15 / Chakra UI v3 / モノレポ構成 同受注先からの別案件。業務管理アプリ群（ユーザー管理 / 勤怠・現場管理 / 在庫管理）の3アプリを担当。プロジェクト途中からの参画で、各アプリの UI・コンポーネントが統一されておらず、大量のフィードバックを抱えた状態からのスタート。 #### 技術選定の意思決定 | 選定 | 代替案 | 選定理由 | | ---------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Turborepo** | pnpm workspace のみ / Nx | 開発体験の向上とビルド速度の改善。3アプリ統合に最適 | | **Chakra UI v3** | v2 のまま統一 | v2 に留まると今後の新コンポーネントが使用不可。実際に v2 ではコンボボックスが提供されておらず自作を余儀なくされた経験から、v3 への移行を決断 | | **ultracite** | Biome 単体 / ESLint | 中身は Biome だが、shadcn/ui の作者が使用するゼロコンフィグプリセット。Biome の Linter + Formatter を最適な設定で即座に導入できる。既存アプリは ESLint が flat config 未対応で実質機能していない状態だったため、納期優先で素早く導入できる Biome 系を選定。個人で検証済みの ultracite を提案し採用 | | **nuqs** | 自前実装 | PJ3 で導入し開発体験の良さを確認。型安全な queryParams 管理として PJ2 にも横展開 | #### 主な成果 **フィードバック対応と品質回復**（2025年8月〜9月） - **状況**: 途中参画時点で2アプリ（ユーザー管理 / 勤怠・現場管理）に UI/デザインのズレ、機能バグ、仕様との差異など約100件のフィードバックが滞留 - **課題**: 品質が不安定なままでは先方の信頼を損なう。早急に品質を安定させる必要があった - **行動**: 約100件のフィードバックを優先度で整理し、2ヶ月間で集中的に対応 - **成果**: 品質を安定化させ、先方からの差し戻し・追加指摘が大幅に減少 **在庫管理アプリの FE を一人で構築**（2025年9月〜11月） - **状況**: 3アプリ目の在庫管理は新規構築。他2アプリとは Chakra UI のバージョンが異なる状態 - **課題**: 新規アプリのコンポーネントを、将来的に全アプリで共通化できる設計で作る必要があった - **行動**: Chakra UI v3 で一覧画面 3画面（追加・編集機能付き）＋ 設定画面 5画面をゼロから設計・実装 - **成果**: このコンポーネント群を全アプリ共通のベースとして自ら提案し採用。結果的にモノレポ化の布石となった **モノレポ化 + 大規模マイグレーション**（2026年1月〜現在検収中） - **状況**: 3アプリの UI が不統一で保守コストが高く、フレームワーク・ライブラリのバージョンもバラバラ - **課題**: テスト含む約13万行のコードベースを、限られたリソース（1〜2名）で統一する必要があった。AI なしでは1年以上かかる見積もり - **行動**: モノレポ構成への移行を提案し承認を得た。AI を活用し以下を同時並行で実行: - Next.js 14→15 / React 18→19 / Chakra UI v2→v3 の同時アップグレード - vanilla-extract → Chakra UI props への完全移管（UI 統一 + Turbopack 対応） - knip による不要コード検出、lefthook による pre-commit 整備 - ultracite（ゼロコンフィグ Linter/Formatter プリセット）の導入 - テスト基盤の導入と TDD 運用の確立 - AI 駆動の仕様駆動開発環境を整備（CLAUDE.md / ルール / スキル） - **成果**: 約1ヶ月で完了。345コミット、合計61万行超の変更（本体コード 26万行 / テスト 8万行 / ドキュメント 22万行 / 設定 5万行） ---

### プロジェクト 3. 業務管理 Web アプリ（ゼロベース新規構築） **期間**: 2025年10月〜進行中 | **体制**: PM + FE（自分）+ BE 1人（C#） **技術スタック**: TypeScript / React / Next.js (App Router) / Tailwind CSS / shadcn/ui / TanStack Query / nuqs / C#（BE 側の API レスポンス修正・バグ修正も対応） スプレッドシート運用のシステム化案件。FE 全体をゼロから一人で設計・構築。プロジェクト1・2と並行して進行。 #### 技術選定の意思決定 | 選定 | 代替案 | 選定理由 | | -------- | -------- | -------------------------------------------------------------------------------------------------------------------- | | **nuqs** | 自前実装 | 当初は queryParams を自前で管理していたが、nuqs を試したところ型安全かつ開発体験が大幅に向上。採用後、PJ2 にも横展開 | 自身の一番大きな成功体験。PJ1・PJ2 での失敗と学び（コンポジションパターン、コロケーション、共通化の重要性、抽象化のタイミング）をすべて反映した設計ができた。既存コードの制約がないゼロベースだからこそ、理想の設計を実現でき、「一人で FE を立ち上げられる」という自信につながった。 #### 主な成果 **ゼロからの FE 基盤構築**（2025年10月〜11月 / 約1ヶ月で初回リリース） - **状況**: スプレッドシート運用のシステム化案件で、FE のコードベースが一切ない状態からのスタート。PJ1・PJ2 と並行して進行 - **課題**: ディレクトリ設計から認証・認可、CI/CD まで FE 基盤全体を一人で構築し、短期間で初回リリースまで持っていく必要があった - **行動**: PJ1・PJ2 の失敗と学び（コンポジションパターン、コロケーション、共通化の重要性）をすべて設計に反映。Server Components でのデータフェッチ、Server Actions によるミューテーションで BE 連携を設計 - **成果**: 基盤構築からテスト・テスターからの FB 対応含め約1ヶ月で初回リリース。2026年1月より PJ2 で確立した TDD 運用も適用 **機能開発** - **状況**: 基盤完成後、業務機能を順次追加していくフェーズ - **課題**: PJ1・PJ2 と並行しながらスピード感のある機能開発が求められた - **行動**: 基盤設計時に共通コンポーネントを充実させていたため、機能開発では業務ロジックに集中できた - **成果**: ユーザー管理 → 自社情報管理（約1週間）→ 顧客管理（約2週間）とスピード実装。nuqs による型安全な queryParams 管理も導入し、のちに PJ2 へ横展開 ---