映画記録アプリ
概要
本アプリは、映画のレビューおよびウォッチリストをクラウド上で作成・管理できるWebアプリケーションです。
ユーザーが、他者の評価に影響されることなく、自身の直観的な感想を蓄積できるようにすることを目的としています。
デモ
利用上の注意
- テスト用アカウントでのみ利用可能です
- 初回アクセス時に時間がかかる場合があります（Render無料プラン）
テストアカウント
| メールアドレス | パスワード |
|---|---|
| test1@test.com | testtest |
| test2@test.com | testtest |
| test3@test.com | testtest |
スクリーンショット
レビュー一覧画面
レビュー詳細画面
レビュー編集画面
映画検索画面
ウォッチリスト画面
ウォッチリスト作成画面
機能一覧
認証機能
- アカウント登録・ログイン・ログアウトができる
レビュー機能
- 映画のレビューを作成できる（評価・感想・視聴日）
- 投稿したレビューの一覧を確認できる
- レビューの並べ替えができる（作成日・評価・タイトル順）
- レビューの詳細を確認できる
- レビューの編集・削除ができる
ウォッチリスト機能
- 観たい映画をウォッチリストに追加できる（優先度・メモ付き）
- ウォッチリストを一覧で確認できる
- 並べ替えによって優先度を整理できる
- 視聴済みの作品をチェックできる
- ウォッチリストから削除できる
使用技術・選定理由
フロントエンド
- React: UIをコンポーネント化し、再利用性・保守性を高めるため採用
- TypeScript: 型安全性を確保し、開発時のバグを減らすため採用
- Vite: 高速な開発環境を構築するためのビルドツールとして使用
- Tailwind CSS / shadcn/ui: 既存コンポーネントを利用し、UIを効率的に構築するために使用
バックエンド
- Spring Boot / Java: REST API設計を意識したバックエンド開発経験を得るため採用
- Gradle(Kotlin DSL): ビルドおよび依存関係管理に使用
主要ライブラリ
- Spring Web: REST APIの実装に使用
- Spring Security: 認証・認可の実装に使用
- Spring Data JPA: データベース操作の簡略化のため使用
データベース
- PostgreSQL: リレーショナルデータの管理およびTEXT型・JSON型の活用のため採用
インフラ
- Render: バックエンドのデプロイ先に使用
- Neon: データベースのホスティングに使用
- Vercel: フロントエンドのホスティングに使用
その他
- The Movie Database API: 映画情報の取得に使用
- Flyway: データベースマイグレーションツール
工夫した点
UXを意識した画面設計
本アプリの主要な機能であるレビューとウォッチリストについて、 それぞれでユーザーの利用目的が異なることを考慮して、画面設計を分離しました。
レビュー画面は「鑑賞後にゆっくり振り返ること」「レビューをじっくり読み返すこと」を目的としているため、 一覧・詳細・作成ページを分離し、映画の詳細情報と合わせて閲覧できる構成にすることで、 リッチなUXを意識した設計としました。
一方、ウォッチリストはその場で素早く追加・確認する用途が中心であるため、 一覧ページのみのシンプルな構造、画面遷移を伴わない編集ダイアログで構成することで、 利便性を意識したシンプルな設計としました。
これにより、「思考の深さ」と「操作の速さ」という異なるUX要件をそれぞれ叶える画面設計を実現しました。
キャッシュ設計
当初、映画の詳細情報は外部APIから取得したものを全てデータベースにキャッシュし、永続化していました。 しかし、全てのデータの永続キャッシュ化はデータベースの容量を圧迫するだけでなく、 外部APIを利用するメリット自体が失われると気づいたため、構成を変更しました。
高頻度で利用される基本情報（映画のタイトルなど）は永続化し、 利用頻度が低い詳細情報は7日間の期限を設けることで、 アクセスの高速化とデータベースの最適化の両方を実現しました。
また、期限を過ぎた情報の削除処理については、 デプロイ先がRender無料プランであることから使用していない間はサーバーがスリープ状態となるため、 削除処理の定期実行ができないという制約がありました。
そのため、ログイン処理が行われる際に一定確率で削除処理が実行されるように設計し、 本サービスの利用頻度を考慮した確率を設定しました。
開発環境の最適化
本アプリの開発においては、データベース設計やAPI設計をドキュメント化して管理し、 開発を体系的に進めることを最も意識しました。 設計を初期段階からドキュメントとして整理し、仕様変更時にも更新することで、 開発を効率的に進めました。
特にフロントエンド実装の際に、API設計を参照しながら取り組むことで開発がスムーズに進み、 ドキュメントの重要性を実感しました。
苦労した点
認証機能の実装
Spring Securityを用いて認証機能を実装しました。 当初はセッションベースの認証方式を採用し、Cookieを用いた状態管理を行っていましたが、 CORS設定やCookieの扱いに課題がありました。
特にブラウザのシークレットモード等の環境においてCookieが期待通りに送信されない状況が続いたため、 JWTベースの認証方式へ移行し、API通信をCookieに依存しない形に変更しました。
この経験を通して、バックエンドでの実装だけでなく、 HTTP通信・Cookie・ブラウザごとの制約を含めた認証処理の理解を深めることができました。
デプロイ
RenderやVercelを用いたクラウド環境へのデプロイを初めて行いました。 ローカル環境では問題なく動作していた機能が、 本番環境ではCookie設定などの違いにより動作しないケースを経験し、 デプロイにおいては環境毎の違いを把握する必要があると学びました。
また、データベースのホスティングでは、当初はSupabaseを使用する予定でしたが、 Renderとの接続要件の問題により構成を変更しました。 この経験から、技術選定においては機能だけでなく、 インフラやサービス間の制約も考慮する必要があると学びました。
Reactを用いたフロントエンド設計
Reactによるフロントエンド開発に初めて本格的に取り組みました。
フロントエンドはバックエンドに比べて実装の自由度が高い分、 コードの構造や責務の分割を適切に設計する難しさを感じました。
また、画面仕様の実現に伴いAPIの追加や変更が必要になる場面が多く、 設計段階で全てを予測して網羅することの難しさを実感しました。
今後はリファクタリングやツールの導入を通して、 より保守性の高いフロントエンド開発を行いたいと考えています。
今後の開発予定
機能追加予定
認証機能
- メールアドレス認証機能の追加
- パスワードリセット機能の実装
- アカウント削除機能の追加
- Google OAuth認証機能の導入
レビュー機能
- ユーザー定義可能なジャンルタグ機能の実装
- 評価を表現するレーダーチャート機能の追加
映画情報機能
- 映画詳細情報の拡張
- 監督・キャスト情報の表示
- 監督・キャストによる検索・ソート機能の追加
シェア機能
- レビュー内容を画像として生成し、エクスポートできる機能の実装
課金機能
- 決済処理にStripeを利用
改善予定
認証・セキュリティ
- 認証処理の安定化のため、セッションベース認証からJWT認証に変更
インフラ・データ管理
- データ永続性のため、データベースをRenderからNeonに変更
- キャッシュデータの肥大化防止のため、無期限保存からTTLによる管理に変更
バックエンド設計
- ログ出力の整備
- デバッグ・障害対応を目的とした標準出力ベースのログを実装
- レビュー情報取得時のデータ構造を見直し、DTO設計を整理・最適化
フロントエンド・UX
- 例外処理の整備
- 現在の簡易的なエラーハンドリングから脱却し、例外ベースの設計へ改善
- カスタム例外クラスの導入により、エラー種別ごとのハンドリングを明確化
- 非同期処理におけるエラーフローを整理し、予期しない挙動を防止
- コンポーネント構成や責務の見直しによる可読性・保守性の向上
- OpenAPIを利用してAPIレスポンスの型定義を自動生成することで、型安全性を高める
- エラーページの実装によるUX向上
導入予定技術
- Docker: 開発環境およびデプロイ環境の統一のため
- GitHub actions: /CDの仕組みを理解するために導入し、簡単な自動化から実装
- OpenAPI: API仕様を元に型定義を自動生成し、フロントエンドとの型の不整合を防ぐため