🎬 映画レビューアプリ完成！3週間の開発記録とつまずきポイント

映画レビューアプリ、ついに完成！（7/12～8/3）

目的：React + Firebase を使ったフルスタック開発の習得、
転職活動用ポートフォリオ作成
最終的な実装機能：
- TMDB APIを使った映画情報取得・検索機能
- Firebase認証（ログイン・新規登録）
- レビューのCRUD操作（投稿・編集・削除、投稿者のみ編集可能）
- お気に入り機能（Firebase Firestore）
- ユーザーアバター（名前の頭文字から自動生成）
- レスポンシブデザイン（Tailwind CSS）
使用技術：
- React（Hooks、Context API、コンポーネント設計）
- React Router（SPA）
- Firebase（Authentication、Firestore）
- Tailwind CSS（途中からCSS-in-JSより移行）
- TMDB API

📅 開発の流れと主要なつまずきポイント

Phase 1: 基本機能実装（7/12-7/16）

やったこと：

TMDB API連携で映画一覧・検索機能
React Router でのページ遷移
コンポーネント設計（Header、MovieCard等）

つまずき：

APIキーの環境変数設定で最初躓いた
React Router の使い方（特にuseParamsの理解）

Phase 2: 認証・データベース（7/20-7/24）

やったこと：

Firebase Authentication の実装
Firestore でのレビュー保存
useContext でのグローバル状態管理

つまずき：

Firebase の設定ファイルで躓いて半日潰した...
Firestore のデータ構造設計（レビューをどう保存するか）
認証状態の管理（ページリロード時の状態保持）

Phase 3: UI改善・機能追加（7/26-8/3）

やったこと：

Tailwind CSS導入（全面書き換え）
レビューの編集・削除機能
レスポンシブデザイン対応

最大のつまずき：

Tailwind CSS導入時のエラー地獄

sh: 1: tailwind: not found

バージョン競合で丸一日ハマった。諦めかけた…
v4とv3が混在していて、v3で解決。

CSS-in-JS から Tailwind への全面書き換え
既存のスタイルを全て書き直すのが想像以上に大変だった。
でも結果的にコードがスッキリして良かった。

💡 開発中に学んだこと

技術面

Firebase の便利さ
認証もデータベースも、設定だけで使えるのは本当に楽
（楽だけど難しいという矛盾あり）
Tailwind の威力
レスポンシブがクラス名だけで済むのは革命的
全体の一体感が出て途中から導入して本当に良かった
コンポーネント設計の重要性
責任の分離を意識したら保守性が格段に向上
どのコンポーネントにどの責任を持たせるのかを考えるのは大変

開発プロセス面

小さく始めて徐々に機能追加
最初からフル機能を目指すと挫折する
まずは最小限の機能から。
やっていくうちに「あれもあるといいな」
「このスタイルの方が見やすそうだな」っていうのが出てくる
エラーログをしっかり読む
英語だからと避けがちだが、解決の鍵がほぼ書いてある
みんな通っている道だから、調べるとだいたい解決策はわかる
公式ドキュメントの重要性
公式が正確で詳細に書いてある（当たり前）

🔧 実装で工夫した点

権限管理

最初は予定していなかったけれど、ある方が便利だと思い実装

// 自分のレビューのみ編集・削除可能
const isMyReview = user && user.uid === review.userId;

ユーザーアバター

画像登録はできないけど、アイコンは欲しかった。
レビュー一覧に表示すると、文字だけより良くなった

// 名前の頭文字と文字コードで色を決定
const getBackgroundColor = (initial) => {
  const colors = ["bg-red-400", "bg-blue-400", ...];
  const colorIndex = initial.charCodeAt(0) % colors.length;
  return colors[colorIndex];
};

レスポンシブ対応

慣れるまで大変。慣れたら楽。
公式ドキュメントが良かったな。

// Mobile First で書くのがTailwind流
<div className="flex flex-col md:flex-row">

🎯 転職活動への活用

エージェントからのフィードバック：

「実務未経験者はポートフォリオの質より継続力が大事」
今回約3週間で完成まで持っていけたのは良いアピールポイント
技術選定（React + Firebase + Tailwind）も
現在の実務でよく使われる構成

面接で話せそうなポイント：

技術選定の理由（なぜこの技術を選んだか）
つまずいた時の解決方法（Tailwind導入エラーの対処など）
ユーザビリティへの配慮（レスポンシブ、権限管理等）

✨ 完成した感想

正直、途中で何度も「永遠に終わらないのでは...」と思いました…
今週は転職の面談がほぼ毎日あり、全然進まなかったし…

特にTailwind導入時のエラーで丸一日潰した時は
暑さと焦りから、本気で心が折れそうになりましたが、
最終的にはかなり満足のいくものが作れました。

YouTube等で見る「未経験転職にはこのくらいのポートフォリオを！」
という内容と比べるとまだまだレベルが低いのかもしれませんが、
コツコツと積み重ねていくしかないですね。
完成することが大事だと言い聞かせて…

転職活動も本格化しているので、このアプリをポートフォリオとして
頑張って内定を取りに行きたいと思います！

🚀 今後の予定

次のアプリ制作
家計簿アプリを検討中。週ごとの集計と予算管理、
期間指定での集計機能を作りたい（自分で使いたい）
転職活動の本格化
書類選考→面接

継続は力なり、ということで引き続き学習を続けていきます。