対話型AIを活用したフルスタックWeb開発の進め方 (初心者エンジニア向け)

対話型AIツールの基本と特徴

ChatGPT（OpenAI）やGoogle Geminiなどの対話型AIは、人間の言葉で質問や指示を与えるだけでコード作成や情報収集を支援してくれる。たとえばChatGPTに「○○なウェブアプリを作りたい」と相談すれば、必要なフレームワークや手順の提案、具体的なコード例まで返してくれます。GoogleのGeminiも同様にチャット形式でプログラミングの質問に答えたり、関連資料を探してくれるAI。個人的にはChatGPTの方がUIも好きで、良い感じに答えてくれるから好き。これらを上手に使うことで、初心者エンジニアでも効率的にフルスタック開発を進められる可能性がある。（最近はDeepReasearchがアツい）

対話型AI利用時の課題と対策

ハルシネーション（幻覚） AIは「もっともらしさ」で回答するので、間違うときがある。それをハルシネーションと呼ぶのだが、最近は複数の方法で予防することが可能。まずは、プロンプトに、**「間違っている場合はそれを指摘せよ」を入力すること。これはユーザーが間違っているかもしれないことをAIに学習させないためで、一定の効果が見込まれる。次に、AIが間違ったことを出力するのを防ぐ方法が、「情報源を示しながら」**と指定すること。 ChatGPTは優秀なWeb検索機能が備わっているので、すべての情報にソースがあれば自分で確かめに行くことだってできる。
最新の情報に対応していないこれは先ほどの情報源の話とも一部重複するが、ChatGPTというものは情報源を示すことは可能だが、そもそもそれが間違ってたらもちろん出力も間違っている。なので、例えば情報の更新が異常に早いAI分野などについてChatGPTに質問すると対応できていないことが多々見受けられる。他にもソースコードに非推奨のモジュールが入っていてエラーを吐くなんてことも少なくない。 だからソースコードをコピペするのではなくせめて内容理解はしておこうという話になる。 あとは最新の記事があるのなら、それをAIに参照させるなどしてユーザーの一定の努力でこの問題は解決できるだろう。
セキュリティリスク、プライバシーリスク、著作権これは良く叫ばれていることなので本記事では省略する（~~一番大事だけど~~）

対話型AIを用いたフルスタック開発の実践フロー

それでは、対話型AIを実際にフルスタックWeb開発で活用する具体的な流れを、ステップごとに解説します。

作りたいものを決定する (アイデア出し) まずは何を作りたいかを明確にしましょう。初心者エンジニアの場合、最初のアイデア出しからAIに頼ることもできます。ChatGPTなどに「〇〇のようなサービスを作りたい」「解決したい課題は△△なんだけど、どんなアプリが考えられる？」といった形で問いかけると、関連するアイデアや機能のブレストを手伝ってくれます。例えば「家計簿アプリを作りたい」と伝えれば、「収支入力機能、グラフ表示、レシート読み取り機能はどうか」といった提案を返してくれるでしょう。GeminiやBardも同様に、ユーザーの要件から発想を広げるのが得意です。「似たようなサービスの事例はある？」「最新のトレンドは？」と質問すれば、インターネット上の記事から情報を引っ張ってきて教えてくれます。競合サービスや参考になるアプリを調べてくれるので、アイデアの独自性や方向性を定める助けになります。また、すでに何を作るか決まっている場合でも、ChatGPTに「このアイデアで必要になりそうな機能リストを出して」と頼むと漏れがないかチェックできます。ここではなるべく要求を具体的に伝えることがコツです（対象ユーザーは誰か、どんな問題を解決したいか等）。AIは入力が具体的なほど的確な提案を返せるためです。
詳細を詰める (技術選定・要件整理) 作りたいものの輪郭が固まったら、次に技術的な詳細や要件を詰めます。どのプログラミング言語やフレームワークを使うべきか、機能の優先順位は何か、といった点です。ここでも対話型AIが頼りになります。例えばChatGPTに「リアクトとエクスプレスで〇〇を作るのと、Laravelで作るのはどちらが適していますか？」と尋ねると、それぞれのメリット・デメリットを比較してくれます。データベースも何を使うべきか比較検討ができるだろう。おすすめは何かのフレームワークにあてはめること。Next.jsやFastAPIとか最新の優秀なフレームワークは多数存在するので比較検討するといいでしょう。（最新の場合は先述の課題にもあるようにユーザーの努力が不可欠）この段階でアプリの要件定義も始めます。対話型AIに「ユーザーストーリー風に機能要件を列挙して」と依頼すれば、「ユーザーは〇〇できる」「管理者は△△できる」といったリストを作ってくれます。さらに「この要件を満たすために必要なページや画面、APIエンドポイントは何か？」と深掘りすれば、かなり具体的な設計のヒントが得られるでしょう。GeminiのDeep Research機能を使えば、類似サービスの仕様を調査して要件漏れチェックをすることもできます。例えば「他の家計簿アプリにはどんな機能がある？」と詳細リサーチさせ、その結果を自分の要件に反映させるといった使い方です。ただ、最後に決めるのは自分の頭です。
参考サイトや文献を探す要件が固まってきたら、実装の参考になるサイトや記事を集めます。これは情報の確実性を上げるのと同時に、自分の成長のためにすることです。 ChatGPTやGeminiに「〇〇のチュートリアルが載っているサイトは？」「類似プロジェクトのGitHubリポジトリを教えて」と尋ねると、ネット上のリソースを教えてくれることがあります。ChatGPTのDeep Researchなら「公式ドキュメントから詳細を調べてレポートして」といった高度な依頼も可能です。AI自身が複数のサイトをクロールし、必要な情報を要約して提示してくれるので、一つ一つ手動で検索する手間が省けるでしょう。

注意点: 先述した通り、AIが引用してくれたサイトが必ずしも正確とは限りませんし、記事の日時が古い可能性もあります。フレームワークの最新バージョンでは仕様が変わっていることもあるため、公式ドキュメントを改めて確認する習慣をつけましょう。また、AIが「〇〇というブログで詳しく解説されています【...】」と示してくれたら、そのURLに実際にアクセスして深く読むことで理解が深まります。AIの要約だけで満足せず、一次情報にも当たることがエンジニアとしての成長につながります。やっぱり理解できる力は必要です。身に着けよう。

要件定義書・設計書を作成する (知識の保存と整理) AIとの対話で得られた知見や決定事項は、必ずドキュメントにまとめておきましょう。 AIはプロジェクトを忘れたり、誤解をしている可能性があります。そのたびに修正するのは非常に煩わしいので、自分の記憶が新鮮なうちにドキュメントとして一つに要件をまとめてしまいましょう。これもAIの助けを借りることができます。「これまでの話を踏まえて要件定義書を書いて」と言えばいい。それに訂正を加えて完成版ver.0.0を作成しましょう。これがあればどこのどんなAIであってもある程度理解してくれます。都度修正を加えながら最新バージョンにしましょう。一度まとめた知識は、AIが忘れても再投入すれば復活させられます。
環境構築これが意外と一番躓きやすいポイントかもしれない。（私も何度苦戦させられたことか・・・）特にWindowsだと参照できる記事も多くないし最悪かもしれないが、WindowsにはWSL（Windows For Linux）というお助けアイテムがあるのでそれをまずは入れよう。それができたらLinux各種コマンドが使えるので、環境構築も圧倒的にしやすい。
各機能の実装とテスト・デバッグの繰り返し下準備が整ったら、いよいよ実装フェーズです。ここからはフロントエンド、バックエンド、データベースなどフルスタックの各層に対して、機能ごとにコードを書いていきます。対話型AIはまさにペアプログラマーとして活用できます。実装したい機能を一つ選び、ChatGPTに「〇〇という機能をこのフレームワークで実装したい。コードを書いて」と依頼すれば、骨組みとなるコードを生成してくれるでしょう。いきなり全コードを書いてもらうのではなく、逐一理解とテストを繰り返すことをお勧めします。デバッグコードを活用して少しずつ機能を増やしましょう。

開発サイクル: この実装～テスト～デバッグのサイクルを、小さい機能単位で繰り返していきます。理想はプログラムを小さく作っては動かし、問題があればすぐ修正することです。ChatGPTも小さな要求に分けて使うと効果的です。「まずフォームを表示する部分だけ書いて」→「次にフォーム入力をバリデーションするコードを追加して」と対話を細切れにすると、想定外の大きなコードを一度に生成して収拾がつかなくなるリスクを減らせます。実際にAIを用いた開発を経験したエンジニアからも、「基本をまず動かし、そこに機能を少しずつ肉付けする」という小刻みな進め方がAIとの相性も良いと報告されています。問題が起きた箇所はAIと対話しながら修正し、動いたら次へ、という風に進めるとスムーズです。

さいごに

以上が、私の半年の経験を基にしたAIの基本的な使い方である。ここまで読んで気づいた方も多いと思うが、この記事の半分くらいはChatGPTが作っている。私の思考フローと全体の構図と補足情報を与えて、ChatGPTDeepResearchで作らせた後、私が加筆修正している。

まあ、AIは実践的かどうかという議論はさておいて、自分の学習のためにはすごく役立つことは間違いないと思う。やっぱり未経験者にとってみたら「何をすればいいか全く分からない」という状況から「何か」を与えてくれるＡＩは神だし、何かを作ったという自信にもつながるし、全体のフローも掴める。全体のフローを掴んだ後、そこから体系的にゼロから学習するのも悪くないように思う（実際私はその立場）。 https://hamubasu.com このサイトもコード自体は最初ほとんどＡＩに書いてもらって、そこから自分でカスタマイズしていった。最初ＡＩに書いてもらったときは最新のネクストに対応してなくて適当なコード~~出してきやがった~~出してきたからそれの対応を結局自分で対応した。そういう対応ができるようになるためにも、基礎からの学習は必須であると思う。

新入生へ 私は１回生の夏頃から本格的にプログラミング始めた若輩者ですが、その分初学者の気持ちもよくわかると思います。なんでも質問してください。そしてハッカソンに一緒に行きましょう。