ID:73377さん

【プロジェクト名】 宿泊事業者向け補助金申請プラットフォーム開発プロジェクト 【プロジェクト概要】 持続可能な観光産業への転換を支援する公的施策の効率的な運用を実現するための宿泊事業者向け補助金申請プラットフォームの設計・開発プロジェクト。ゼロベースからの新規サービス立ち上げであり、複数のフェーズに細分化された短納期プロジェクトでした。 【開発手法】 アジャイル開発（段階的デリバリー方式） 【チーム情報】 ・チーム構成：PM 1名、テックリード 1名、フロントエンドエンジニア 2名（自分含む）、バックエンドエンジニア 6名、QAエンジニア 2名 ・自身の役割：実装者（技術選定、コーディング規約策定、コードレビューを担当） ・開発期間：6ヶ月（3フェーズに分割） 【担当業務内容】 フロントエンド開発（Laravel Blade, React.js, TypeScript）を担当 ・Notionを活用した詳細な画面仕様書の設計・作成 ・Laravel BladeとReact.js/TypeScriptを組み合わせたハイブリッド実装 ・React Hook Form と Zod によるバリデーションの制御 ・AxiosインスタンスやSWRを使用したデータフェッチ ・FLOCSS設計思想に基づくSCSSによる統一的なスタイリング ・フロントエンドの継続的改善および保守管理（バージョン管理含む） ・viteによるバージョン管理 ・リンターの設定によるコード検証 ⚪︎開発・実装内容A：フロントエンド設計と技術スタック構築 【概要】 プロジェクト初期段階でのフロントエンド技術スタックの選定と実装アーキテクチャの設計 【どのような機能の開発・実装か】 Laravel BladeとReact.jsを組み合わせたハイブリッド構成の設計と実装基盤構築 【課題・問題点】 ・フェーズごとに既存システムとの互換性を保ちながら、モダンなUI/UXを提供する必要があった ・短納期での開発を実現するため、開発効率と保守性の両立が求められた ・チーム内でのTypeScriptの経験値にばらつきがあった 【打ち手・使用した技術】 ・Laravel Bladeをベースにしつつ、動的なUIコンポーネントにはReact（TypeScript）を採用する構成を提案 技術選定の背景： ・MUIなどのUIライブラリによる初期表示のアクセアビリティの強化と直感的なUI/UXの構築実現 ・コンポーネント単位での開発によるチーム間の並行作業効率化 ・型安全性確保によるバグの早期発見 ・Viteを導入し、開発効率の向上と安定的なバージョン管理を実現 ・ESLint/Prettierによる厳格なコード品質管理と統一的なコーディングスタイルの確立 ・TypeScriptの勉強会を実施し、チーム全体のスキルセットの向上に貢献 ⚪︎開発・実装内容B：フォーム設計とバリデーション実装 【概要】 複雑な申請フォームの設計と実装、エラーハンドリングの整備 【どのような機能の開発・実装か】 宿泊事業者が補助金申請を行うための多段階フォームの実装と、厳密なバリデーション処理の構築 【課題・問題点】 ・10ページ以上にわたる複雑な申請フォームを扱う必要があった ・バリデーションルールが複雑で、相互依存関係のあるフィールドの検証が必要だった ・バックエンドとフロントエンドの両方でバリデーションを整合させる必要があった 【打ち手・使用した技術】 React Hook FormとZodを組み合わせたバリデーション機構の構築 スキーマベースでのバリデーション定義により、フロントエンドとバックエンドで型定義を共有 設計思想： ・フォームの段階的保存機能の実装により、ユーザーフレンドリーな実装を目指した ・エラーメッセージのカスタマイズによるUX向上 ・Zod schemaを活用した型安全なバリデーション実装 ・実装したカスタムフックにより、フォーム間のデータ共有と状態管理を効率化 ⚪︎開発・実装内容C：データフェッチ層の設計と実装 【概要】 APIとの通信ロジックの設計と実装、状態管理の最適化 【どのような機能の開発・実装か】 バックエンドAPIとの通信基盤の構築と、効率的なデータ取得・キャッシュ機構の実装（自身が設計・実装） 【課題・問題点】 ・複数画面で同じデータを参照するケースが多く、API呼び出しの重複が懸念された ・APIレスポンスの構造が複雑で、型安全な取り扱いが必要だった 【打ち手・使用した技術】 AxiosのカスタムインスタンスとSWRを組み合わせた、型安全なデータフェッチ層の構築 設計方針： ・カスタムHookを作成し、コンポーネント間でのデータフェッチロジックを抽象化 ・SWRのキャッシュ機構を活用した重複リクエストの最適化 ・IndexedDBを活用したオフラインデータの永続化と同期処理の実装 ・APIレスポンスのインターフェース定義によるTypeScriptの型安全性確保 実装の結果、ページロード時間を短縮、データ取得時のエラー発生の低減を実現 ⚪︎開発・実装内容D：UI/UXデザインとスタイリング 【概要】 統一的なデザインシステムの構築とスタイリング実装 【どのような機能の開発・実装か】 FLOCSSに基づく設計思想を採用したSCSSフレームワークの構築とコンポーネントライブラリの実装（チーム全体で設計、自身がレビューと実装指導） 【課題・問題点】 ・複数のステークホルダー（クライアント、システム管理者、エンドユーザー）向けに一貫したUXを提供する必要があった ・将来的な拡張性と保守性を考慮したCSS設計が求められた ・レスポンシブデザインへの対応が必須だった 【打ち手・使用した技術】 ・FLOCSSアーキテクチャを基盤とした、明確な命名規則と構造化されたSCSSの実装 実装アプローチ： ・コンポーネント単位での再利用可能なスタイル定義 ・変数とミックスインを活用した一貫性のあるデザイン要素の統一 ・メディアクエリの戦略的な設計によるレスポンシブ対応 ・Storybookを導入し、UIコンポーネントのカタログ化と視覚的テストの効率化 この取り組みにより、新機能の追加開発効率の向上に繋がり、デザインの一貫性が担保された。 ⚪︎成果と評価 ・重大なバグや不具合をほぼゼロに抑え、予定通りのサービスローンチを実現 ・クライアントからの高い満足度を獲得 ・チーム内でのTypeScriptとReactの実装方針が確立され、後続プロジェクトでも活用 ・実装したコンポーネントライブラリは社内の他プロジェクトでも再利用される標準資産となった

【プロジェクト名】 駐車場管理システム 【プロジェクト概要】 不動産企業向けの駐車場管理システムの保守および追加機能開発プロジェクト。ローンチ直前の段階でアサインされ、バグ修正、パフォーマンス最適化、リファクタリングを担当し、無事にローンチおよび追加開発まで実施。 【開発手法】 アジャイル開発 【チーム情報】 ・チーム構成：PM 1名、 ・テックリード 1名、 ・フロントエンドエンジニア 3名（自分含む）、 ・バックエンドエンジニア 5名、 ・QAエンジニア 2名 ・自身の役割：フロントエンド開発、コンポーネント設計、リファクタリング主導 ・開発期間：ローンチ前 1ヶ月、追加開発 3ヶ月 【担当業務内容】 フロントエンド開発（React.js, TypeScript）を担当 ・Notionを活用した詳細仕様書の修正 ・React.jsとTypeScriptによるフロントエンド実装 ・Storybookを用いたコンポーネント駆動開発の実践 ・再利用性と保守性を重視したコンポーネント・関数設計 ・MUIとEmotionを組み合わせた一貫性のあるUIスタイリング ・React Hook FormとZodによるバリデーションの制御 ・Redux toolkit による状態管理 ・AxiosインスタンスやSWR,、カスタムフックによるデータフェッチ 【業務内容】 不動産企業様向けの駐車場管理システムの保守、追加機能開発を担当。ローンチ目前の案件へのアサインで、業務としては、バグの修繕、パフォーマンスの最適化を目的としたコード整理やリファクタリングを実施しました。 ⚪︎開発・実装内容A：コード設計とリファクタリング 【概要】 技術的負債の解消と保守性向上のためのコード構造再設計 【どのような機能の開発・実装か】 既存コードベースの分析と構造的な問題の特定、ドメイン駆動設計の考え方を取り入れたリファクタリング 【課題・問題点】 ・クライアント、マンション管理者、マンションユーザーの3つのドメインが混在し、責務の分離が不十分 ・共通化されていないコードの重複が多く、変更の影響範囲が把握しづらい状態 ・ビジネスロジックとUIロジックの境界が曖昧で、可読性が低い構造になっていた 【打ち手・使用した技術】 ・ドメイン別のディレクトリ構造の再編成とレイヤードアーキテクチャの導入 ・カスタムフックを活用した関心の分離とビジネスロジックの抽出 ・型定義の強化とインターフェースの明確化 この取り組みにより、コードの可読性が向上し、機能追加時の開発効率が改善、バグ発生率も減少 ⚪︎開発・実装内容B：バリデーション機構の刷新 【概要】 不安定だったフォームバリデーション機構の再構築 【どのような機能の開発・実装か】 React Hook FormとZodを活用した型安全なバリデーション機構の設計と実装（自身が担当） 【課題・問題点】 ・各所に散在していたバリデーションロジックが一貫性を欠いていた ・ユーザー入力に対するフィードバックが不十分で、UXの低下を招いていた ・バリデーションエラーに起因する表記揺れが頻発していた 【打ち手・使用した技術】 ・Zodスキーマを活用した宣言的バリデーション設計の導入 ・React Hook FormとZodを連携させたカスタムフック開発による再利用性の向上 ・ドメイン固有のバリデーションルールを分離し、ビジネスロジックとの整合性を確保 ・リアルタイムバリデーションとユーザーフィードバックの強化 実装後、フォーム関連のバグ報告が減少し、UXの向上にも繋がった ⚪︎開発・実装内容C：状態管理とデータフェッチの最適化 【概要】 パフォーマンスボトルネックの特定と状態管理アーキテクチャの改善 【どのような機能の開発・実装か】 Redux ToolkitとSWRを組み合わせた効率的な状態管理とデータフェッチング基盤の構築 【課題・問題点】 ・Redux storeの肥大化と不必要なリレンダリングによるパフォーマンス低下 ・APIリクエストの重複呼び出しによるサーバー負荷の増大 ・オフライン操作時（フォーム入力とサブミット/画像/ファイルのアップロード等）のデータ同期に関する問題 【打ち手・使用した技術】 ・Redux Toolkitの機能を活用した状態の正規化と分割 ・SWRを活用したデータキャッシング戦略の実装 ・メモ化を活用したコンポーネントの最適化とリレンダリング抑制 この改善により、ページロード時間が短縮し、APIリクエストのパフォーマンス改善につながった ⚪︎開発・実装内容D：UI/UXの改善とコンポーネント設計 【概要】 ユーザー体験の向上とデザインシステムの基盤構築 【どのような機能の開発・実装か】 MUIとEmotionを活用した一貫性のあるUIコンポーネントライブラリの設計と実装、Storybookによるコンポーネント駆動開発の導入 【課題・問題点】 ・デザインの一貫性が不足し、ユーザーの混乱を招いていた ・3つの異なるユーザードメイン（クライアント、管理者、ユーザー）向けのUIが統一されていなかった ・コンポーネントの再利用性が低く、開発効率の低下を招いていた 【打ち手・使用した技術】 ・アトミックデザインをベースにしたコンポーネント階層のリファクタリング ・MUIとEmotionを組み合わせたテーマ定義と拡張可能なスタイリングシステム： ・Storybookを活用したコンポーネントのカタログ化とインタラクティブな開発環境の構築 ・レスポンシブデザインとアクセシビリティを考慮したコンポーネント設計 この取り組みにより、新機能の開発時間が短縮され、デザインの一貫性による顧客満足度が向上 ⚪︎成果と評価 ・予定通りのシステムローンチを実現し、ローンチ後の重大バグは発生は起きなかった ・コードベースの品質と保守性の大幅向上（循環的複雑度が平均30%減少） ・パフォーマンス改善によるユーザー体験の向上（Lighthouse スコアが30%向上） ・チーム内での再利用可能なパターンの確立 ・クライアントからの高評価を獲得し、追加開発フェーズの受注に貢献 この経験から得た教訓として、初期設計段階での適切な抽象化と責務分離の重要性を再認識し、後続プロジェクトの設計改善に活かすことができた

【プロジェクト名】 ビデオボット会議システム 【プロジェクト概要】 AIアシスタントとの対話型インタラクションを提供するビデオボット会議システムの大規模リノベーション。旧バージョンのAngularから最新の安定版へのマイグレーションを実施し、アプリケーション全体のモダナイゼーションを達成しました。システムはインタビュー形式を通じてビジネスや個人のニーズに対応し、自動生成される議事録や分析結果により業務プロセスを効率化する重要なプラットフォームです。 【担当業務内容】 ・アプリケーション全体のバージョン管理、保守を担当 古いバージョンから、安定版のAngulerにバージョンをあげる。 それに伴って、UIライブラリであるAngular Matrial の更新も安定版に置き換え。 さらにバージョンを上げたことによる、不具合の修正やUI崩れの修正（テンプレートファイル、コンポーネントファイル、tailwind やscssを用途に合わせて修正）、jestによるテストコードのエラーを解消。全部で400〜500を超えるファイルの修正を行いました。 【開発手法】 ・アジャイル開発 【チーム情報】 ・チーム構成：PM 1名、テックリード 1名、フロントエンドエンジニア 2名（自分を含む）、バックエンドエンジニア 5名、QAエンジニア 2名 ・自身の役割：実装者 ・開発期間：3ヶ月（計画・実装・テスト・リリース） ⚪︎開発・実装内容A：Angularバージョンアップグレード戦略 【概要】 レガシーAngularアプリケーションの最新安定版へのマイグレーション計画の策定と実行 【どのような機能の開発・実装か】 旧バージョンのAngularから最新の安定版へのアップグレード戦略の立案と実施（自身が主導） 【課題・問題点】 ・400〜500以上のファイルを持つ大規模アプリケーションの移行リスクが高かった ・依存ライブラリとの互換性問題（特にAngular Material）が複雑だった ・チーム内でのAngular最新版の知識・経験にばらつきがあった ・サービス停止時間の最小化とリスク管理が必要だった 【打ち手・使用した技術】 段階的マイグレーション戦略の策定： ・依存関係の詳細な分析とアップグレードパスの特定 ・マイナーバージョン単位での段階的アップグレードによるリスク分散 ・各ステップでのテストとロールバック計画の整備 ・Angularの公式ng-updateコマンドとカスタムスクリプトの組み合わせによる移行の半自動化 ・パフォーマンス面を考慮した移行判断基準の策定と適用 ・チーム全体でのナレッジシェアによる移行ノウハウの共有 結果として、計画より2週間早く全モジュールのマイグレーションを完了し、ダウンタイムを再上限での切り替えを実現 ⚪︎開発・実装内容B：Angular Materialの更新と互換性対応 【概要】 UIコンポーネントライブラリの最新化と互換性問題の解決 【どのような機能の開発・実装か】 Angular Materialの安定版へのアップデートとUI互換性の維持（自身が設計・実装） 【課題・問題点】 ・Angular Materialの破壊的変更によるAPIの互換性の喪失 ・コンポーネントスタイルの変更によるUI崩れの発生 ・Material Themeの構造変更への対応が必要 ・既存のカスタムコンポーネントとの相互作用問題 【打ち手・使用した技術】 ・テーマ定義の再構築と変数マッピングの作成 ・全画面・全バリエーションでのUI検証プロセスの確立と実行 この取り組みにより、見た目の一貫性を維持しながら新しいUIコンポーネントシステムへの移行を完了し、UI崩れの発生率を95%削減 ⚪︎開発・実装内容C：テンプレートとコンポーネント修正 【概要】 新しいAngular構文とライフサイクルへの対応 【どのような機能の開発・実装か】 変更されたAngular構文やライフサイクルメソッドへの対応（自身が主導、チーム全体で実施） 【課題・問題点】 ・Angularテンプレート構文の変更（特にngModel、FormGroupなど） ・コンポーネントライフサイクルフックのAPI変更 ・RxJSの破壊的変更による非同期処理の不具合 ・依存性注入（DI）システムの変更 【打ち手・使用した技術】 ・自動修正ツールと手動修正の組み合わせによる効率的な対応： ・パターン化された変更のバッチ処理による作業効率化 ・コードレビューツール(Copilot)を活用した集中的な品質管理 この作業により、400〜500ファイルの修正を計画より1週間早く完了し、変更による不具合発生率を通常の50%以下に抑制 ⚪︎開発・実装内容D：テスト自動化と品質保証 【概要】 テストコードの更新と自動化フレームワークの強化 【どのような機能の開発・実装か】 Jestを用いたテストコードの修正とテスト自動化基盤の強化（自身が担当） 【課題・問題点】 ・既存のテストコードがAngularバージョン更新で動作しなくなっていた ・テストカバレッジが不十分で、リグレッションリスクが高かった ・CI/CDパイプラインとの統合が必要だった 【打ち手・使用した技術】 ・TestBedの設定更新とモジュールのモック方法の刷新 ・Jest設定の最適化とテスト実行速度の向上 ・コンポーネントの単体テストとインテグレーションテストの分離設計 ・CI/CDパイプラインとの統合と自動テスト実行の仕組み構築 この取り組みにより、テストカバレッジが大幅に向上し、リリース後のバグ発生率が60%減少 ⚪︎成果と評価 ・予定より2週間早く全モジュールのマイグレーションを完了し、サービス停止なしで移行を実現 ・アプリケーションのパフォーマンスが平均で35%向上（ページロード時間、メモリ使用量） ・新機能開発速度が向上し、開発チームの生産性が大幅に改善 ・テスト自動化によりリグレッションテスト時間が削減され、品質の安定化を実現 ・移行ノウハウをドキュメント化し、社内の他プロジェクトでも活用される技術資産を構築 このプロジェクトを通じて、大規模マイグレーションの計画立案から実行までの実践的知識と経験を獲得し、スキルを向上させることができた