ID:78628さん

## プロジェクト概要（目的・人数・体制） 既存の経費精算システムからフロントエンドを独立させ、技術的負債を解消する新規プロダクトの開発を担当しました。開発はスクラム方式で行われ、チームはフロントエンドエンジニア5名、デザイナー1名、バックエンドエンジニア2名で構成されていました。私はフロントエンドエンジニアとして参加しました。 ## プロジェクトにおける自身の役割 機能開発において、詳細設計、実装、レビュー、QA、デザイナーとのコミュニケーションを一貫して担当しました。また、自分の強みであるアクセシビリティやスタイリングに関する知見をチームメンバーと共有し、レビューを通じて最適な実装になるよう努めました。 ## 当時の背景 / 抱えていた課題 システム誕生から約6年が経過していたため、当時の技術的選択が古くなるなど、さまざまな課題がありました。例えば、Rails依存のCoffeeScriptによるフロントエンド実装、不十分なテストによる不安定な品質確認、レガシー技術による開発者のモチベーション低下、バックエンドとの密結合などです。これらの課題を解決するために、新規リポジトリを作成し、Next.jsとTypeScriptによるフロントエンドを実装し、画面ごとに置き換えるプロジェクトを行いました。 ## 課題に対して自信が発揮したバリュー及び成果 はじめはプロジェクトが検証段階にあったので、機能要件をなるべく最小限に絞り、コンパクトなリリースを目指しました。そのため、PdMやデザイナーと定期的にコミュニケーションを取り、「これは技術的なモダナイズであり、出力レベルのリプレイスではない」という共通認識を持つよう心がけました。また、デザインシステムの整備が並行して進行中であったため、UIデザインのレビューやエンジニア視点でのUI最適化・実装方法の提案を行いました。 アクセシビリティの改善には、UIコンポーネントライブラリとしてRadix UIを採用し、開発者のスキルに依らず一定の品質を保つためにeslint-plugin-jsx-a11yとMarkuplintを導入しました。さらに、カラーコントラストなどのアクセシビリティチェックを行うために@axe-core/playwrightを導入し、アクセシビリティテストを実装しました。また、CSS Modulesを使用して、ライブラリに依存しないスケーラブルで簡潔なスタイリングを実現し、静的コード解析ツールとしてSonarQubeを導入するなど、さまざまな品質向上に寄与しました。 ## 執筆記事 技術書展マーケットでの「[Money Forward TechBook #8](https://techbookfest.org/product/p0VNvfTRW6xNEMpjhLpXTV?productVariantID=rvSvNCmTBNkYWy9BifD9bG)」で、こちらの分離プロジェクトで行ったアクセシビリティ改善活動について「アクセシブルなプロダクトを提供するための取り組み」という題目で執筆しました。 以下の記事は、プロジェクト関連の記事になります。 - [aria-labelで始める、アクセシビリティ改善活動](https://zenn.dev/moneyforward/articles/b5c9b060cf9237) - [marginではなく、レイアウトを指定しよう（レイアウト手法 Stack、Clusterの紹介）](https://zenn.dev/moneyforward/articles/075a74334ca512) - [href="#"のみの指定はやめよう（フォーカス移動の問題点）](https://zenn.dev/moneyforward/articles/18c45ef93815dd) - [画像が「情報」を持っているかどうかの判断基準、持っていない場合はalt=""を指定しよう](https://zenn.dev/moneyforward/articles/bc93f64ba4d36a)

## プロジェクト概要（目的・人数・体制） 経費精算システムのフロントエンド実装の改善活動を主導しました。チームはフロントエンドエンジニア3名で構成されていました。 ## プロジェクトにおける自身の役割 フロントエンド実装の改善活動において、各課題の重要度の評価や整理、実装、レビューを担当しました。また、パッケージ管理などの定常作業を統一された進め方で行い、業務プロセスに組み込むためにドキュメントの整備や定期的な共有会を主導しました。 ## 当時の背景 / 抱えていた課題 システムは誕生から約6年が経過しており、経営的判断によりコード品質よりもスピードが重視されてきたため、技術的な課題が存在していました。 例えば、同様の機能を持つにもかかわらず見た目が一致していないUI、パッケージのバージョンが古いことによるセキュリティアラート、統一されていないコーディングスタイルなどです。これらの課題を解決するため、課題の重要度や作業量を整理し、業務プロセスとして取り組む計画を主導しました。 ## 課題に対して自信が発揮したバリュー及び成果 まず、フロントエンドメンバーが抱えている課題を洗い出し、その後、課題の重要度と作業量を見積もり、各プロジェクトの進捗に合わせて作業時間を確保しました。 具体的には、以下の作業を担当しました。 - **デザインシステムの推進** UIの見た目を開発者側で統一するため、MUIからヘッドレスUIライブラリであるRadix UIへの移行と、それを用いた新規コンポーネントの開発 - **UIの統一** 同様の機能を持つUIの見た目の統一 - **コーディングスタイルの統一** 静的コード解析ツールとして ESLint と Stylelint を導入し、検出されたエラーを一つずつ修正 - **パッケージバージョン管理** パッケージバージョン管理ツールとして dependabot を使用し、定期的な共有会やドキュメント整備を通じ、統一された進め方でパッケージのバージョンアップ作業を行う体制を構築。その結果、未処理のパッケージ数を120から30に減少させました。 - **セレクトUIの改善** セレクトUIがAPIから一括で従業員を読み込む仕様を、初期読み込みを先頭100件に絞り、その後はインクリメンタルサーチで行うように実装変更。これにより、エンタープライズ企業のお客様の体験を改善。課題解決のための設計、実装、バックエンドエンジニアとのコミュニケーション、ビジネスサイドへの確認などを一貫して実施しました。

## プロジェクト概要（目的・人数・体制） ユーザーがシステムで定義したマスタデータに加えて、任意のマスタデータを定義できる新規機能のフロントエンド開発を主導しました。開発はスクラム方式で行われ、チームはフロントエンドエンジニア2名、デザイナー1名、バックエンドエンジニア3名、QAエンジニア1名で構成されていました。 ## プロジェクトにおける自身の役割 機能開発において、詳細設計、実装、レビュー、QA、デザイナーとのコミュニケーションを一貫して担当しました。また、プロジェクト途中で参加したフロントエンドメンバーのキャッチアップや実装のサポートも行いました。 ## 当時の背景 / 抱えていた課題 経費精算システムには「部門」や「従業員」などのシステム側で定義されたデータがありましたが、ユーザーが任意でデータを定義できる機能がなかったため、それによる失注が発生していました。この問題を解決するため、ユーザーが任意のデータを定義できる新機能の開発プロジェクトが実施されました。 ## 課題に対して自信が発揮したバリュー及び成果 新機能開発プロジェクトで、初めてReactを用いた新規画面の開発に挑戦しました。デザイナーと適宜コミュニケーションを取り、デザインシステムに準拠した新規コンポーネントを開発しました。また、ドラッグアンドドロップに用いるライブラリのメジャーバージョンアップや、同様の機能を持つUIの見た目の統一など、既存画面の改善も行いました。 ユーザーが任意でマスターを定義できるようになった結果、マスター一覧のデータテーブル表示が狭くなり、ユーザー体験が悪化するという課題が発生しました。そこで、データテーブルに横スクロールを導入することをデザイナーに提案し、合意を得た上で、技術検証、実装、ビジネスサイドへの確認、QAを一貫して行いました。 また、プロジェクト途中で参加したフロントエンドメンバーのキャッチアップサポートを行いました。キャッチアップでは、経費精算システムのリポジトリ構成や技術的な課題、将来的なビジョンについて説明し、最初は文言変更などの簡単なタスクをペアプログラミングで実装して、全体の概要を理解するためのサポートを行いました。ペアプログラミングでは、まず私が簡単なタスクを実装し、実装元コードの確認方法を説明した後、DriverとObserverに分かれて疑問点に答えつつ実装を進めました。 これらの活動の結果、汎用マスタ機能を計画より2週間早くリリースすることができ、リリース後も大きな障害が発生しない安定した品質で提供できました。

## プロジェクト概要（目的・人数・体制） 秘書および経理担当者が他の従業員に代わって経費申請を行うための新規機能の開発を担当しました。開発はスクラム方式で行われ、チームはフロントエンドエンジニア2名、デザイナー1名、バックエンドエンジニア2名、QAエンジニア1名で構成されていました。 ## プロジェクトにおける自身の役割 機能開発において、詳細設計、実装、レビュー、QA、デザイナーとのコミュニケーションを一貫して担当しました。 ## 当時の背景 / 抱えていた課題 経費精算申請を部長や役員の代わりに秘書や営業事務担当が行いたいという要望がありましたが、これまではダミーアカウントを作成するなどの運用上の工夫が必要でした。この課題を解決するため、特定の人が代理申請を行える新機能の開発プロジェクトが実施されました。 ## 課題に対して自身が発揮したバリューおよび成果 プロジェクトマネージャーやデザイナーと適宜コミュニケーションを取りながら、エンジニアの観点から提案を行い、新機能追加のためのUI実装を進めました。また、申請者検索フィールドが無制限に申請者を取得していたため、エンタープライズ企業のお客様におけるパフォーマンスの低下が課題となっていました。これに対し、初期読み込みを先頭100件に絞り、その後はインクリメンタルサーチで検索する方式に変更することで改善を図りました。 さらに、機能開発にとどまらず、ボーイスカウト精神を持って、新機能実装に伴い手を加える必要のあった既存画面のバグ修正や、同様の機能を持つUIおよびレイアウトの統一、リファクタリング、テストの追加なども行いました。 これらの活動の結果、代理申請機能を計画通りにリリースすることができ、リリース後も大きな障害が発生しない安定した品質で提供することができました。

## プロジェクト概要 AmazonでのEC販売における商品の転売を自動検知するシステムの開発を担当しました。チームはフルスタックエンジニア5名で構成されていました。 ## 担当フェーズ - 設計、開発、運用および保守 ## 業務内容 - 新規画面の設計およびフロントエンド・バックエンドの開発 - 運用・保守、および不具合発生時の修正対応 - UIデザインの設計 ## 実績・取り組み - UIおよびデザインの改善に貢献し、プロダクトの品質向上に寄与しました。

## プロジェクト概要 Webサイトやランディングページ（LP）におけるコンバージョン率（CV率）を向上させるためのポップアップサービスの開発を担当しました。チームはフロントエンドエンジニア2名、バックエンドエンジニア3名で構成されていました。 ## 担当フェーズ - 開発、運用および保守 ## 業務内容 - フロントエンド開発 - 運用・保守、および不具合発生時の修正対応 - UIデザインの設計 ## 実績・取り組み - UIおよびデザインの改善に貢献し、プロダクトの品質向上に寄与しました。

## プロジェクト概要 商品販売を促進するECサイトの開発を担当しました。チームはフロントエンドエンジニア2名、デザイナー1名で構成されていました。 ## 担当フェーズ - 設計、開発、運用および保守 ## 業務内容 - フロントエンド開発 - デザイン設計 ## 実績・取り組み - 計画通りのスケジュールでECサイトをリリース - サイトデザインをテンプレート化し、今後のプロジェクトでの再利用を可能に - 合計2件のECサイトの開発を担当