ID:77180さん

## プロジェクト概要 自社サービスのバーチャルインテリアの制作サービスを注文するための注文システムとそれを管理するための管理システムの開発を行なっておりました。 新サービスの追加や既存システムの効率改善、UI/UXの改良とツール連携の最適化を推進を重点的に開発しておりました。 ## 使用技術 ### フロント * 言語 / ランタイム：TypeScript、Node.js * フレームワーク・ライブラリ：React、Next.js v14(page router)、 * その他ライブラリ：Yup、Jotai、Redux Tool Kit、Mantine UI、React Hook Form、Tanstack Query[https://tanstack.com/query/latest] ### バックエンド * 言語 / ランタイム：PHP * フレームワーク・ライブラリ：Laravel 8系 * DB：MySQL * インフラ / 開発環境：AWS ECS、AWS S3、AWS lambda、AWS Batch ## 役割・体制 ### チーム規模と構成 * エンジニア2名、企画1名（CTO、開発非参加）、デザイナー1名（デザインのみ）の合計4名のチームでした。 * 私がフロントを強みとしていたため、フロントの開発を主導するような形で進めておりました。 ### 自身のポジションと役割 * フロントエンドエンジニア兼フルスタックエンジニアとして、UI設計、コーディング、システム構成の整理を担当しました。 * 主な作業としては、フロントエンドの設計・実装に加え、バックエンドではLaravelを用いたAPI開発、AWS Batchやlambdaを使用した定期処理の開発等を行なっておりました。 * また、ベンチャー企業のため、営業や制作と密に連携しながら、必要に応じて要件整理やトラブルシューティングをフルスタックで担当しました。 ## 背景・課題 1. 社内のバーチャルインテリアの注文システムは、複雑な注文フローと複数のツール連携により、データ管理と整合性の維持に課題を抱えていました。具体的には、注文内容がDBに保存されてからメール通知、メール内容を読み取りPower Automateで管理、タスクをTrelloに連携まで多段階のツールを跨いで管理されており、データの一貫性や正確性を保つことが非常に難しい状況でした。 2. また、複数のページ遷移を伴う注文フローを、1ページで複数注文できるシステムに改修し、営業担当者や顧客の作業時間短縮を目指す必要がありました。 3. フロントエンドのコードのルールやコンポーネントの共通化が曖昧であり、システム全体で見るとデザインの統一性がなかったり、同じものをベタ書きで開発するようなことがあり、開発の効率化とデザインの一貫性を保つためにも開発ルールの作成は重要な課題でした。 ## 実際の取り組み ### 設計・改善内容 1. 既存の複雑なツール連携を見直し、注文システムの管理画面に必要な機能を追加することで、Power Automateで開発している部分を段階的に廃止し、システム移行していけるよう進めました。 2. また、注文フローのUI改善を目的に、複雑なページ遷移を避けたシングルページの注文フォームを開発しました。これにより、注文時間の短縮を実現しました。 3. フロントエンドでは、共通部品の設計とルール化を推進し、PRテンプレートやESLint設定を標準化して、コードの品質とメンテナンス性を向上させました。 ## 成果・価値 1. 注文システムの管理画面に必要な機能を追加することで、これまで整合性がとれていないデータの発見から修正に時間がかかっていた部分をデータの見えるかや確認しやすくすることで、発見から修正までの効率UPに繋がりました。 2. 1ページで複数の注文ができるシステムにより、営業担当者や顧客の作業時間を従来の半分に短縮し、作業効率化と顧客満足度の向上に寄与しました。 3. フロントエンドのディレクトリ設計や開発ルールの標準化、GitHubのPRテンプレート作成、ESLint等の導入により、開発効率とコード品質の向上に貢献しました。スピードを優先した開発であってもフロントエンドのルール化と共通部品の導入により、UIの一貫性と開発効率が向上し、システム全体の品質が安定しました。