「AIの力でWebアプリ開発!?」生成AIでアプリ開発してみた。

✅ はじめに

きっかけは、友人たちと麻雀を打っていたとき。
点数を誰かが集計して、みんなに共有するのが大変だなと感じたのが始まりでした。
どうせなら、各卓のスコアをそれぞれで入力して、リアルタイムに結果を見たい。そう思って、WEBアプリという形が良いのでは?と考えました。

以前から「ググりながら簡単なことは試してみる」程度の知識はありましたが、最初の設定や作り方が分からず挫折することも多々ありました。
今回は、そういった「ググっても分からないこと」をすべて生成AIに質問しながら、ゼロからシステムを作ってみることにしました。
私なりの生成AIの使い方をまずは紹介します。


🧠 プロンプトにこだわらなくていい。むしろ雑でいい

生成AIを使って開発してみて感じたのは、
**「プログラムや技術を調べるために使う分には、プロンプトを深く考えすぎなくていい」**ということです。

ツールとして使うのであれば、まずは思ったことをそのまま聞いてみて、
70%ぐらい間違ってるつもりで返ってきた回答を確認して、修正させていった方が早いです。

もちろん、システム全体の構成を考えるときなどは、ちゃんと意図を伝えるためにプロンプトを工夫しましたが、
コーディングの場面ではとにかく動かして試す、直してもらう、の繰り返しで前に進めました。


🤖 ChatGPTだけじゃない。複数のAIを使い分けるスタイル

私は主にChatGPT(Plus)を使っていますが、問題がうまく解決しないときは他の生成AIも併用しています。

  • ChatGPT(Plus) をベースにやりとりし、ある程度の試行錯誤まで進めます。
  • それでもうまくいかない場合は、ChatGPTにプロンプト(質問文)を考えさせて、それを他のAIに投げます。
  • Claude は特に精度が高くて頼れるのですが、無料枠が少ないのがネック。ここぞという時にとっておいて使いました。
  • Perplexity(Pro)は、ネットで調べる精度は高いと思います。なので、同じような問題がある場合は、英文サイトも合わせて確認して回答してくれます。
  • Gemini、Copilot なども用途によって使い分けています。
    Copilotは私のプロンプトが行けないのか頼りにあまりならなかった。Geminiは2005年になってからは使えるようになってきた感じでした。

必要に応じて複数使う感じでした。ことで、回答の比較や補完ができて、結果的に解決が早くなることも多いです。

デザインやCSSの検討

Claudeは、ビジュアル(画像・図解)でUIイメージを提示してくれるので、完成イメージを掴むのにとても役立ちました。

デザインに関しては、複数の生成AIに同じプロンプトを一斉に投げて、出てきた提案を比較する、という使い方をしました。

それぞれのAIが異なる視点やUI構成を出してくれるので、どの案が実装しやすいか・CSSの難易度はどうかを比較検討しながら進めました。

💡 エラーは丸投げ

エラー表示が出た場合は、そのまま丸投げでOKでした。
特にサーバーサイドのflask用コードは、pythonのエラーが長いのと英文やコードなので、読むのが面倒なのでコピペで、エラーの原因は、ほぼ正確に把握することが可能でした。
ただし、モノによってはエラー出力と原因が違う場合があるので、注意が必要。
iphoneのsafariブラウザのセキュリティが高い問題は、原因を掴むのに時間がかかった。
また、エラーを丸投げすると問題の原因を推測して、解決策を提示してくるが、問題の原因が検討ハズレな場合が多々ある。
その時は、原因を究明してときちんと原因を特定してから解決策を考えさせないと時間がかかってしまいます。


📌 ChatGPTのプロジェクト機能

ChatGPTのプロジェクト機能は、結構使えると感じた。

開発するに当たり、チャットが200を超えているが、プロジェクト内の他のチャットを把握して回答してくれるので、便利でした。ただし、ファイル共有はコード作成の場合は刻々とコードが変わるので都度添付したほうが正確な情報を伝えられるので、今回はファイルのアップロードはしなかった。