# プロジェクト概要
Chrome拡張管理アプリケーションの開発案件。
Webアプリケーション全体の設計・実装を担当し、インフラ構築も含めた幅広い業務を遂行。
短いスプリントを重ねるアジャイル開発を採用し、ユーザーのフィードバックを反映しながら開発を進行。
---
## チーム情報
- **体制**: PM1名、メンバー2名(うちWeb開発経験者は自分のみ)
- **役割**: フロントエンド・バックエンドの設計・実装、インフラ構築を担当
---
## 主な開発・実装内容
### 【開発】Chrome拡張管理アプリケーションの開発
#### 概要
ユーザーがChrome拡張アプリケーションの登録・更新・削除・ダウンロードを行える管理システムを構築。
フロントエンド、バックエンド、インフラ全体を一貫して担当し、ユーザー中心の設計で直感的な操作性を実現。
#### 実施内容
- **フロントエンド**:
- **技術スタック**: Vue.js, Vuetify, Vuex, Vue Router, Axios
- **実装内容**:
- SPA構成で管理者ページとアプリケーション一覧ページを開発
- プルダウンメニュー、テーブル、ダイアログ表示など、直感的なUIを実装
- フォームバリデーションや入力フィールドの動的追加・削除機能をテンプレートエンジンで実現
- API通信処理をAxiosで実装し、共通化可能なAPIファサードを開発
- **バックエンド**:
- **技術スタック**: FastAPI, MySQL, AWS S3
- **実装内容**:
- RESTful APIを設計・実装し、CRUD操作を提供
- Chrome拡張ファイル(ZIP形式)の登録・更新・削除・ダウンロード機能を実装
- ファイルストレージにAWS S3を採用し、安全かつスケーラブルな管理を実現
- APIドキュメント生成とエンドポイントのユニットテストを実施
- **インフラ**:
- **技術スタック**: Docker, Docker Compose, GitHub Actions
- **実装内容**:
- Dockerによる開発環境のコンテナ化と環境構築
- GitHub Actionsを使用したCI/CDパイプラインの構築
#### 開発プロセス
- アジャイル手法を採用し、短期間のスプリントで開発を進行
- ユーザーのフィードバックを迅速に反映し、仕様が曖昧な部分は都度確認しながら明確化
- VuetifyとElement+の技術選定を行い、チームスキルやドキュメントの豊富さを考慮してVuetifyを採用
#### 課題と解決策
- **課題**:
- 仕様の曖昧さや短いスプリントにおける要件の都度確認が必要
- バックエンドAPI未完成の状態でフロントエンドの開発を開始
- **解決策**:
- 仮データを用いてAPIが完成する前の段階から動作確認を実施
- チームメンバーとのペアプロやタスク管理を通じて効率的に開発を進行
#### 成果
- 直感的なUIとスムーズなユーザー操作性を実現したChrome拡張管理アプリケーションを提供
- アジャイル手法での迅速な仕様変更対応により、ユーザー満足度向上に貢献
---
## 技術スタック
- **フロントエンド**: Vue.js, Vuetify, Vuex, Vue Router, Axios
- **バックエンド**: FastAPI, MySQL, AWS S3
- **インフラ**: Docker, Docker Compose, GitHub Actions
- **その他**: JIRA(スプリントとタスク管理)
---
## 成果・貢献
- Vue.jsとVuetifyを活用して、再利用性と視覚的に魅力的なUIを実現
- FastAPIで効率的かつセキュアなバックエンドを構築し、AWS S3でスケーラブルなファイル管理を実現
- アジャイル手法での開発により、ユーザー中心のシステムを短期間で提供
- 開発・インフラ設計を一貫して担当し、高品質なプロダクトを実現