【超初心者向け】Chat GPTを使って30分でWebアプリ作成

プログラミング超初心者のだいきです。
2024年5月から、Chat GPTを使用して、スマートフォン向けの簡単なWebアプリを作成中で、現在5か月目です。
ようやくデプロイまで到達したため、今までの手順や失敗点を記録として残していこうと思います。
現状多くの理解不足がありますが、やさしく訂正いただけたら幸いです。

1. この記事で伝えること。

Webアプリを作成しようとしている超初心者に対し、Chat GPTを使ってコード作成からローカル環境で動作できるアプリの作成までの流れを共有する。
（読むためにかかる時間：3分程度）

2. 作成中のWebアプリ「寿司ネタ 1000円ガチャ」

まず私が現在開発中の「寿司ネタ 1000円ガチャ」を見て、改善点を教えてください。
リンク：https://sushigacha.com/

3. 作成手順

(0) 準備 (20分)

以降の手順には、VS CodeとPythonのインストールが必要のため、Chat GPTに以下質問して教えてもらってください。

Pythonの場合も、同様に質問する。

(1) Chat GPTによるコードの作成 (3分)

寿司ガチャであれば、以下のように質問してガチャ機能を作成しました。

以下のようにコードとファイル構造について、回答が返ってきました。作成されたコードをVS codeなどのエディタにコピペすることで、コードを作成していきました。

Chat GPTの回答にファイル構造が記載されていない場合は、「どのようなファイル構造にすればいいですか。」のように質問してみると教えてくれます。

(2) ローカル環境でコードを動かす (7分)

VS Codeにコードを入力したら、ローカル環境で動作させます。
私の場合は、(1)のChat GPT回答で「app.pyを実行してFlaskサーバーを起動します。」といった記載されていました。しかし、この程度の回答ではわからないので、追加で質問します。

すると以下のように丁寧に教えてくれました。

ここで、「コマンドプロンプトにコマンドを入力しろ」と言われた場合、特定のPathに対して入力しなくていけない場合があるので、「どのPathに対して、コマンドを入力すればいいですか。」と追加で質問すると安全でした。

(3) webアプリの完成 (0分)

(1)(2)の結果、このアプリが完成しました。私の場合、コードの修正も1度も必要ありませんでした。Chat GPTがとても優秀でした。

あとはこれを微修正して、完成度を上げていくのみです。

4. エラーが出た場合

手順の中でミスを犯し、「templates」のフォルダを「templetes」と記載したため、エラーが出ました。
そこで、Chat GPTに質問し解決しました。このように、エラー画面をChat GPTに見せて質問することで、簡単に修正方法を教えてくれます。

5. まとめ

Chat GPTがとても優秀である結果、VS codeとPythonのインストールが完了していれば、コードの勉強をせずにアプリを10分で作成することができました。Chat GPTを使って作れる需要があるアプリはたくさんあると思います。初心者の同士たち一緒にがんばりましょう。よろしくお願いいたします。