ID:82498さん

**① どんなサービス・システムか** 自動車部品メーカーの製造現場向けの**生産管理システム**です。これまで紙とExcelで管理していた作業日報、不良報告、稟議や予算などの各種申請を、製造ラインのタブレットから直接入力できるようにし、管理側で**リアルタイムに集計・可視化**できるシステムです。 **② あなたは何を担当したか** 5名体制（PM1名、エンジニア4名）のチームにおいて、私は**フロントエンドとバックエンドの設計主担当**として参画しました。フロントエンドとバックエンドのアーキテクチャ設計をリードしつつ、コーディング標準の策定やジュニアエンジニアのコードレビュー・メンタリングを実施しました。 また、画面の実装にとどまらず、**GraphQL**を通じたデータ連携や**NestJS**でのバックエンド実装、**Terraform**を用いた**AWS**インフラの自動化にも横断的に関与しました。 **③ どんな技術を用いたか** - **React / Feature-Sliced Design (FSD)**: 製造現場のタブレット向け入力画面や管理用ダッシュボードの構築で使用。画面拡張に耐えうるスケーラブルなフロントエンドアーキテクチャとしてFSDを設計・導入しました。 - **GraphQL**: フロントエンドとバックエンド間の柔軟なデータ通信に利用。作業日報や申請データの複雑な取得・更新APIを統合しました。 - **NestJS**: 稟議や予算申請など、多段階のワークフローを持つバックエンドロジックの実装を担当しました。 - **AWS / Terraform**: システム全体のデプロイメント環境の構築およびIaC（Infrastructure as Code）化によるインフラ運用の改善・自動化に用いました。 **④ どんな機能を開発したか** 作業日報、不良報告、各種申請（稟議・予算など）、分析画面を開発しました。また、管理側が日々の業務状況を把握するための**リアルタイム可視化ダッシュボード**を実装しました。 **⑤ どんな課題に取り組んだか** 当初は日報と品質チェックのみの想定でしたが、開発途中で各種申請や分析機能へと要件が拡大し、影響はUIとサーバーの両方に及びました。フロントエンドでは、増え続ける入力項目や画面ごとに異なるバリデーションにより、コンポーネントの依存関係が肥大化する懸念がありました。同時にバックエンドでも、要件が変わりやすい多段階の承認フロー（稟議や予算など）によってNestJSのビジネスロジックが複雑化の限界を迎え、GraphQLのスキーマも不要なリレーションで肥大化するリスクが生じていました。**UIとサーバーの両面で、システムが破綻しないように構造を根本から整理する必要**がありました。 **⑥ どんな工夫をしたか** フロントエンドとバックエンドの双方でアーキテクチャを見直しました。**フロントエンド**にはFeature-Sliced Design (FSD) を導入し、共通化すべき処理と画面固有の処理を明確に分離して不要な条件分岐を防ぎました。**バックエンド（NestJS）**では、肥大化を防ぐために各モジュールをドメインごとに厳格に分割しました。特に複雑な申請ワークフローの処理サービスを独立・カプセル化することで、あるロジックの変更が他の機能やGraphQLスキーマの複雑さに影響を及ぼさない、**疎結合な設計**を実現しました。 **⑦ どんな成果を出したか** 複雑な既存画面への影響を抑えながら、リリースから一年以上（三次フェーズまで）**安定して継続開発を行える基盤を構築**しました。また、システムの導入とリアルタイムダッシュボードの活用により、クライアントの日次業務モニタリング時間を**約40%削減**することに成功しました。

**① どんなサービス・システムか** PDFやExcelの図面・仕様書からAIを活用して見積書を自動生成する**システム**です。従来は担当者が過去の見積もりを手作業で参照して作成しており、項目の抜け漏れが起きやすいという課題がありました。これを自動化し、属人化の解消と業務効率の向上を目指したプロダクトです。 **② あなたは何を担当したか** 5名体制（PM1名、エンジニア3名）のチームにおいて、**フロントエンドおよびバックエンドの設計主担当**として要件定義の段階から参画しました。AIと人間のインタラクションを考慮したUI設計にとどまらず、機械学習モデルと連携するAPI設計、および機密性の高いドキュメントを処理するためのセキュアなインフラ設計まで、システム全体をエンドツーエンドでリードしました。 **③ どんな技術を用いたか** - **React**: AIの生成結果を確認・修正するための複雑なUI（Human-in-the-loop）と、フィードバックループのフロントエンド構築に利用しました。 - **NestJS / PostgreSQL**: 見積もりデータや過去の履歴を管理するバックエンドAPI、および時間のかかるAI処理をさばくための非同期アーキテクチャを実装しました。 - **Azure OpenAI**: セキュリティ要件を満たすLLMエンジンとして採用。プロンプトエンジニアリングと過去データのコンテキスト制御を行いました。 - **AWS / Terraform**: 機密性の高い図面データを安全に処理・保管するため、パブリックアクセスを遮断した堅牢なクラウドインフラをIaCで構築しました。 **④ どんな機能を開発したか** PDF/Excel図面からのデータ抽出および見積もり自動生成機能、AIの生成結果（根拠）を人間が確認・修正できる**レビュー用UI**、そして修正内容をAIモデルの精度向上に繋げるための**フィードバックループ機能**を開発しました。 **⑤ どんな課題に取り組んだか** 新規プロダクトのため学習データが存在せず、ファインチューニングが選択できないというAI特有の課題がありました。加えて、顧客の図面という極めて機密性の高いデータを扱うため、外部サービスを経由することによる情報漏洩リスクへの懸念が強くありました。またシステム上、AIの出力を100%信用させるのではなく、人間が必ず介入して修正できる構造にする必要があり、それに伴うフロントエンドの複雑な状態管理と、バックエンドでの重いAI処理のハンドリングが技術的なボトルネックになっていました。 **⑥ どんな工夫をしたか** 精度担保のため、プロンプト設計と過去見積もりデータのコンテキストの渡し方を工夫し、ハルシネーションを抑えました。セキュリティ面では初期に検討したDify Cloudから、データが外部の学習に回らない**Azure OpenAI**の閉域構成へアーキテクチャを切り替えました。実装面では、AIの出力をそのまま見せず「どこをAIが判断したか」をハイライトするUIを設計し、ユーザーの修正内容を確実にバックエンド（**NestJS**）へフィードバックとして還元するデータフローを構築しました。 **⑦ どんな成果を出したか** 高い機密性要件をクリアしたセキュアなAI見積もりシステムを本番稼働させ、手動でのドキュメント準備作業を大幅に削減することに成功しました。ログ上でAPI呼び出しを計測した結果、導入後に手作業での修正が**およそ30〜40%減少**しており、目に見える形で実現しました。

**① どんなサービス・システムか** 月額サブスクリプション型の**アパレルレンタルサービス**です。ユーザーが定額で洋服をレンタルし、着用後に返却すると次の洋服が届くというサイクルのプラットフォームを新規開発しました。 **② あなたは何を担当したか** 4名体制（PM1名、エンジニア3名）のチームにおいて、新規開発の要件定義の段階から**フロントエンドおよびバックエンドの設計主担当**として参画しました。クライアントサイドのアーキテクチャ設計にとどまらず、最も複雑な注文ドメインのビジネスロジック構築、Cognitoによる認証・認可、およびStripe決済連携といったバックエンドとインフラの構築を横断的にリードしました。 **③ どんな技術を用いたか** - **Next.js / TypeScript**: 顧客向け画面と管理画面の構築に使用。要件に合わせてSSR（サーバーサイドレンダリング）とISRを使い分けました。 - **Hasura (GraphQL)**: 管理画面における複雑なデータ参照と権限（認可）を一元管理するAPI層として導入しました。 - **NestJS**: StripeのWebhookを受け取り、課金状態と注文状態を同期・処理する複雑な決済バックエンドの実装を担当しました。 - **AWS (Cognitoなど) / Terraform**: ユーザー認証基盤の構築と、本番環境インフラのIaC化を行いました。 **④ どんな機能を開発したか** 顧客向けのレンタル・注文画面、管理者向けの在庫および注文管理画面、Stripeを利用した**月額定期課金・決済処理機能**、Amazon Cognitoを用いたセキュアな**ユーザー認証機能**を開発しました。 **⑤ どんな課題に取り組んだか** 新規のサブスクリプションモデルであったため、技術的・業務的なボトルネックが「注文ドメイン」に集中していました。通常の単発ECと異なり、「決済完了」「発送」「返却」「次のサイクルの開始」というイベントが非同期で連続するため、注文の状態と課金の状態（Stripe側）にズレが生じやすいという根本的な課題がありました。また、顧客向け画面には表示速度が求められる一方、管理画面には複雑なスキーマと権限管理が求められ、要件の異なる2つのフロントエンドをどう効率よく構築するかも課題でした。 **⑥ どんな工夫をしたか** 注文と課金の不整合を防ぐため、システムの「正（Source of Truth）」を課金（Stripe）側に置き、注文状態はそこに追従する堅牢なアーキテクチャを**NestJS**で設計しました。StripeのWebhook処理では二重処理を防ぐ実装パターン（冪等性の担保）を徹底しました。またフロントエンドのアーキテクチャ選定では、顧客向けには**Next.js**のSSR/ISRを使い分けて表示速度を担保し、管理側には**Hasura**を導入してスキーマと権限をAPI層で一箇所で管理できる構成にしました。 **⑦ どんな成果を出したか** 複雑な決済・注文サイクルを持つサブスクリプションサービスをゼロから要件定義し、本番環境へリリースしました。設計段階で状態管理の「正」を明確に定義し、Webhookの堅牢性を担保した結果、現在は本番で稼働しており、**決済まわりでの重大な障害やデータ不整合を一度も起こさず**、安定した運用を実現しています。

**① どんなサービス・システムか** 複数の自治体が実運用している**行政文書システム**のリファクタリングおよび機能拡張プロジェクトです。文書テンプレートの管理や、電子署名ワークフローなどを扱うシステムです。 **② あなたは何を担当したか** 9名体制（リード1名　PM2名、エンジニア6名）のチームにおいて、**フロントエンドエンジニア**としてシステムのモダナイゼーションをリードしました。アーキテクチャ上の意思決定から、段階的なコード移行、テストの整備、QAとの連携までを主導し、バックエンドチームとも協業して電子署名機能などの統合を行いました。 **③ どんな技術を用いたか** - **Vue 2 / Vue 3 / Vue Compat**: EOLが迫るレガシーシステムを互換モードで稼働させながら、段階的に最新環境へ移行するために使用しました。 - **TypeScript**: コードの保守性を高め、複雑な状態遷移を型安全に扱うために導入しました。 - **Vitest**: 複雑な決裁フローの品質を担保するため、ユニットテストおよびコンポーネントテストの自動化に利用しました。 **④ どんな機能を開発したか** システム全体の**Vue 3への移行**、**TypeScriptの導入**、レンダリングパフォーマンスの最適化を実施しました。また、文書テンプレートおよび電子署名ワークフローのバックエンド統合を行いました。 **⑤ どんな課題に取り組んだか** EOLが迫る**Vue 2からVue 3**への移行が必要でしたが、複数の自治体が実運用しているためシステムを絶対に止められないという制約がありました。一括移行は不可能で、かつビルドや型チェックでは検出できない「スタイルやアニメーションの静かな崩れ」が発生しやすいという課題がありました。さらに、機能追加のたびに決裁フロー周辺でリグレッション（デグレード）が頻発していましたが、マネジメント層から**E2E**テスト導入の工数承認が下りないという政治的な問題にも直面していました。 **⑥ どんな工夫をしたか** 移行については「**Vue Compat**」を用いて既存コードを互換モードのまま動かし、利用頻度の低い画面からコンポーネント単位で段階的に移行する方針を提案・実行しました。検知しにくいUIの崩れに対しては、正しい挙動をまとめたドキュメントを整備し、QAと一緒に画面単位で目視確認する体制を構築しました。テストに関しては、全体へのE2Eテスト導入が却下された後、最も複雑でバグが起きやすい「決裁フロー」のみにスコープを絞り、通常の機能開発の工数内で自主的にユニットテストを実装して急所を確実に押さえました。 **⑦ どんな成果を出したか** 開発や実業務を一度も止めることなく、約半年でシステム全体の**Vue 3への移行**を完了させました。モジュール化されたフロントエンドアーキテクチャの導入により技術的負債を解消し、平均的なフィーチャー提供時間を2〜3週間から1〜2週間へと**大幅に短縮（約50%短縮）**しました。また、急所をテストで押さえた結果、決裁フロー周辺での**リグレッションをゼロに抑える**ことに成功しました。

**① どんなサービス・システムか** 自治体向けに入札および補助金申請をデジタル化する包括的な**GovTech SaaSプラットフォーム**です。従来は紙ベースで行われていた調達から補助金支給までのエンドツーエンドのワークフローをオンライン上で完結させるシステムです。 **② あなたは何を担当したか** 6名体制（リード1名　PM2名、エンジニア3名）のチームにおいて、**フロントエンドエンジニア**として参画しました。申請から契約に至るまでの複雑な多段階承認ワークフローの設計・実装を担当し、デザイナーやバックエンドチームと連携して、法的な要件を満たすフロントエンドの開発をリードしました。 **③ どんな技術を用いたか** - **Nuxt.js / TypeScript**: 申請、審査、承認、契約フェーズをサポートする複雑な多段階承認ワークフローを持つ画面の構築と、堅牢な状態管理に使用しました。 - **REST API**: 新規開発するモダンなフロントエンドアプリケーションを、既存の自治体文書管理システム（レガシーシステム）と安全に統合するために使用しました。 **④ どんな機能を開発したか** エンドツーエンドの調達・補助金ワークフロー機能（申請・審査・承認・契約）、法的に準拠した電子署名フロー、および取引状況や履歴を外部から確認できる**公開アクセス機能**を開発しました。 **⑤ どんな課題に取り組んだか** 行政の調達プロセスが紙ベースであったため、取引の透明性が低く、監査準備に膨大な工数がかかっているという業務上の大きな課題がありました。技術面では、複雑で厳格な行政の承認フローを破綻なくUIに落とし込むことと、レガシーな既存の自治体システムと新しいフロントエンドをREST APIを介して矛盾なく統合し、かつ法的に有効な電子署名を組み込むという難易度の高い要件がありました。 **⑥ どんな工夫をしたか** デザイナーおよびバックエンドチームと緊密に連携し、複雑な業務フローを直感的に操作できるUIに再設計しました。また、既存システムとの連携においては、**TypeScript**を活用してAPIリクエストや状態遷移の型安全性を担保し、法的に準拠した電子署名フローをシームレスに組み込むことで、ユーザーが迷わずに手続きを完了できるフロントエンドアーキテクチャを構築しました。 **⑦ どんな成果を出したか** 複雑な行政の調達および補助金プロセスを**100%オンライン化（ペーパーレス化）**することに成功しました。さらに、取引状況および履歴の公開アクセスを可能にしたことで取引の透明性が大幅に向上し、行政側の監査準備工数を削減するというビジネスインパクトをもたらしました。

**① どんなサービス・システムか** 地域の収入・支出データを可視化する行政向けの**BI（ビジネスインテリジェンス）ツール**およびダッシュボードです。 **② あなたは何を担当したか** 5名体制（リード1名　PM1名、エンジニア3名）のチームにおいて、**フロントエンドエンジニア**として参画しました。情報収集から要件定義、アーキテクチャ設計、実装、リリースに至るまでのフィーチャーライフサイクル全体をリードしました。 **③ どんな技術を用いたか** - **Vue.js / Quasar**: 複雑な財務データセットを直感的なチャートとして描画する、インタラクティブなUIの構築に使用しました。 - **Feature-Sliced Design (FSD)**: ダッシュボードの拡張性を見据え、将来的な指標追加にも耐えうるスケーラブルで保守性の高いフロントエンドアーキテクチャとして採用しました。 - **SSO (Single Sign-On)**: 既存のシステムとダッシュボードをシームレスに連携させるための認証基盤として実装しました。 **④ どんな機能を開発したか** 複雑な財務データを直感的に把握できる**インタラクティブなチャート・ダッシュボード機能**、および既存の電子承認フローからシームレスにアクセスできる**シングルサインオン（SSO）機能**を開発しました。 **⑤ どんな課題に取り組んだか** 行政関係者が地域の予算や収支状況を把握するために、従来は手動でデータを集計してレポートを作成しており、1レポートあたり数時間という膨大な業務負荷がかかっていました。また、利用者が複数の独立したシステムをまたいで操作する負担を減らすため、既存の電子承認システムと新しいダッシュボードを分断させずに統合する統合性が求められていました。 **⑥ どんな工夫をしたか** **Vue.js**と**Quasar**を活用し、大量のデータセットでもスムーズに描画・操作できるUIを構築しました。フロントエンドの設計には**Feature-Sliced Design (FSD)** を適用し、機能の追加や変更が他のコンポーネントに波及しないクリーンなコードベースを実現しました。さらに、SSOを実装して既存の電子承認フローにダッシュボードを直接組み込み、ユーザーが再ログインなしで業務画面からシームレスにデータ分析へ移行できるUXを構築しました。 **⑦ どんな成果を出したか** データの集計と可視化を自動化し直感的なダッシュボードを提供したことで、行政関係者の手動による予算分析時間を**約80%削減（1レポートあたり数時間から30分未満へと劇的に短縮）**することに成功しました。

**① どんなサービス・システムか** 決済端末サービスを提供するFinTech企業向けの**B2B決済管理プラットフォーム**です。請求書発行やバックオフィス業務をサポートし、決済端末の設置から管理までを行うシステムです。 **② あなたは何を担当したか** 7名体制（PM1名、エンジニア5名 QA1名）のチームにおいて、**フロントエンドエンジニア**として参画しました。サポート業務の自動化ワークフローの構築、サポート画面のUI/UX再設計、デザインシステムの標準化、およびレガシーコードのリファクタリングを担当しました。 **③ どんな技術を用いたか** - **React.js / TypeScript**: 端末設置依頼のワークフロー画面や、カスタマーサポートチケットUIの構築に使用しました。 - **React Hooks**: レガシーなコードベースを刷新し、可読性と保守性を向上させるためのリファクタリングに活用しました。 - **Ant Design**: 複雑なB2B向けの管理画面を迅速かつ高品質に構築するためのUIライブラリとして採用しました。 - **Tailwind CSS / Styled Components**: プラットフォーム全体で一貫したUI/UXを提供するためのデザインシステム構築に使用しました。 **④ どんな機能を開発したか** 端末設置依頼から完了報告までのエンドツーエンドフローを自動化する**包括的なリクエスト管理機能（セルフサービスワークフロー）**、動的なFAQシステムを統合した**カスタマーサポートチケット管理機能**、および共通デザインシステムを開発・実装しました。 **⑤ どんな課題に取り組んだか** ユーザーからの問い合わせが多く、L1（一次対応）テクニカルサポートの作業負荷が非常に高いという業務上の課題がありました。技術面では、UI/UXのデザインに一貫性がなくユーザーの自己解決を妨げていたことや、レガシーなコードベースが原因で可読性が低く、バグリグレッション（デグレード）が発生しやすいという保守性の課題を抱えていました。 **⑥ どんな工夫をしたか** **React.js**と**Ant Design**を活用して、手動だった設置依頼フローをセルフサービス化しました。サポート画面はUIを刷新し、動的なFAQを統合することでユーザーが自己解決しやすい導線に再設計しました。開発面では、レガシーコードをモダンな**React Hooks**と**TypeScript**へと段階的にリファクタリングし、同時に**Tailwind CSS**と**Styled Components**を用いてプラットフォーム全体で一貫したデザインシステムを構築・適用しました。 **⑦ どんな成果を出したか** セルフサービスワークフローの導入と動的FAQの統合によりユーザーの自己解決率が向上し、L1テクニカルサポートの作業負荷を**約30〜35%削減**することに成功しました。また、モダンな技術スタックへのリファクタリングと型安全性の導入により、コードの保守性が大幅に改善され、**バグの再発（リグレッション）を削減**しました。