映画レビューアプリ完成してみた…！！3週間の記録とつまずき

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

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

🚀 今後の予定

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

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