Claude Codeで「まぁ使える」レベルのアプリを雑なプロンプトで生成してみた
どんなお話？
Github Copilotにはじまり、Cursolである程度アプリ作成になれてきた頃に、仕事で突然重めの新規開発話が降ってきた。
さすがにCursolだけでは太刀打ち出来なさそうなので、以前から勧められていたClaude Codeを導入、どのくらいできるのかを確認しつつ実際にアプリを作りきってみようというお話。
要求は青天井
世の中1つ難しそうなことができてしまいますと、できるもんなら他のモノもやりたくなるというのはどの世界でも同じかと思います。
弊社、幼児教育教室の運営事業をしている会社でして、使用している教材に短い間隔で複数のカードを見せる「フラッシュカード」というものがあります。
これをサブスク型の課金システムにすべくWeb化したいとのなかなかの無茶振りが飛んできました。
どうせなら知らない言語の習得もしたいよね
さすがにただ単に無茶振りに応えるだけであれば知ってる言語で手癖で書いていけばいいんですが、どうせ工数見てもらえてる場面なので、ついでにやったことない言語をまともに習得したいところ。
ので、今回はNext.jsを採用。
DBやオブジェクトストレージはCloudFlareを使用することにしました。
ClaudeCodeを実際に導入してみよう - Ubuntu編
ClaudeCodeの環境構築で、よくあるのはWindows＋VS Codeに組み込む形。
最近はGitとnode.jsを先にインストールしてある状況から
npm install -g @anthropic-ai/claude-code@latest
で使えるようになります。
テスト環境でたまたまUbuntuサーバが自由に使えるようにしてあったので、
Windows側のVS CodeからUbuntuサーバにSSH接続して、
# リポジトリ追加（Node.js 20.x）
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
# node.jsインストール
sudo apt install -y nodejs
# インストールできたか確認
node -v && npm -v
# npmでインストール
npm install -g @anthropic-ai/claude-code
# インストールできたか確認
claude --version
# インストールできてたら起動確認
claude
通常はVS Codeの右上あたりに
が登場するので、そちらから起動すればOK。
初期投入したプロンプト
初期投入したプロンプトは以下の通り
いわゆるフラッシュカードのWeb提示システムを作成したい。
フラッシュカードには表面・裏面があり、
数枚～数十枚をセットとしてタイトルを付け、カードセットとして用意する。
また、レッスンでの使用を考慮しレッスンセットも必要となる。
(一部省略)
レッスンセット-カードセットは1-nの関係となる。
生徒提示画面と先生提示画面の2つが必要となり、
生徒提示画面では表面を、先生提示画面では裏面をみせる。
先生提示画面では
どのカードセットを使用するかの選択、提示スピードの選択、任意カードのピックアップ表示の機能が必要。
（一部省略）
Next.jsでは管理のみを行うものとし、
画像・音源についてはcloudflare R2ストレージ、DBはcloudflare D1で作成するものとする。
概要仕様が上記のシステムを作成したい。
これだけでまあまあの枠組みだけを作ってきます。
後は決まらなかった仕様と細かいバグ調整の作業になります。
ClaudeCodeでのいい面
ClaudeCodeで作成すると
- 作成/修正されるコードがdiffで表示されるので、何をしているかが明確
- Cursolだと「どこに書きました」までしか見えてない
- 比較的作成が丁寧
- 直した場所が明確なので、AI側がやらかしてるときに気がつける
- 今回の案件に限ってはそこまでのやらかしもない。
- Copilot、Cursolはたまにとんでもない修正をすることがあった
という印象。
このソースが表示されるというのがよくて、知らない言語でも何をしているかがある程度読めるようになるから不思議。
それこそ今回制作中のフラッシュカードみたいなモノです。
実際のClaudeCodeだと「CLI環境なのでうまくいけば自動化までいける」利点もあるのですが、今のところそこまで余裕はないので、使い方としてCursolと大差ないのが悲しいところ。
それにしても、比較的きれいに作成してくるので安心してみてられるというのは大きいですね。
これやってる間に特急案件が来たので、ついでに検証
割り込みで軽めのPHP新規案件が来たので、実動時間を見てみました。
DBテーブル作成から管理画面・修正画面・表示画面の3点セットがおおよそ3時間程度で作成できたの、実用度が高すぎる……。
初回プロンプトは次の通り（元になるページが格納されているディレクトリを指してスタート）
これはオンラインセミナーをお知らせするページである。
現状は手入力、手動アップロードにて対応しているが、担当者が変更となり手動での対応が難しくなった。
管理画面を用意し、自動的に表示できるように変更したい。
各セミナーには
開催日（複数存在）
セミナータイトル
リンク（zoom用/peatix用/説明ページ）
セミナー画像
リンク画像
が存在する。
原則は開催日付の近い順に並べる必要がある。
が、意図的に表示順を優先させるセミナーがあることがある。
同じディレクトリ内にadmin/admin.phpを用意し、
固定のパスワードでログイン。
定義ファイルをインポートすることでDB接続ができ、
そのDBに新規テーブルを作成して良いという条件で
現状のindex.phpと同じように出力できるようにしたい。
（ヘッダ・フッタとCSSに注意が必要）
この状態から
元のindex.phpはどれか
DBの構成こうしましょう
が聞かれて
セミナー管理システムを作成しました。以下の3つのファイルです：
作成ファイル
campaign/admin/admin.php - 管理画面
固定パスワード: ********
セミナー一覧・削除・表示順変更機能
campaign/admin/edit.php - セミナー登録・編集画面
セミナー情報の登録・更新
画像アップロード機能（uploads/フォルダに保存）
campaign/seminar.php - セミナー表示ページ
既存のヘッダー・フッター・CSSを使用
表示順→開催日順でソート
機能
DBテーブルは初回アクセス時に自動作成
画像は /campaign/uploads/ に保存
表示順を小さい数字にすることで優先表示可能
非公開設定可能
パスワードを変更する場合は、admin.phpのADMIN_PASSWORD定数を編集してください。
で、おおよその機能は満たしていました。ここまでで1時間くらい。
ここからソート順とか、時間項目いるやん！とかやって、やっと3時間くらい。
やるやん。
Discussion