はじめに

皆さんこんにちは、FIXER4年目の藤野です。

今回はClaude Codeでの爆速開発 + Renderでの無料デプロイでメモアプリを作成してみましたので、せっかくなので記事にしようと思います。

Git Repository
Memo App（バックエンドの起動に時間がかかります。数十秒待って、その間に記事をお読みください。また、少しUIを改善しているのと、有志の方の手によってログイン機能が追加されています。アカウントを作りたくない人は、以下でサインインしてください。
Mail：legacy@example.com
Pass：123456
）

コード生成、人力で動作確認

Claude Codeで進めていきます。LLMモデルはClaude Code Opus 4.6を利用しています。（以降Claudeと呼びます）

今回生成に利用したプロンプトは以下です。

このフォルダに編集ツールを作成してください。フロント、バックエンドをローカルでビルドできるようにし、フロント、バックエンド、DBをドッカ―で立ち上げられるようにしてください。また、作成にかかった時間を計測してください。

生成結果として出力された内容は以下です。（本文と見分けがつくようにmdの内容をあえてプレーンテキストにしています。）

全て完了しました。

---

## 作成結果

**所要時間: 約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起動方法
```bash
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秒** (1772418786 → 1772419140)

### テスト結果サマリー

| # | テスト項目 | 結果 |
|---|---------|------|
| 1 | 初期表示（空の状態） | OK |
| 2 | メモの新規作成 | OK |
| 3 | メモの編集（タイトル変更） | OK |
| 4 | メモの削除 | OK |
| 5 | 複数メモの一覧表示（新しい順） | OK |
| 6 | 空タイトルでの保存防止 | OK |
| 7 | キャンセル機能 | OK |
| 8 | ページリロード後のデータ永続性 | OK |
| 9 | コンソールエラー | なし |

### 軽微な指摘事項

1. **空タイトル時のエラーメッセージなし** - 空のタイトルで保存すると画面に留まりますが、ユーザーへのフィードバック（バリデーションメッセージ）が表示されません
2. **編集画面からトップへの直接ナビゲーション不可** - Edit Memo画面にはヘッダーにアプリ名リンクがなく、一覧に戻るにはCancelボタンのみ
3. **削除時の確認ダイアログなし** - 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秒** (1772419466 → 1772419624)

| # | 修正内容 | 結果 |
|---|---------|------|
| 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にプッシュ

```bash
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にサインアップ
1. https://render.com にアクセス
2. 「Get Started for Free」→ GitHubアカウントで登録

### Step 2: PostgreSQL データベースを作成
1. Dashboard → **「New +」** → **「PostgreSQL」**
2. 設定:
   - **Name**: `memodb`
   - **Region**: Oregon（デフォルト）
   - **Plan**: **Free**
3. 「Create Database」をクリック
4. 作成後、**「Internal Database URL」** をコピーしておく

### Step 3: Backend をデプロイ
1. Dashboard → **「New +」** → **「Web Service」**
2. GitHubリポジトリ `MEMO_APPLICATION` を選択
3. 設定:
   - **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**
4. **Environment Variables** を追加:
   - `DATABASE_URL` = Step 2でコピーした Internal Database URL
5. 「Create Web Service」をクリック
6. デプロイ完了後、バックエンドのURL（例: `https://memo-backend.onrender.com`）をコピー

### Step 4: Frontend をデプロイ
1. Dashboard → **「New +」** → **「Static Site」**
2. GitHubリポジトリ `MEMO_APPLICATION` を選択
3. 設定:
   - **Name**: `memo-frontend`（任意）
   - **Root Directory**: `frontend`
   - **Build Command**: `npm install && npm run build`
   - **Publish Directory**: `dist`
4. **Environment Variables** を追加:
   - `VITE_API_URL` = Step 3のバックエンドURL（例: `https://memo-backend.onrender.com`）
5. 「Create Static Site」をクリック
6. デプロイ完了後、フロントエンドのURL（例: `https://memo-frontend.onrender.com`）をコピー

### Step 5: Backend の CORS を設定
1. Backend の Web Service のページに戻る
2. **「Environment」** タブを開く
3. 環境変数を追加:
   - `CORS_ORIGIN` = Step 4のフロントエンドURL（例: `https://memo-frontend.onrender.com`）
4. 保存すると自動的に再デプロイされる

### Step 6: 動作確認
- フロントエンドのURL（`https://memo-frontend.onrender.com`）にアクセス
- メモの作成・編集・削除ができれば成功

---

まずはStep 0のGitHubへのプッシュから始めましょうか？