【目的、背景】
某放送局社員が収録した映像や音声などのコンテンツを管理したり視聴したり放映リストに登録できる業務システムの新規開発
【タスク内容】
・各画面のUIコーディング
・各機能実装
・単体テストコード実装とそのアドバイス
・リファクタリング
・Rtk queryからreduxとaxiosへのリプレイス
・api routeでのログ出力実装
・ファイルアップロード機能（ファイルアップロードのリネーム、字数制限、エラーハンドリング、命名規則など複雑なロジック）
・ただ仕様通りに開発するのでなく、ほんとうに必要な仕様か、もっとこうした方が良いなどユーザー目線で提案
【規模感、チーム構成、担当した役割
リーダー：1名 セクションリーダー：3名 開発メンバー：10名
【使用技術や開発環境等】
開発手法：スクラムでの新規開発
フロントエンド：TypeScript、Next.js、MaterialUI,
バックエンド：C♯
DB：MySQL
ツール：DevOps、Git、Teams
【取り組んだ課題1】
引き継いだ画面が多くの機能を提供していたため1つのコンポーネントのコード量が1500行以上になり、開発の運用性や可読性に欠けていた。このままだとバグも発生しやすくなり保守性に欠けると考えたことから以下を行なった。
・画面の構成要素ごとに別コンポーネントに切り出し、共通化・部品化及び外出しを行なった。
・状態管理の共通化できそうなロジックはカスタムフックで切り抜き再利用性を高めた。
・同じプロップスの型が様々なコンポーネントでその都度定義されていたので、TypeScriptの「type of」などを使って型定義の再利用を行なった。
結果、1500行以上のコンポーネントの行数を300行未満~500行までに削減でき、ソースコードの運用性や可読性を向上させて開発コスト削減に貢献した。
私はこのように業務の中で自ら問題点を見つけ解決に導けます。
【取り組んだ課題2】
画面設計書の記載が抽象的なためプランニングの際に仕様を詰めきれておらず、チケットの見積もりが甘くなり予定工数通りにチケット消化が進まない状態が続いた。
対策として、画面設計書の記載を以下のような具体的な情報を記載することで、プランニング時にタスクを細分化しやすくより正確な見積もり時間を算出できるようにチームに提案して実行した。
・「分けるべき」または「共通化/部品化すべき」コンポーネントのロジックやプロップスなどのコンポーネント構造
・状態管理はuseStateを使うのか、Reduxでグローバルに管理するのかなどの状態管理方法
・エラー時の挙動、使用するエラーコードやエラーメッセージなどのエラーハンドリング情報
結果、1スプリント内にチーム内のチケット消化が10チケット中5チケット程度しか消化できなかったのが、10チケット中8チケット以上を消化できるまでになった。
私はこのように失敗経験を糧にして試行錯誤していくことで、成功体験に結びつけることができます。
【取り組んだ課題3】
どのAPIにどの状態管理ツールを使用するか私と他メンバーで相違があったことから、一度フロントエンドの全メンバーと認識合わせする必要性を感じ以下を実行した。
・フロントエンドメンバー全員をMTGに招待して認識合わせの機会を設けた。
・MTGにて、私が認識しているuseState, Redux, RTK Queryの状態管理ツールの使用用途を整理したフォーマットを共有して、それぞれ状態管理ツールの使用用途の認識合わせを行った。
・MTGにて、先ほどまとまった状態管理ツールの認識を元に、どのAPIにどの状態管理ツールを使用するかの検討と認識合わせを行った。
結果、状態管理ツールの使用用途と各APIの状態管理ツール採用理由の認識を合わせることができた。
私はこのように他者を巻き込んで積極的に気付いた問題を解決に向かえる行動力があります。