生成AI利用プログラミング

AIと対話する（言葉で指示する）だけで、webアプリが構築できるお手軽な方法をいくつか紹介します。どの方法も、初めての人でも10分程度で動くものが作れて公開もできます。その後、対話を続けて順次改良することもできます。ただし、お手軽な分、作れるものにいろいろ制約があります。作りたいものによっては（たとえば、ユーザ間でデータを共有するアプリを作ろうとすると）、AIがうまくデバッグできず、延々とエラーが続くことがあります。

その１：ClaudeアーティファクトによるAIアプリ構築（初学者向けお手軽）2025/10/20

その２：AIアプリ構築メンター（初学者向けお手軽）←GeminiのCanvasで作ります 2025/10/20

（参考）GeminiのCanvas上で作る際の制約（実現できない機能）

その３：Google AI Studioでのバイブコーディング

その４：Firebase Studioでのバイブコーディング　←ユーザ間でデータを共有するアプリ向き？

その５：Gem ← 対話だけでGeminiのカスタマイズができる（webアプリの構築と見なせる）

２．より本格的なものを作る方法

ClaudeアーティファクトやGeminiのCanvasでは制約があって実現できないアプリを構築する方法の一例です。2つ目の項目(tips)も併せて参照して下さい。

生成AIをAPIから利用するWebアプリの構築（本格的）2025/8/23

最近更新されたライブラリを使うコーディングを生成AI支援で行うためのtips（こつ）：Gemini API ライブラリを例に 2025/10/16

３．ユーザ間でデータを共有するアプリの作り方

方法その1

Firebase Studioでのバイブコーディング

方法その2

Gemini CanvasでバックエンドとしてFirebase（の中のFirestore）を使用 →解説ページ；制作したアプリの例：リアルタイム共有メモ

方法その3

Claudeアーティファクトでwindow.storageを使用（基本はテキスト情報の共有だが、容量制限内に収まる小さい画像ならテキストにエンコードして共有可能；注意点：アーティファクトのプレビュー画面は、アプリの共有URLと異なるURLなので、プレビュー画面ではデータ共有はできません。共有URLを複数のデバイス等で開いて共有を確認して下さい。）→解説ページ；制作したアプリの例：みんなの写真シェア

方法その4

Hugging Face Spaces上のGradioアプリのグローバル変数を用いた簡易的な共有（アプリの再起動時にデータがリセットされてしまう）→解説ページ；アプリの例：オープンキャンパス感想分析SNS

４．バイブコーディングでAIアプリを作るときに心がけて欲しいこと

どのようなAIをどのように使って所要の機能（対話、画像理解など）を実現しているかを、コーディング支援AIに尋ねて理解しよう；ざっくりした説明をしてきたときは、具体的で詳細な説明を再度依頼しよう
- 基本構成の説明の例：Gemini 3 Proに、次のシステム指示を与えて、〇〇に対して〇〇を生成；システム指示：「〇〇〇〇〇・・・〇〇」
アプリ全体の構成や各機能の実現方法についても、コーディング支援AIに尋ねて理解しておこう
- 全体構成の例：まず生成AIにシフト案を作成させ、AIが生成した案が制約条件を完全に満たしているかをチェックするプログラムを別途作成
コーディング支援AIへの質問のしかたの例：

このアプリはどのような仕組みで動いていますか。技術的な詳細を、非エンジニアにも分かるように説明してください。

- 全体の処理の流れ
- 使っている技術や考え方
- 重要な設計上の判断
生成AIのモデルや入力（システムインストラクションやプロンプト）を変えると、出力がどう変わるか、精度がどう変わるかを調べる実験をして、改良しよう（このためにどうしたらよいかも、コーディング支援AIと相談することができます）
生成AIへの指示の詳細や、全体構成が把握できたら、それぞれの指示や構成要素がどのように結果の精度に効いているかを明らかにしよう（「アブレーション・スタディ」をしたいとコーディング支援AIに相談するとやり方を教えてくれる）