ID:78628さん

**役割:** フロントエンドエンジニア **規模/体制:** フロントエンド: 2名 / バックエンド: 3名 / デザイナー: 1名 / QA: 1名 **技術スタック:** TypeScript, HTML, CSS, Ruby / Next.js, React, MUI, Ruby on Rails **【概要・背景】** カルテアプリケーションのフロントエンドリプレイスおよびデザインシステムの構築を担当しました。 誕生から約5年が経過したRuby on Rails製の既存カルテシステムは、リッチなUI表現が困難であり、開発スピードの低下や、設計の不備によるレスポンス遅延といった複数の課題を抱えていました。これらを解決するため、Next.jsとTypeScriptを用いたモダンなフロントエンド環境への段階的な画面リプレイス方針が決定し、メイン機能であるカルテ画面のリプレイス、およびそれと並行してデザインシステムの構築に着手しました。 **【自身の役割】** 機能開発において、設計、ライブラリ選定、詳細設計、実装、レビュー、QA、デザイナーとのコミュニケーションを一貫して担当しました。また、チームの「チャンスがあれば積極的に越境する」という方針のもと、フロントエンド開発にとどまらず、Ruby on Railsを用いたシンプルなAPI実装も自発的に担当しました。 **【発揮したバリュー・成果】** * **職能を越えた開発の円滑化とドキュメント整備:** 職能で分担しないというチーム方針のもと、フロントエンドを専門としないバックエンドエンジニアが開発する場合も実装に迷わないための環境を整備しました。具体的には、アプリケーション全体のアーキテクチャ設計、MUIのスタイリング方針、DialogやDrawerといった複雑な複合コンポーネントの利用方法などを体系的ドキュメント化し、開発効率の向上を図りました。これにより、ある程度複雑な実装が必要になった場合も、正しい情報を参照したAIのサポートを受けながら開発することができるので、より多くのメンバーがより正確な実装をできる手助けになったと考えています。 * **MUIの特性を活かしたデザインシステムの段階的構築:** これまでのデザインシステム推進の経験を活かし、最初から全てのコンポーネントを実装するのではなく、カルテ画面に必要なコンポーネントから順次実装していくスモールスタートを提案し、実行しました。また、MUIの標準設計から逸脱した複雑なデザイン要求に対しては、将来的なメンテナンス性の低下を防ぐ観点から、MUIの設計思想に沿った代替表現をデザイナーへ提案・調整しました。 * **不確実性の高いリプレイスにおけるリスク管理:** 歴史の長いシステム特有の「過去の意思決定の不透明さ」に対し、メンバー間で入念なコミュニケーションを重ねることでデグレを防止しました。また、リプレイス初期フェーズにおける不確実な領域のリスクを低減するため、PdMやデザイナーと緊密に連携し、既存仕様をベースとした、機能要件を最小限に絞り込んだコンパクトなリリース戦略を提案し、遂行しました。これにより、無事契約期間内にファーストリリースの機能実装まで完了することができました。

**役割:** フロントエンドエンジニア **規模/体制:** フルスタックエンジニア: 2名 / フロントエンジニア: 2名 / デザイナー: 1名 **技術スタック:** TypeScript, HTML, CSS / Next.js, React, Hono, Tailwind CSS / Radix UI, eslint-plugin-jsx-a11y, Markuplint **【概要・背景】** モバイルオーダーおよびPOSレジシステムにおいて、デザインシステムの構築、UX改善、および新規機能開発のサポートを担当しました。それまで同社では開発スピードが優先され、デザイナーが不在であったため、エンジニアがデザインと実装を兼任していました。その結果、同一アプリケーション内でもページごとにUI表現の不一致が生じるなどの課題が発生しており、これを解決すべくデザインシステム構築プロジェクトが立ち上がりました。また、ITリテラシーを問わず不特定多数のユーザーが利用するtoC向けアプリケーションである性質上、UXやアクセシビリティの向上が急務であり、多数の改善要望が蓄積されている状況でした。 **【自身の役割】** デザインシステム構築をメインミッションとし、短期スポットメンバーとして参画しました。マイルストーンの策定、デザインレビュー、技術選定、詳細設計、実装、コードレビューに至るまでを一貫して主導しました。また、本務と並行して、UX改善チケットの消化やクーポン機能などの新規機能開発のサポートにも従事しました。 **【発揮したバリュー・成果】** * **計画的な進捗管理:** 約3ヶ月という限られた期間で確実に成果を出すため、初期段階でマイルストーンを策定、スプリントごとに進捗の振り返りと調整を徹底し、遅延のない開発サイクルを維持しました。その結果、契約期間内にデザインシステムとして定義された主要コンポーネントの実装から、既存コンポーネントの置き換えまでを無事完遂させることができました。 * **多様なユーザーを想定したアクセシビリティの担保:** ユーザーのリテラシーに依存しない操作性を実現するため、UIコンポーネントライブラリにRadix UIを採用しました。さらに、チーム全体の開発スキルに関わらず一定の品質を保つ仕組みとして、eslint-plugin-jsx-a11yとMarkuplintを導入しました。これらによって検出されたエラーを一つひとつ解消していくプロセスを通じて、チーム内のHTML仕様に関する学習と理解向上にも寄与できたと考えています。

## プロジェクト概要（目的・人数・体制） 既存の経費精算システムからフロントエンドを独立させ、技術的負債を解消する新規プロダクトの開発を担当しました。開発はスクラム方式で行われ、チームはフロントエンドエンジニア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サイトの開発を担当