Gemini Code AssistでフルスタックWebアプリ Part2: フロントエンド編
🚀 導入：AIと作るフルスタックWebアプリ
これは、GoogleのAIアシスタント「Gemini Code Assist (GCA)」を使い、フルスタックなWebアプリケーションをゼロから構築するチュートリアルのPart 2: フロントエンド編です。
Part 1で構築したバックエンドAPIを利用して、ユーザーがブラウザで操作できるToDoリストのWeb UIを構築します。HTML, CSS, そしてJavaScriptのコード生成をGCAに任せ、AIとの連携によるフロントエンド開発を体験します。
- 技術スタック: JavaScript (Fetch API), HTML, CSS
- Part 1はこちら: バックエンド編へのリンク
🎨 ステップ 5: フロントエンド（Web UI）の自動生成
5.1. UI実装の依頼
バックエンドが完成したため、APIを利用するユーザーインターフェースを生成します。
-
指示: GCAに、生成されたAPIを利用するHTMLとJavaScriptを生成させます。
【プロンプト】
@templates/index.html に、ポート5001で稼働しているapp.pyのAPIをJavaScriptのFetch APIで呼び出し、タスク一覧を表示・登録・完了・削除ができるWeb UIをHTML/CSS/JavaScriptで記述してください。- ポイント: ポート5001の使用を明記することで、AIが生成するJavaScriptのAPI URLが正しくなるように誘導します。
-
提案の確認と適用: GCAが、タスクを非同期（Fetch API）で処理するJavaScriptコードを含むHTMLファイルを生成することを確認し、「Accept」をクリックしてファイルを更新します。
✅ ステップ 6: アプリの実行と最終確認
6.1. サーバー起動
GCAに、Webサーバーを起動するためのコマンドを生成させます。
-
指示: GCAに、最終的な確認のためのコマンドを生成させます。
【プロンプト】
ブラウザでアクセスできるようになるコマンドを生成してください。 -
ユーザーによる実行: GCAが提示したコマンドをコピーし、ターミナルで手動で実行します。
6.2. ブラウザ確認
- ブラウザを開き、指定されたURL（例:
http://127.0.0.1:5001）にアクセスします。 - Web UIが正しく表示され、タスクの登録、完了、削除が機能し、リストに反映されることを確認します。
- サーバーを起動したターミナルに戻り、Ctrl + C を押してサーバープロセスを停止します。
【初期画面】
【タスクを登録した画面】
【タスクを完了にした画面】
【タスクを削除した画面】
最終的な注意事項（VS Code拡張機能の制限）
⚠️ 重要な制限事項：画像（視覚情報）のアップロードはできません
GCAのVS Code拡張機能は、Webブラウザ版のGeminiとは異なり、画像ファイルをコンテキストとして直接読み込み、分析する機能は提供されていません。
したがって、UIの表示崩れやグラフィカルなバグの修正を依頼する際は、**「テキストによる具体的な現象の説明」または「影響を受けているコードの特定」**を行う必要があります。
⚠️ 重要な注意事項
GCAはAIですが、万能ではありません。生成されたコードは必ずご自身で確認し、必要に応じてデバッグを行ってください。AIにすべてを丸投げするのではなく、あくまで開発のパートナーとして活用することが重要です。
Discussion