ID:84977さん

# プロジェクト詳細 事業会社向けの貿易管理マスタシステム開発に、フロントエンドエンジニア（SE）として参画しました。14名体制（PM2名、FE6名、BE6名）のアジャイルチームで、主に商品一覧・商品登録・商品編集の3画面を担当しました。 画面仕様書・アクション定義表・バリデーション定義の修正から、実装、単体テスト、結合テスト、不具合改修まで一連の工程を担当しました。 # 担当機能・業務上の目的 商品一覧画面では、検索・キーワード検索機能の実装・改修を行い、ユーザーが必要な商品情報を素早く特定できるようにしました。 商品登録・編集画面では、入力項目の追加・削除、初期表示処理、モーダル、バリデーションなどを実装し、商品マスタを正確かつスムーズに登録・更新できる画面を構築しました。 また、ユーザーのステータスに応じた画面表示制御を実装し、利用者の状態に応じた適切な操作ができるよう対応しました。 # 使用技術 Next.js / TypeScriptを中心に、MUIを用いたUI実装、React Hook Form、Yupによるフォーム・バリデーション処理、React Queryによるデータ取得処理を実装しました。 また、必要に応じて作成したコンポーネントのStorybookを作成しました。 # 課題と工夫 既存コードではuseEffectが多用されており、状態や処理の依存関係が複雑化していたため、不具合発生時の原因特定や改修時の影響範囲を把握しづらい状態でした。 そこで、useEffectへの依存を減らすため、処理の責務や機能単位でコンポーネントを分割しました。過度な共通化よりも、状態の局所化と処理の見通しやすさを優先し、不具合発生時に原因や影響範囲を切り分けやすい構成へ改善しました。 また、バックエンド側の仕様変更が多かったため、BEエンジニアと随時認識合わせを行い、API仕様や画面への影響を確認しながら、手戻りを抑えることを意識して開発しました。 # 発揮したバリュー・成果 商品一覧・商品登録・商品編集の主要3画面を担当し、実装、テスト、不具合改修まで一貫して対応しました。 開発・テストを通じて50件以上の不具合の発見・修正に対応し、画面機能の品質向上に貢献しました。 FEメンバー間でも相互にコードレビューを実施しました。短い開発サイクルの中でも、品質と開発スピードの両立を意識して担当機能の開発を進めました。 # この案件で得られたこと 複雑化した既存コードの改修を経験したことで、機能を動かすだけではなく、状態管理や副作用の影響範囲を考慮し、責務を適切に分離する重要性を学びました。 また、仕様変更の多いスクラム開発を通じて、FE・BE間で認識を合わせながら柔軟に対応する力や、未経験の技術でも短期間でキャッチアップしてスピード感をもった実装につなげる力を身につけました。