## プロジェクト概要
組織の人員配置案を作成するアプリケーション。
ツリー図上でドラッグ&ドロップにより社員や組織を操作でき、複数人での同時編集も可能。
部門長が作成した人員配置案を人事がレビューする業務フローを想定。
## チーム規模
10名
## 言語・FW
- フロントエンド: TypeScript, Vue.js, React
- バックエンド: TypeScript, NestJS, Go, serverless framework
## インフラ
- AWS
- RDS
- DynamoDB
- SQS
- Lambda
- API Gateway
- ElastiCache
- S3
- Cloudfront
## 通信プロトコル
- GraphQL, WebSocket
## ツール
- Docker, CodeBuild, GitHub, GitHub Actions, PostgreSQL, Terraform
## チームでの役割
フロントエンド・バックエンド・インフラ全般を担当。具体的な業務内容は以下の通りです。
- 新規機能の企画・開発
- 保守運用
- 環境構築・問い合わせ対応
- ジュニアメンバーのPull Requestレビューやペアプロ
- 次期アーキテクチャの技術選定
## プロジェクト詳細
### 社員フィルタ機能の開発
**概要**: 別システムと連携する際に社員をフィルタする機能を開発。
**課題・問題点**: パートやアルバイトが多いユーザーが配置案を操作しづらい。
**打ち手・使用した技術**:
- **企画**: ターゲット層の策定とユースケースの洗い出しをコンサルと連携。チームメンバーやEMにレビューを依頼。
- **設計**: 仕様の方針策定、システムアーキテクチャの検討と合意形成。
- **開発**: 実装とテスト。
- **運用**: お客様の要望や不具合の問い合わせ対応
### ローカル環境の整備
**概要**: 開発環境のパフォーマンス改善と効率化。
**課題・問題点**: ビルド時間が長く、開発効率が低下していた。
**打ち手・使用した技術**:
- **webpackからesbuildへの移行**: ビルド時間を2分から15秒に短縮。
- **Dockerの導入**: ローカル環境のリソース管理をDocker化。検証を行い、チームメンバーを巻き込んで導入。
さらにビルド時間を10秒まで短縮し、新規参入メンバーの環境構築手順の簡略化に成功。
### ライブラリのバージョンアップ
**概要**: 技術スタックの最新化のために各ライブラリのバージョンアップを行う。
**課題・問題点**: 古いライブラリに依存していたため、最新の機能が取り入れられない。移行プロジェクト自体はあったが優先度が決めづらく停滞していた。
**打ち手・使用した技術**:
- **Vue2.0からReactへの移行**: 5人チームで対応。Vue3.0系とReactをモブプロ形式で検証しメリットデメリットを洗い出す。その後具体的な移行方針を策定。
また、プロジェクトを動かすために中心となって重要度の認識を合わせマイルストーンを引きプロジェクトを牽引した。
### GraphQLの利用改善
**概要**:GraphQLの運用方針の策定。
**課題・問題点**:GraphQLに精通したメンバーがおらず利点が活かせていない。
**打ち手・使用した技術**:
- **Apollo Clientを用いたキャッシュの活用**:状態管理ライブラリを用いてキャッシュしていた部分をApollo Clientで正規化されたデータでキャッシュさせて管理する。
- **Fragment Colocationの導入**:GraphQLフラグメントを活用してフロントエンドのコンポーネントごとにクエリを定義してコンポーネントの凝縮度を向上させる。
- **メンバーへのナレッジトランスファー**:Parentフィールドや命名規則、GraphQLのキャッシュの仕組みなどを勉強会やPull Reqestレビューを通して共有。
### ソフトウェアアーキテクチャの改善
**概要**: システム全体のコードベースとアーキテクチャの見直し。
**課題・問題点**: コードの依存関係が複雑で、メンテナンスが困難。
**打ち手・使用した技術**:
- **NestJSのDIシステムの利用**: レイヤーごとに依存関係を整理し、外部ライブラリなどをプラグイン化。クリーンアーキテクチャを参考。
- **ナレッジトランスファー**: メンバーへの知識共有とPull Requestのレビューを担当。
### パフォーマンス改善
**概要**: システムのスケーラビリティとパフォーマンス向上。
**課題・問題点**: 大規模ユーザー数がサービスを利用できない(30,000名以上)。
**打ち手・使用した技術**:
- **Lambdaのペイロードサイズ上限の回避**: S3を経由してイベント駆動で処理するワークフローの整備。
- **コードのリファクタリング**:不要なループの削除やオブジェクト展開などのCPUに負荷が大きいロジックの修正。
- **RDBの改善**:インデックス活用やクエリの最適化。
- **帳票システムのGo言語でのリプレイス**:GoRoutineを用いた並列処理で速度改善。
### IaCの整備
**概要**: インフラ管理の効率化。
**課題・問題点**: serverless frameworkへの依存、開発者体験の低下。
**打ち手・使用した技術**:
- **terraformへの一部移行**: lambda依存のないインフラリソースをterraformへ移行
- **Github ActionsによるCD整備**:terraform plan, applyを自動実行するワークフローの作成。terraformの実行用のIAMロールを管理するワークフローの作成。