1. はじめに
私は初めてQiitaの記事を書きます。
この記事は、プログラミングやWebアプリ開発をこれから始める人向けに、自分が実際にやったことを残した記録です。
ChatGPTのCodex（AIが実際にファイルを編集しながら開発を進められる機能）というものの存在を知りました。
せっかくなので、何か簡単なWebアプリを一つ作ってもらおうと思いました。
題材は、歩いた距離を記録するだけの、既にこの世にあるであろうとてもシンプルなWebアプリ。
これなら最後まで作れると思いました。
2. 開発環境
- OS：Windows 11
- エディタ：Visual Studio Code
- 使用AI：ChatGPT / Codex
- 言語：TypeScript
- フレームワーク：React
- ビルドツール：Vite
- パッケージ管理：pnpm
- 公開：GitHub / Vercel
※TypeScriptやReact、Vite、pnpm、Vercelについては、ほぼ知識0の状態でしたが、アプリ完成まで持っていけました。
3. Codexを使ってみての感想
良かった点
- 頼めばコードを書いてくれるため本当に速いし楽
- 本当に知識が0でも作れると感じた
悪かった点
- 無料利用枠が少ない（今回のような小規模なWebアプリで、1か月の無料利用枠を使い切ってしまった）
4. 作ったもの
ソースコードはGitHub、Web版はVercelで公開しています。
主な機能は次のとおりです。
- 距離入力
- 時間入力
- カロリー計算
- 月集計
- LocalStorage保存
など。
5. 進め方。
| 担当 | 役割 |
|---|---|
| 自分 | 仕様を考える・動作確認 |
| ChatGPT | 仕様整理・Codexへの指示文 |
| Codex | 実装・コミット |
基本的には次の流れを繰り返していました。
- ChatGPTに「こんなWebアプリを作りたい」と相談する
- 仕様が決まったら「Codexへの指示文を書いてください」とお願いする
- 指示文をそのままCodexへ貼り付ける
- 完成したものを自分で実際に動かして確認する
- バグや仕様違いがあれば、Codexの返答ごとChatGPTへ貼り付ける
- ChatGPTに修正内容を整理してもらい、新しい指示文を作ってもらう
- 再びCodexへ貼り付ける
これを完成するまで繰り返しました。
結果として、制作時間は約1日でした。
Codexから「○○をインストールします」「設定を変更します」と提案されることがあります。内容を確認したうえで実行することをおすすめします。
6. 公開
ここは私は全く知らない知識でしたので、すべてChatGPTに案内してもらいました。意外と簡単でした。
Node.jsのインストールやpnpmの設定、GitHubへのPushなど、初めてのことばかりでした。
ですが、GitHubへPushしたあと、Vercelへ連携するだけで公開は数分で完了しました。
7. やってみて思ったこと
Codexを使ってみて、思っていたより、AIに「全部任せる」という感じではありませんでした。
仕様を決めるのは人間です。
完成品を確認するのも人間です。
AIは実装スピードを何倍にもしてくれる存在だと感じました。
しかし、無料での実用は難しいかなと感じています。
無料でも十分試すことはできますが、本格的に開発を進めるなら有料プランの方が快適なのかなと感じました。
8. 最後に
今回作成したWebアプリ
も公開していますので、興味があれば見ていただけると嬉しいです。
今回作ったものは、
決してすごいアプリではありません。
ですが、
「最後まで完成させて公開する」
という目標は達成できました。
これまで途中で止まってしまったプロジェクトが多かった私にとって、
公開までやり切れたことは大きな経験でした。
もしこれからAIを使って何か作ってみたいと思っている人の参考になれば嬉しいです。
この記事も、ChatGPTに文章の添削を手伝ってもらいながら作成しました。AIを使った開発だけでなく、記事を書くところまでAIに助けてもらった形です。