生成AIを使ってゼロからWebサービスをつくる

生成AIが何でも教えてくれる世界観がやってきた2025。
世間ではVibe Codingなる概念が誕生し、CodingとはAIがやるもの、という世界が近づいてきています。
でも本当に、全部AIがやってくれるのか？　実務でAIコーディングを使っている感覚ではだいぶ半信半疑なところもあり、検証もかねてWebサービスを作ってみました。

忙しい人のためのまとめ

React+FastAPIのWebサービスを企画～MVPのデプロイまで7日間で達成
勉強になったこと：React, Python（FastAPI, uvicorn）, APIとはなにか（HTTPリクエスト, REST, CORS）, デプロイとはなにか（Docker, GitHub連携によるCI/CD）
感想
- AIすごい。けど結局最後のツメは自分が頑張らないとだめっぽい。
- 生成AIと新技術学ぶのは楽しい。

前提条件

実行者はR, MATLAB, Pythonなどを日々利用しており、プログラミングには慣れている
実行者はWebサービス業界で働く知人がおり、Webサービスとはどんなものか聞きかじった知識がある
生成AIとしてはChatGPT 4oを利用した（ChatGPT＋課金勢）。
- 専用のプロジェクトを作成し、話題ごとにchatを作成。
- メモリを使って覚えていて欲しいことは記憶させつつ実行した。
実行者は多忙な業務の中で自分でWebサービスを公開して一攫千金を狙う夢追いたかった

一日目：企画と技術選定をする

とりあえずどんなものを作るか、自分が現状どんなスキル感で何を実現したいかを生成AIに伝え、何をやれば良いのかスケジュールとマイルストーンを作ってもらう。
作業時間が、平日の業務後と土日の夜のみということも伝え、なるべく簡潔に目標に到達できるステップを出してもらう。

スケジュールではまずアプリのアイデアだしと技術選定をする、となっていたのでそのまま作りたいアプリについて相談する。
今回は自分の学習がメインなので、完成まで興味が持てそうなもの、にしようと思う。
自分の興味・関心・趣味を伝えつつWebアプリにするアイデアを相談する。雑に会話してもなんとなくそれっぽいアイデアにまとめてくれるので、AIはえらいな、と思いながらボールを投げ続ける。
なんとなく作ってみたいものが決まったので、サービスの名前も考えてもらう。名前があると途端にプロダクトっぽくなるのでイイ。
アイデアだしをする中で、機能の優先順位を決めて、まずは小さめのMVPを作ってみるとよい、とChatGPTが言うのでMVP（実用最小限の製品　Minimum Viable Product）とは何かを教わる。

スケジュール案では次のステップは「Web技術の基礎を習得」になっていたが、作って学ぶほうが好きなので「先にMVPを作りたい」と持ち掛ける。あっさり了承されるので、そのままMVPの内容を決める。
シンプルに以下とした

ユーザー入力を受け付けるフォームがある
実行ボタンがある
実行ボタンを押すとバックエンドで処理が実施される
処理中はスピン画像がくるくるまわる
処理結果が表示される
実行ボタンが再実行の表示に変化する

とりあえずフロントエンドとバックエンド、という二つの概念を理解することが目標だな、という感じ。

MVPが決まったので、これを作るなら、という前提でそのまま技術選定に入る。
Pythonを書けるので、バックエンドはPythonでいこう、ということは早々に決まった。フレームワークとして何を使うか相談してDjango、FastAPI、Flaskの比較をしてもらう。今回はそこまで大規模な処理を作らない、という前提でFastAPIに決まる。

フロントエンドはReactというのが有名らしい、と知っていたので、とりあえずReactで良いか聞く。ほかのフレームワークも説明してもらったが、なんとなくやってみたい、という理由でReactに挑戦することにした。

続いて開発環境について相談する。
ローカル環境は実務に使うこともあり、こういう遊びで汚したくない。何かクラウドサービスで使えるものがないか聞くと、GitHubのcodespaceが良さそうだった。
Codespaces | GitHub
いつでもどこでもVS Codeが利用できるGitHub Codespaces

さっそくアカウントを作って使う。いつも使っているVS Codeとほぼ一緒なので使いやすい。

そのままReactとPythonの環境構築についても聞く。
そもそも同じリポジトリ、開発環境でフロントとバックを管理できるのか？分けたほうがいいのか？というところから質問。
モノレポ（Monorepo）という概念を教えてもらう。
モノレポって結局どうなの？という話 #フロントエンド - Qiita

そのままリポジトリのフォルダ構成についても教えてくれたので、言われるがままに下記の様に構成していく。

/app/
├─ frontend/ ← React（create-react-app）
└─ backend/ ← FastAPI（main.py, requirements.txt）

つづいて環境構築に入る。
Reactは生成AIが出してくる環境構築方法が微妙に古い手続きで上手くいかず、結局検索した結果と公式サイトを見てやる。
試しにPythonをuvで構築したいと言うと*1微妙に古い手続きを出してきたので、「こいつ、枯れてる知識以外は微妙だな」ということに気づく。
そのため以降、できるだけ最新の知見を反映するようにWebサーチをONにして「Web検索をして最新情報を参照しながら答えて」と指示するようになる。
しかしWeb検索結果がノイズに汚染されているとこの手法でもうまくいかず、ChatGPTがだしてきた「こうできますよ！」の記述をたよりに自分でWeb検索して正解を見つける、という手続きが必要になってくる。
手間のかかる子だなあ、という感じだが、こっちは検索する手がかりもない状態なので、ないよりは全然いい。
そして調べた結果について「これのこと？」と貼り付けて聞くとどや顔で「それです！」的なことを言うの、あほっぽくてかわいい奴だな、と思う。
この辺でこいつに長時間付き合うには愛嬌が必要だなと思い、キャラクター的な名称をつける。そうすることでやり取りが多少ダメでも許せるようになった。

一日目は環境構築を終えて終わり。

React環境構築

【React入門】忙しい人のためのReactチュートリアル【2025年更新版】 #TypeScript - Qiita
ゼロからの React アプリ構築 – React

cd frontend
nodeが入っているか確認　node -v
npmが入っているか確認　npm -v
viteを入れる　npm create vite@latest
- Project nameを入力し、React, TypeScript + SWC を選択
- プロジェクトのフォルダが出来上がる
npm install　を実行
npm run dev　を実行
- サンプルページが起動したらOK