はじめに
皆さんこんにちは、藤野です。
今回はClaude Codeでの爆速開発 + Renderの無料デプロイでメモアプリを作成してみたのでご紹介します。
パブリックリポジトリにバックドアを仕込んでClaude Codeを検証する](https://qiita.com/NF0000/items/66510f959b1c22f011a7)、という記事を見かけました。このリポジトリは安全ですが、Cloneする際は気を付ける習慣を作ると良さそうです。
コード生成、人力で動作確認
Claude Codeで進めていきます。LLMモデルはClaude Code Opus 4.6を利用しています。（以降Claudeと呼びます）
今回生成に利用したプロンプトは以下です。
このフォルダに編集ツールを作成してください。フロント、バックエンドをローカルでビルドできるようにし、フロント、バックエンド、DBをドッカ―で立ち上げられるようにしてください。また、作成にかかった時間を計測してください。
生成結果として出力された内容は以下です。
全て完了しました。
作成結果
所要時間: 約5分37秒
構成
MemoApplication/
├── docker-compose.yml
├── .gitignore
├── README.md
├── backend/
│ ├── package.json
│ ├── tsconfig.json
│ ├── Dockerfile
│ ├── .dockerignore
│ ├── .env
│ ├── prisma/
│ │ ├── schema.prisma
│ │ └── migrations/
│ └── src/
│ └── index.ts
└── frontend/
├── package.json
├── tsconfig.json
├── vite.config.ts
├── Dockerfile
├── nginx.conf
├── .dockerignore
├── index.html
└── src/
├── main.tsx
├── App.tsx
├── api.ts
├── index.css
└── vite-env.d.ts
技術スタック
| レイヤー | 技術 |
|---|---|
| Frontend | React 18 + TypeScript + Vite |
| Backend | Express + TypeScript + Prisma ORM |
| Database | PostgreSQL 16 |
| Container | Docker Compose |
ローカルビルド
-
Backend:
cd backend && npm install && npx prisma generate && npm run build-- 成功 -
Frontend:
cd frontend && npm install && npm run build-- 成功
Docker起動方法
docker compose up --build
- Frontend:
http://localhost:8080 - Backend API:
http://localhost:3001/api/memos - DB:
localhost:5432
機能
- メモの一覧表示
- メモの新規作成
- メモの編集
- メモの削除
- 更新日時でソート
人力で動作確認してみてもいい感じでした。
テスト、修正
テストもClaudeにやらせます。Claude for DesktopにてURLを貼れば、Claudeがブラウザ画面を開いて動作確認してくれます。
テストを依頼したプロンプトは以下です。
http://localhost:5173/ の動作確認を行ってください。テストに要した時間も計測しておいてください。
結果として出力されたものは以下です。
動作確認結果レポート
テスト所要時間: 約5分54秒
テスト結果サマリー
| # | テスト項目 | 結果 |
|---|---|---|
| 1 | 初期表示（空の状態） | OK |
| 2 | メモの新規作成 | OK |
| 3 | メモの編集（タイトル変更） | OK |
| 4 | メモの削除 | OK |
| 5 | 複数メモの一覧表示（新しい順） | OK |
| 6 | 空タイトルでの保存防止 | OK |
| 7 | キャンセル機能 | OK |
| 8 | ページリロード後のデータ永続性 | OK |
| 9 | コンソールエラー | なし |
軽微な指摘事項
- 空タイトル時のエラーメッセージなし - 空のタイトルで保存すると画面に留まりますが、ユーザーへのフィードバック（バリデーションメッセージ）が表示されません
- 編集画面からトップへの直接ナビゲーション不可 - Edit Memo画面にはヘッダーにアプリ名リンクがなく、一覧に戻るにはCancelボタンのみ
- 削除時の確認ダイアログなし - Deleteボタンを押すと即座に削除されます。誤操作防止のための確認があると望ましいです
もちろん修正もClaudeにやらせます。（修正に必要な時間を計測し忘れましたが、恐らく1~2分だったかと思います。）
プロンプトは以下です。
では、指摘事項の修正を行ってください。フロント、バックはこのリポジトリにあり、現在ドッカ―で起動していますので、修正が終わったら再起動するので教えてください。
結果として出力されたものは以下です。
修正が完了しました。以下の3点を修正しています。
修正内容
| # | 指摘事項 | 修正内容 | 対象ファイル |
|---|---|---|---|
| 1 | 空タイトル時のエラーメッセージなし | 赤背景のバリデーションメッセージ「Title is required.」を表示 |
App.tsx, index.css
|
| 2 | 編集画面からトップへの直接ナビゲーション不可 | ヘッダーを「Memo App / Edit Memo」のパンくず形式にし、「Memo App」クリックで一覧に戻れるように |
App.tsx, index.css
|
| 3 | 削除時の確認ダイアログなし |
window.confirm("Are you sure you want to delete this memo?") で確認を表示 |
App.tsx |
Dockerを再起動して確認できる状態です。再起動をお願いします。
また、修正した内容を確認させた結果は以下です。
修正確認テスト結果
再テスト所要時間: 約2分38秒
| # | 修正内容 | 結果 |
|---|---|---|
| 1 | 空タイトル時に「Title is required.」メッセージ表示 | OK |
| 2 | ヘッダーに「Memo App / New Memo」パンくず表示、クリックで一覧に戻る | OK |
| 3 | 削除時に window.confirm の確認ダイアログ表示 |
OK |
| - | コンソールエラー | なし |
3件の修正すべて正常に動作しています。
デプロイ
結論から言うと、採用したのはRenderでした。
このツールのすごいところは、バックエンドとデータベースを無料でデプロイできるところでした。しかもトライアルや期間限定ではなく、永続無料でした。
ただし、Freeプランにおいてはスピンダウン（一定時間アクセスがないとスリープ）する仕様になっており、起動に数十秒を要する、という制約があります。
それでも無料でフロント、バック、DBを構築できるのは素晴らしかったです。
Render構築を依頼した時のプロンプトを以下に示します。
Renderで進めたいです。作成手順を教えてください
出力された手順は以下です。
コード変更が完了しました。変更をGitHubにプッシュした後、Renderでデプロイします。
コード変更の内容
-
frontend/src/api.ts— 環境変数VITE_API_URLでAPIのURLを切り替え可能に -
backend/src/index.ts— 環境変数CORS_ORIGINでCORSの許可オリジンを設定可能に
デプロイ手順
Step 0: 変更をGitHubにプッシュ
cd /c/MemoApplication
git add frontend/src/api.ts backend/src/index.ts
git commit -m "Add environment variables for Render deployment"
git push
Step 1: Renderにサインアップ
- https://render.com にアクセス
- 「Get Started for Free」→ GitHubアカウントで登録
Step 2: PostgreSQL データベースを作成
- Dashboard → 「New +」 → 「PostgreSQL」
- 設定:
-
Name:
memodb - Region: Oregon（デフォルト）
- Plan: Free
-
Name:
- 「Create Database」をクリック
- 作成後、「Internal Database URL」 をコピーしておく
Step 3: Backend をデプロイ
- Dashboard → 「New +」 → 「Web Service」
- GitHubリポジトリ
MEMO_APPLICATIONを選択 - 設定:
-
Name:
memo-backend（任意） - Region: Oregon（DBと同じ）
-
Root Directory:
backend - Runtime: Node
-
Build Command:
npm install && npx prisma generate && npm run build -
Start Command:
npx prisma migrate deploy && npm start - Plan: Free
-
Name:
-
Environment Variables を追加:
-
DATABASE_URL= Step 2でコピーした Internal Database URL
-
- 「Create Web Service」をクリック
- デプロイ完了後、バックエンドのURL（例:
https://memo-backend.onrender.com）をコピー
Step 4: Frontend をデプロイ
- Dashboard → 「New +」 → 「Static Site」
- GitHubリポジトリ
MEMO_APPLICATIONを選択 - 設定:
-
Name:
memo-frontend（任意） -
Root Directory:
frontend -
Build Command:
npm install && npm run build -
Publish Directory:
dist
-
Name:
-
Environment Variables を追加:
-
VITE_API_URL= Step 3のバックエンドURL（例:https://memo-backend.onrender.com）
-
- 「Create Static Site」をクリック
- デプロイ完了後、フロントエンドのURL（例:
https://memo-frontend.onrender.com）をコピー
Step 5: Backend の CORS を設定
- Backend の Web Service のページに戻る
- 「Environment」 タブを開く
- 環境変数を追加:
-
CORS_ORIGIN= Step 4のフロントエンドURL（例:https://memo-frontend.onrender.com）
-
- 保存すると自動的に再デプロイされる
Step 6: 動作確認
- フロントエンドのURL（
https://memo-frontend.onrender.com）にアクセス - メモの作成・編集・削除ができれば成功
そのままClaudeに作業を依頼してもよかったのですが、現状画面で一つの操作に5秒くらいかかり、UIのポチポチは自分で進めた方がまだ早いと思ったので、手動で行いました。
もっとも、最近はAIが出力されるUIが古く、その場で表示されているUIが異なり、ある程度こちらで補完しなければならない、みたいなことは少なくなってきたので、そこも任せてしまってもよかったかもしれません。
これにて無料で永続使える編集ツールが、無事デプロイできたのでした。（生成自体は5分でしたが、諸々の手順を踏む場合は30分くらいかかるかと思います。）
さいごに
今回はデプロイ部分を手動で行いましたが、これも少し未来ではすべて自動になっていてもおかしくありません。
作業する手が早くなるにつれて、Renderのようなデプロイサーバーの需要はどんどん高まっていくんだろうな、と感じました。
AGI、シンギュラリティに戦慄しつつ、立ち振る舞いを模索する藤野でした。
※文書作成で参考にさせていただいたもの