開発初心者の大学生がClaude CodeでRPGアプリを作ってデプロイまでした話

皆さんこんにちは、はちまるです。

今回は、開発初心者の私が、Claude CodeというAIツールを使ってWEBアプリを作り、実際にインターネット上に公開(デプロイ)するところまでやってみた話をしていきたいと思います。

アプリを作ろうと思ったきっかけ

ブログ更新や資格勉強など、何か頑張りたいことがあるときに、その成果を可視化できたら続けやすいのに、とずっと思っていました。

私自身RPGが好きなので、頑張ったことをRPGのように形にできれば、楽しく作業を続けられるのではないかと思いつきました。そこで、作業した時間やToDoの消化量に応じてRPGが進められるアプリを、Claude Codeを使って作ってみることにしました。

約4時間半で作った「こつこつクエスト」

今回作ったアプリの名前は「こつこつクエスト」です。作業した時間で敵を倒していく、RPG風の生産性アプリです。

主な機能は次の通りです。

• 作業時間を記録できるタイマー(25分作業・5分休憩のポモドーロ設定も選べます)
• こなすとジュエルがもらえるToDoリスト
• ジュエルを使って武器や防具を手に入れられるガチャ
• 作業した時間に応じて敵と戦える戦闘システム
• 剣士や魔法使いなどの職業と、条件を満たすと変更できる転職システム
• 手に入れた武器・防具を付け替えられる装備スロット

これだけの機能を、アイデアを練るところから含めて合計4時間半で形にすることができました。

最初の指示はこんな一文からだった

最初にClaude Codeに伝えたのは、「テーマ：集中して作業をした時間で進めることができるRPGゲーム」という一文と、欲しい機能を箇条書きにしたものだけでした。難しい専門用語は一切使っていません。

そこからClaude Codeがいくつか質問を返してくれて、それに一つずつ答えていくことで、仕様がどんどん具体的になっていきました。

実装の流れ：雛形からデプロイまで

実装は、次のような順番で、一つずつ動くものを増やしながら進めました。

1. アプリの雛形作成
2. 作業時間を計測するタイマー機能
3. ToDoリスト機能
4. ログインとデータ保存の仕組み(Firebaseというサービスを利用)
5. ガチャ機能
6. 戦闘システム
7. 見た目(UI/UX)の作り込み
8. 職業・転職システム
9. 装備スロット

ReactやFirebaseについても詳しくない私ですが、その都度Claude Codeが何をするための技術なのか説明してくれたので、置いてきぼりになることなく進めることができました。

開発中は細かいバグも発生しましたが、そのたびにClaude Codeが原因を説明した上で直してくれたので、「これはさすがに無理かも」と行き詰まる場面は一度もありませんでした。

デプロイできた瞬間、そしてその後

実際に公開できたアプリはこちらです。こつこつクエスト

機能が一通り完成し、Firebase Hostingという仕組みを使って、実際にインターネット上で誰でもアクセスできるURLとしてアプリを公開できたときは、「本当にデプロイできた」という、とても素直な喜びがありました。

ただ、実際に使ってみると、開発中には気づかなかった細かい改善点が見えてきたので、今はそれを一つずつ直している最中です。「作って終わり」ではなく、「使いながら育てていく」段階に入ったと感じています。

まとめ

今回は、開発初心者の私が、Claude Codeを使ってRPG風のアプリを作り、デプロイするところまでの体験をお話ししました。

自分の言葉で伝えるだけでここまで形にできるということが、実際にやってみてよくわかりました。

この記事が、Claude Codeに興味はあるけれど最初の一歩を踏み出せていない皆さんの、背中を押すきっかけになれば嬉しいです。皆さんの「作ってみたい」が形になるように応援しています。

はちまる

学ぶ人を応援する大学生

現役大学生。自分の興味のある分野を学ぶのは楽しいことに気づき、学ぶ人を応援したいとブログを開設。
IT系、語学系を中心に自分の学びや現在頑張っていることについて発信しています！