## プロジェクト概要
Swing はユーザーがチームや募集を簡単に作成、管理、参加できるプラットフォームです。リアルタイムでのコミュニケーションや位置情報を活用した検索機能を提供します。
### 目的、背景
このプロジェクトは、草野球愛好者のコミュニティを形成し、参加の障壁を解消するためのWEBプラットフォームを開発することを目的としています。背景として、草野球の愛好者が試合や練習の参加者を効率的に募集できる環境が不足している現状がありました。
### チーム情報
このプロジェクトは個人開発プロジェクトです。全ての開発工程を一人で担当しました。
### 使用技術や開発環境
- フロントエンド：React, Next.js, Node.js (node:18.16.0-alpine)
- バックエンド：Ruby (3.2.4), Ruby on Rails (7.1.3.4)
- データベース：MySQL (8.0), Redis (7.2.5)
- 開発環境：Docker (3.8), GitHub Actions（CI/CD）
- 認証：JWT
- デプロイ：AWS EC2, S3, CloudFront
- Webサーバー：Nginx (1.26.1)
- コード品質管理：Rubocop, ESLint
- テストツール：Rspec
- 地図API：Google Maps API（ジオロケーションとJavaScript API）
## 技術選定の理由
- **React, Next.js**：高速なレンダリングとSEO対策を実現するため。Next.jsのSSRとSSG機能を活用してページロード速度とSEOを最適化。
- **Node.js (node:18.16.0-alpine)**：軽量かつ効率的なサーバーサイド処理のため。非同期I/O処理で高スループットのAPIサーバーを実現。
- **Ruby (3.2.4), Ruby on Rails (7.1.3.4)**：迅速なプロトタイピングと強力なMVCフレームワークのため。Railsのスキャフォールディング機能で迅速な開発。
- **MySQL (8.0)**：高いパフォーマンスと信頼性のため。インデックスを活用し、クエリパフォーマンスを最適化。
- **Redis (7.2.5)**：高速なキャッシュとセッション管理のため。セッションデータとクエリ結果をキャッシュし、パフォーマンスを向上。
- **Docker (3.8)**：一貫した開発環境を提供し、デプロイを簡素化するため。Docker Composeで環境の一貫性を確保。
- **Nginx (1.26.1)**：高いパフォーマンスと最新のセキュリティアップデートを利用するため。リバースプロキシ設定とSSL/TLSの最新プロトコルを使用。
- **AWS**：スケーラブルなインフラを提供するため。EC2の自動スケーリングやS3とCloudFrontで高可用性と低遅延を実現。
- **GitHub Actions**：CI/CDパイプラインの自動化と効率化のため。自動テスト、ビルド、デプロイを構築。
- **Google Maps API**：地理情報を提供し、ユーザーが簡単に場所を特定できるようにするため。地図表示とジオロケーションを活用。
- **S3**：スケーラブルなストレージソリューションを提供し、ユーザーのプロフィール画像を安全に保存するため。適切なバケットポリシーとACLを設定。
## 開発・実装内容A：ユーザー認証とセキュリティ
### 【概要】
安全な認証システムの構築。
### 【課題・問題点】
ユーザーの安全な認証方法の実装。
### 【技術的な課題】
- **SQLインジェクション**：ユーザー入力を介してSQLクエリを操作されるリスク。
- **CSRF攻撃**：ユーザーのセッションを利用した不正なリクエスト。
### 【打ち手・使用した技術】
- JWTを使用して、ユーザー認証を実装。
- セキュリティ強化のため、OWASP Top 10に基づくセキュリティレビューを実施。
- **SQLインジェクション対策**：ActiveRecordのプレイスホルダーを使用して、SQLインジェクションを防止。
- **CSRF対策**：RailsのCSRFトークン機能を活用して、CSRF攻撃を防止。
### 【成果】
- 安全な認証システムの構築により、ユーザーの信頼を獲得。
- セキュリティインシデントの発生を防止。
## 開発・実装内容B：データベース設計
### 【概要】
効率的でスケーラブルなデータベース設計の実施。
### 【課題・問題点】
データの一貫性とクエリパフォーマンスの向上。
### 【技術的な課題】
- 複雑なリレーションシップの管理。
- クエリパフォーマンスの最適化。
### 【打ち手・使用した技術】
- ユーザー、チーム、募集のリレーションシップを明確に設計。
- インデックスを設定し、クエリの実行速度を最適化。
- トランザクションを使用して、データの整合性を確保。
### 【成果】
- 効率的なデータベース設計により、クエリパフォーマンスが向上。
- データの一貫性が保たれ、信頼性が向上。
## 開発・実装内容C：パフォーマンス最適化
### 【概要】
WEBサービスのパフォーマンス最適化。
### 【課題・問題点】
N+1クエリ問題、ページのロード時間短縮、高負荷時のパフォーマンス低下。
### 【技術的な課題】
- **N+1クエリ問題**：関連データのロードによる多重クエリの発生。
- **ページロード時間**：ユーザー体験を損なう遅延。
- **高負荷時のパフォーマンス**：サーバーのスケーラビリティ確保。
### 【打ち手・使用した技術】
- Railsの`includes`メソッドを使用してN+1クエリ問題を解消。
- フロントエンドでコードスプリッティングとキャッシングを実装し、ページロード時間を短縮。
- Nginxの設定を最適化し、静的ファイルの提供を効率化。
- Redisを使用してセッションデータとクエリ結果をキャッシュし、サーバー負荷を軽減。
### 【成果】
- N+1問題を解消し、クエリパフォーマンスが大幅に向上。
- ページロード時間を3秒から2秒に短縮。
- サーバーの負荷が軽減され、レスポンスタイムが改善。
## 開発・実装内容D：リアルタイム通信
### 【概要】
応募者とチームオーナー間のリアルタイムチャット機能の実装。
### 【課題・問題点】
リアルタイムでのコミュニケーションを可能にする。
### 【技術的な課題】
- **リアルタイム通信の実装**：低レイテンシかつスケーラブルなチャット機能の実現。
### 【打ち手・使用した技術】
- WebSocketの代わりに、ポーリング技術を用いてリアルタイム通信を実現。
- ポーリングのインターバルを調整し、サーバー負荷を最小限に抑えながらリアルタイム性を確保。
### 【成果】
- リアルタイムでのコミュニケーションが可能になり、ユーザーエンゲージメントが向上。
- チャット機能の導入により、応募後のコミュニケーションがスムーズに行われるように。
## 開発・実装内容E：CI/CDの導入
### 【概要】
開発プロセスの効率化と自動化。
### 【課題・問題点】
開発からデプロイまでのプロセスの効率化。
### 【技術的な課題】
- **継続的インテグレーション**：テストとデプロイの自動化。
- **継続的デリバリー**：迅速なリリースサイクルの確立。
### 【打ち手・使用した技術】
- GitHub Actionsを使用してCI/CDパイプラインを構築し、自動テスト、ビルド、デプロイのプロセスを一元化。
### 【成果】
- 開発からデプロイまでのプロセスが効率化され、リリースサイクルが短縮。
- 自動テストにより、コードの品質が向上し、不具合の早期発見が可能に。
## 開発・実装内容F：ユーザビリティとデザインの工夫
### 【概要】
ユーザー体験の向上とデザインの最適化。
### 【課題・問題点】
ユーザー体験の向上とデザインの最適化。
### 【技術的な課題】
- **レスポンシブデザイン**：多様なデバイスでの一貫したユーザー体験の提供。
- **直感的なUI**：ユーザーの操作性の向上。
### 【打ち手・使用した技術】
- Chakra UIを用いて、レスポンシブかつ直感的なデザインを実現。
- シンプルかつ一貫性のあるデザインにすることで、ユーザーの操作性を向上。
- カラースキームやフォントの選定により、視認性を高め、ユーザーが快適に利用できるよう工夫。
### 【イメージ選定の理由】
- 草野球愛好者向けに、親しみやすさと楽しさを感じさせるデザインを意識。
- チームカラーやユニフォームのイメージを反映させ、ユーザーが共感しやすいビジュアルに。
- 高い視認性と一貫性を保つために、Chakra UIのカスタマイズ機能を活用。
### 【成果】
- レスポンシブデザインにより、様々なデバイスで快適に利用可能。
- シンプルで直感的なUIにより、ユーザーの操作性が向上。
- 視認性の高いデザインにより、ユーザーが快適にサービスを利用できるように。
## 開発・実装内容G：Google Maps APIの使用
### 【概要】
募集作成時に場所を指定し、募集詳細で作成時に指定した場所を表示し、近くの募集を表示・検索できるようにする機能の実装。
### 【課題・問題点】
ユーザーが簡単に募集の場所を指定・検索できるようにする。
### 【技術的な課題】
- **地理情報の取得と表示**：ユーザーが直感的に場所を指定できるインターフェースの提供。
### 【打ち手・使用した技術】
- Google Maps JavaScript APIを使用して、地図の表示とカスタマイズを実現。
- ジオロケーションAPIを使用して、ユーザーの現在地を取得し、地図上に表示。
- 募集作成時にGoogle Mapsを使って場所を指定し、その情報をデータベースに保存。
- 募集詳細ページでGoogle Mapsを使用して指定された場所を表示。
- ユーザーの現在地に基づいて、近くの募集を検索・表示する機能を実装。
### 【成果】
- ユーザーが自分の現在地や目的地を簡単に見つけることができ、利便性が向上。
- イベントの場所を視覚的に把握できるため、参加者が集まりやすくなった。
## 開発・実装内容H：S3を使用したプロフィール画像の設定
### 【概要】
ユーザーがプロフィール画像をアップロード・表示できる機能の実装。
### 【課題・問題点】
安全かつスケーラブルな方法でユーザーのプロフィール画像を保存・提供する。
### 【技術的な課題】
- **画像の安全な保存**：セキュアかつスケーラブルなストレージの実装。
### 【打ち手・使用した技術】
- AWS SDKを使用して、S3バケットに画像をアップロード。
- 画像のアップロードと取得のためのAPIエンドポイントを構築。
### 【成果】
- プロフィール画像のアップロードが安全かつ迅速に行えるようになり、ユーザーエクスペリエンスが向上。
## テスト戦略
### 【概要】
高品質なコードベースを維持するための包括的なテスト戦略の実施。
### 【課題・問題点】
リリース前にバグを発見し、品質を確保すること。
### 【技術的な課題】
- **テストカバレッジの確保**：ユニットテストからエンドツーエンドテストまでの包括的なテストの実施。
- **自動化テストの導入**：手動テストから自動化テストへの移行。
### 【打ち手・使用した技術】
- **ユニットテスト**：Rspecを使用して、個々のメソッドや機能の動作を検証。
- **インテグレーションテスト**：Rspecを使用して、複数のコンポーネントが正しく連携するかを検証。
- **エンドツーエンドテスト**：Cypressを使用して、ユーザーが操作するシナリオを再現し、全体の動作を検証。
### 【成果】
- テスト自動化により、デプロイ前にバグを発見・修正することができ、品質を向上。
- 継続的インテグレーションにより、開発プロセスが効率化され、リリースサイクルが短縮。
---
これらの取り組みにより、プロジェクトは予定通りにリリースされ、ユーザーから高い評価を得ることができました。特に、ユーザー体験の向上とパフォーマンスの最適化に成功した点が大きな成果といえます。