【Day1】開発環境を考える

はじめに

勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。

個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。

今回は開発言語とツールを考えていこうと思います。

↓ これまでの内容
【Day 0】アプリが完成するまで毎日投稿

アプリ要件

進捗管理もかねて、毎回アプリ要件を載せます。

• 主な機能
  • 【未】アップロードされた画像に自動でInstagramのサムネイルサイズに合わせたフレームを作成する
    • フレームは白色
    • フレームにはカメラのExif情報（カメラの機種、レンズ、F値、ISO、シャッタースピード）を記載する
  • 【未】キャプションを自動生成する
    • カメラのExif情報（カメラの機種、レンズ、F値、ISO、シャッタースピード）を記載して、機種とレンズについてはハッシュタグも記載する

開発環境

言語

まずは開発言語ですが、フロントは勉強中のReactを使おうと思っています。
バックエンドは画像編集しやすいPythonがいいのかな～と思いつつ、ほかの選択肢を知らないのでChat GPTに相談してみます。

質問

フロントエンドはReactにしようと思ていますが、バックエンドは何が良いと思いますか？PythonのFlackなら使ったことありますが、ほかの選択肢も知りたいです。

回答

React（またはNext.js）をフロントに採用する場合、バックエンドとしてPython（Flask）を含め、いくつか選択肢があります。それぞれの特徴とあなたの要件（画像アップロード、EXIF抽出、画像生成、キャプション生成）との相性を整理しておすすめします。

✅ あなたの要件に合うバックエンドの選択肢
| バックエンド       | 言語             | 特徴                               | 向いている点                                         | 評価                       |
|--------------------|------------------|------------------------------------|------------------------------------------------------|----------------------------|
| Flask              | Python           | 軽量・学習コスト低                 | EXIF抽出、画像処理に強い                             | ✅ 手慣れてるなら有力候補 |
| FastAPI            | Python           | 高速・型安全・Swagger自動生成     | Flaskより構造化、非同期対応                          | ✅ Flask経験者におすすめ |
| Express.js         | JavaScript/Node  | Reactと親和性高い                  | 画像処理・EXIF抽出も可能（sharp, exifr）             | ◯ 統一言語にしたいなら   |
| Next.js API Routes | JavaScript/TS    | Reactと同一プロジェクトで完結可能 | 小規模APIならバックエンド不要、デプロイも簡単        | ◯ 小さく始めたい人向け   |
| Django             | Python           | 大規模向き、管理画面が強力        | データベースやユーザー管理が必要な場合               | △ 少し重たい構成         |


🔧 機能ごとの対応力
| 機能                     | Flask | FastAPI | Express.js | Next.js API | Django |
|--------------------------|:-----:|:-------:|:----------:|:------------:|:------:|
| 画像アップロード         | ✅    | ✅      | ✅         | ◯            | ✅     |
| EXIF抽出（機種、レンズ） | ✅    | ✅      | ◯          | ◯            | ✅     |
| フレーム付き画像生成     | ✅    | ✅      | ◯          | ◯            | ✅     |
| キャプション自動生成     | ✅    | ✅      | ✅         | ✅           | ✅     |
| ハッシュタグ付与         | ✅    | ✅      | ✅         | ✅           | ✅     |


🏆 結論（おすすめ順）
🔹 1位：FastAPI（Python）
Flaskに似た書き心地で、近代的。

開発スピードも早く、OpenAPI (Swagger UI) が自動で使える。

PillowやExifToolとの連携も楽。

非同期処理も可能（高性能）。

→ Flask経験者がステップアップするならベスト。

🔹 2位：Flask（Python）
すでに使ったことがあるなら安心感あり。

機能的にはすべて満たせる。

学習コストゼロで始めたいならこれでも全然OK。

🔹 3位：Next.js API Routes（JavaScript）
バックエンド分離せず、1リポジトリで完結できる。

画像処理もNode.jsで可能（sharp使用）。

簡単なプロジェクトや、デプロイの楽さ重視なら選択肢に。

🔹 補足：Django や Express.js は要件によって使う
Djangoは大規模サイト向き。今回のような「軽量ツール系」には少しオーバースペック。

Express.jsはJavaScript統一という意味ではアリ。ただし画像系はPythonの方が豊富。

💡 ワンポイント
デプロイを考えると「Next.js + FastAPI」または「Next.js + Flask」は、フロントとバックをAPI連携する構成として非常に現実的です。

Vercel（フロント）＋RenderやRailway（バックエンド）でのホスティングが簡単です。

回答を踏まえて

PythonだとFastAPIというものが良いみたいですね。

Reactと同じ言語のExpressやNext.jsも触ってみたいですが、要件を全部達成するには不十分みたいなので、今回はFastAPIを使ってみます！

開発ツール

開発ツールは慣れているVS Codeを使おうと思います。
また開発はDockerコンテナ内で実施しようと思っています。

ただ、フロントとバックでコンテナを分けるべきか、そもそもリポジトリを分けるべきかがあんまりわかっていないので、Chat GPTに聞いてみます。

質問

今回はフロントエンドをReactで、バックエンドをFastAPIで作ってみます。

Dockerコンテナ内で開発しようと思っていますが、コンテナやリポジトリは分離した方がいいですか？

回答

🔧 結論：リポジトリは「分離しない」でOK（単一リポジトリ推奨）
開発初期や個人・小規模プロジェクトでは、フロントとバックを1つのリポジトリにまとめる方が管理が楽です。

Dockerコンテナは それぞれ分ける（＝マルチコンテナ構成にする） ことで、役割ごとの責務を分離しつつ、連携も容易です。

📁 おすすめの構成（単一リポジトリ）
project-root/
│
├── frontend/               # Reactアプリ
│   ├── src/
│   └── Dockerfile
│
├── backend/                # FastAPIアプリ
│   ├── app/
│   └── Dockerfile
│
├── docker-compose.yml      # フロント・バックまとめて起動
└── README.md

🐳 docker-compose 構成イメージ
version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/app
この構成であれば docker-compose up で両方の開発サーバが一括で起動可能です。

🔄 フロントとバックの接続方法（開発中）
React側（frontend/）の .env.development などに以下のようにAPI URLを設定：

env
REACT_APP_API_BASE_URL=http://localhost:8000
axiosなどで process.env.REACT_APP_API_BASE_URL + "/your-endpoint" を使えば、環境切り替えもスムーズ。

✅ 単一リポジトリ + マルチコンテナのメリット
| 項目             | 内容                                                                 |
|------------------|----------------------------------------------------------------------|
| 🔧 開発のしやすさ | 同時に編集・デバッグしやすく、エディタ（例：VS Code）で全体を一括管理できる |
| 🛠 CI/CD連携       | 1リポジトリでGitHub ActionsやVercel、Renderなどのサービス連携が簡単       |
| 📦 モノリポ利点    | PRレビュー、Issue管理、コードベースの把握が一元化できる                    |
| 🧪 テストしやすい  | フロント↔バックエンド間の統合テストがやりやすい                           |


🔄 分離を検討すべきケース
| 分離が有利になる場合           | 理由                                            |
|------------------------------|-------------------------------------------------|
| チーム開発で担当が完全に別       | 役割分担が明確になり、リポジトリ運用も分かりやすくなる |
| 大規模開発やマイクロサービス化   | サービスごとに独立運用・スケーリングできる           |
| 別のCI/CDやデプロイ環境が必要な場合 | バックとフロントで異なるホスティング戦略を取りたい場合 |


✅ 結論（再掲）
Dockerは「マルチコンテナ」構成に、リポジトリは「単一」にするのが、今回のケースでは最も扱いやすく、おすすめです。

回答を踏まえて

今回はChat GPTに教えてもらった単一リポジトリ＆マルチコンテナの構成でやってみます！

フロントはReactで、バックエンドはFast APIで構築することにしました。

おわりに

今回は開発環境を考えるだけになってしまいました。なかなか歩みが遅くてもどかしいですが、少しずつ自分のペースで進めていきたいと思います。

次回に開発環境を実際に構築していきます！