AIツールを組み合わせたWebアプリケーション開発

AIツールを活用し、基本的にコード編集なしでWebアプリケーションを制作・動作確認する手順（インターネット公開を行う場合は、設定ファイルの編集を一部含む）

【学習内容の構成】

1. アイデアの言語化：チャットAIで曖昧なアイデアを「アプリ設計書」と「改善のコツ」に変換
2. アプリケーション生成：Google AI Studioで自然言語からWebアプリケーションを生成
3. 動作確認と修正：プレビュー画面での操作確認、チャット欄への修正指示による改善

• 前提：Googleアカウント、GitHubアカウント（公開時のみ）、Webブラウザの基本操作（URLの入力、コピー＆ペースト、テキスト入力）
• 意義：プログラミング未経験者がWebアプリケーションを制作する体験を得る

開発手順（オプションを含む全体）：

1. チャットAIでアイデアを機能仕様に変換
2. Stitchで画面デザインを生成（オプション）
3. Google AI Studioでアプリケーションを生成
4. プレビュー画面で動作確認
5. GitHub Pagesで公開（オプション）

スライド資料: [PDF], [パワーポイント]

YouTube動画：https://youtu.be/BBjMe_NwpfU

【サイト内の関連ページ】

プログラミング基礎・用語集・体験

はじめに

本稿は、プログラミング経験がない人がAIツールを活用してWebアプリケーションを制作する手順を解説する。HTML、CSS、JavaScript（Webページの構造、見た目、動作を記述するための言語）の知識がなくても、自然言語でアイデアを記述するだけで、アプリケーションの制作と動作確認を完了できる。希望する場合は、インターネット上に公開することもできる（公開時は設定ファイルの編集を一部含む）。本稿で利用するAIツールはいずれもLLM（Large Language Model：大規模言語モデル）を基盤としており、その性質については次節で述べる。

本稿で扱うAI技術の前提知識

本稿で利用する「チャットAI」やコード生成ツールは、いずれもLLM（大規模言語モデル）を基盤としている。LLMは、大量のテキストデータから言語のパターンを学習したAIモデルであり、自然言語による問いかけに対して文章を生成するほか、プログラムコードや設計文書も生成できる。ChatGPT、Gemini、ClaudeはいずれもLLMを用いた対話型サービスであり、Google AI StudioもGemini（GoogleのLLM）を用いてアプリケーションのコードを生成する。

LLMを利用するうえで、以下の点を理解しておく必要がある。

• 出力は確率的である：同じ入力に対しても出力は毎回変動する。本稿の出力例と読者の手元での出力が一致しないのは正常である。
• 誤りが含まれることがある：事実と異なる内容（ハルシネーション）や、動作しないコードが生成されることがある。生成結果は内容を確認したうえで利用する。
• 個人情報・機密情報を入力しない：プロンプト（AIへの指示文）に入力した内容は、サービス提供者のサーバに送信される。氏名、住所、パスワード、APIキー（外部サービスを利用するための認証情報）などを含めない。

本稿は、LLMの内部動作を理解していなくても演習を進められるよう構成されている。ただし、生成結果をそのまま受け入れず、自分で動作確認を行うことが前提となる。

作成するアプリケーションの概要

作成するのは、二択アプリケーションである。2つの選択肢を入力すると、アプリケーションが一方を選んで表示する。機能は次の3つである。

1. 2つの選択肢を入力する
2. ボタンを押す
3. アプリケーションが一方を選んで表示する

このアイデアを形にし、ブラウザで操作できる状態に仕上げることを目標とする。

使用するAIツール

チャットAIは、アイデアを機能仕様として言語化する。ChatGPT、Gemini、Claudeなど、対話型AIを使用できる。

Stitchは、Google Labsが提供するUIデザイン生成ツールである。自然言語による説明から画面デザインを生成する。デザインの検討に使用するが、省略してもよい。

Google AI Studioは、Googleが提供するAI開発環境である。自然言語による説明からWebアプリケーションを生成し、プレビュー画面で動作を確認できる。

本稿で紹介するツールは執筆時点の情報に基づく。AIツールは更新されるため、画面の配置や操作手順が異なる場合がある。基本的な流れは同じであるため、画面の指示に従って進める。

準備

本稿の手順を実行するには、Googleアカウントが必要である。StitchとGoogle AI Studioは、Googleアカウントでログインして使用する。Googleアカウントを持っていない場合は、事前に作成する。

使用するAIツールの解説

チャットAIの役割

チャットAIは、自然言語で記述されたアイデアを機能仕様として整理する。「アプリ設計書」と「改善のコツ」を生成し、後続のステップで使用する入力データを作る。

Stitchの役割

Stitchは、自然言語による説明から画面デザインを生成するツールである。生成されたデザインはプロトタイプ（試作の動作モデル）として動作確認でき、Google AI Studioへエクスポートできる。本演習ではオプションとして扱う。

Google AI Studioの役割

Google AI Studioは、自然言語による説明からWebアプリケーションのコードを生成する。生成されるコードはReact（画面を構築するためのJavaScriptライブラリ）とVite（開発・ビルドツール）を用いた構成になっている。生成結果はプレビュー画面で動作を確認でき、プロンプト入力欄（チャット欄）からの指示で修正できる。ReactやViteの詳細を理解していなくても、本稿の演習は進められる。

GitHub Pagesの役割

GitHub Pagesは、GitHub（ソースコード共有サービス）が提供する静的サイトの公開サービスである。パブリックリポジトリ（公開設定の保管領域）であれば無料で利用でき、クレジットカードの登録は不要である。プライベートリポジトリ（非公開設定の保管領域）で利用する場合は有料プラン（GitHub Pro等）が必要である。

プロンプトの基本構成

チャットAIへの入力（プロンプト）は、次の構成で記述する。

Webアプリの「アプリ設計書」と「改善のコツ」を作成してください。

【機能要件】
- 〇〇するアプリ。
- 〇〇して、〇〇すると、〇〇する。
- シンプルで使いやすいもの。

機能要件は、アプリの目的、入力と出力、UIの方針の3点を記述する。

ローカル開発環境について

Google AI Studioが生成するアプリケーションを自分のパソコンで動作させるには、Node.js（JavaScriptをパソコン上で実行する環境）と、Viteによるビルド操作（ソースコードを実行可能な形式に変換する処理）が必要である（本演習の範囲外）。本演習ではGoogle AI Studioのプレビュー画面、または後述するGitHub Pagesでの公開によって動作確認を行うため、ローカル環境の構築は不要である。

vite.config.jsの設定について

GitHub Pagesでは、リポジトリ名がURLのパスに含まれる（例：https://ユーザー名.github.io/リポジトリ名/）。このため、vite.config.js（Viteの設定ファイル）にbase設定を追加する必要がある場合がある。公開後に画面が空白になる、ファイルが見つからないなどのエラーが発生した場合は、この設定を確認する。

演習1：チャットAIでアイデアを機能仕様に変換

《手順》

1. チャットAI（ChatGPT、Gemini、Claude等）を開く。
2. 次のプロンプトを入力して送信する。

   Webアプリの「アプリ設計書」と「改善のコツ」を作成してください。
   
   【機能要件】
   - 二択で迷ったときに決断を支援するアプリ
   - 2つの選択肢を入力し、ボタン押下でどちらか1つを表示
   - シンプルで使いやすいUI
   

3. 下記はチャットAI Geminiの画面例である。
   
4. 出力された「アプリ設計書」と「改善のコツ」をコピーして保存する。次の演習で使用する。

《出力例》

以下の出力例には、Webアプリケーションに関する専門用語（「クライアントサイド・レンダリング」「Math.random()」「Service Worker」等）が含まれている。これらは現段階で理解できなくてよい。後続の演習では出力結果をそのまま入力として使用するため、演習の進行に支障はない。

チャットAIは同じ入力でも毎回異なる出力を返す。出力例を以下に示す。

## 1. Webアプリ設計書

### 1.1 システムアーキテクチャ

Web標準技術を用いたクライアントサイド・レンダリング（CSR）構成を採用します。

* Frontend: HTML5, CSS3 (Modern Grid/Flexbox), JavaScript (ES6+)
* 状態管理: アプリケーション内蔵メモリ（選択肢A、選択肢B、決定結果）

### 1.2 UI/UX デザイン設計

1. ヘッダー: アプリ名「Choice Focus（仮）」
2. メインエリア:
   * 入力フィールド × 2（プレースホルダー：例「カレー」「ラーメン」）
   * 決断ボタン
3. 結果表示エリア:
   * 選択された項目を表示
   * リセットボタン

### 1.3 処理ロジック

1. ユーザーが2つの文字列を入力。
2. ボタン押下時、空入力チェックを実行。
3. Math.random()による乱数で一方を選択。
4. 結果を表示。

---

## 2. アプリ改善のコツ

### ① UXの改善

* 決定ボタン押下後に数秒のアニメーションを挟む。
* Web Speech APIによる音声入力の実装。

### ② 技術的信頼性の向上

* 履歴機能（Local Storageによる保存）。
* PWA化（Service Workerによるオフライン対応）。

### ③ 決断ロジックの拡張

* 「保留」「両方」などの第3の選択肢を一定確率で提示。
* 重み付けスライダー機能の追加。

《ヒント》

• 出力が長い場合も全体をコピーする。次の演習でそのまま入力として使用する。
• 出力内容に不足を感じる場合は、追加の指示をチャットAIに送り、再生成する。

《考察ポイント》

• 曖昧なアイデアが、機能仕様としてどのように整理されたか。
• 「改善のコツ」に記載された項目のうち、実装したい機能はどれか。

《応用例：割り勘計算アプリケーション》

Webアプリの「アプリ設計書」と「改善のコツ」を作成してください。

【機能要件】
- 割り勘を計算するアプリ。
- 合計金額と人数を入力すると、1人あたりの金額を表示する。
- シンプルで使いやすいもの。

演習2：Stitchで画面デザインを生成（オプション）

本演習はオプションである。省略して演習3に進んでもアプリケーションは完成する。

《手順》

1. https://stitch.withgoogle.com を開く。
2. Stitchのデザイン画面を開く。初回アクセス時は「今すぐ試す」（Try it now）等のボタンが表示される場合がある。Googleアカウントでのログインを求められた場合はログインする。
   
3. 演習1で出力された「アプリ設計書」と「改善のコツ」の全体をコピーして、画面中央のプロンプト入力欄に貼り付ける。矢印のボタン（生成ボタン）をクリックする。
   
4. デザイン提案が表示されるまで待つ（数十秒程度）。
   
5. 左側の欄からAIに説明や変更を依頼できる。下記の例では、「テキストを日本語にしてください」と入力して、英語表示を日本語に変更している。
   
   変更結果を確認する。画面が変わっていないように見える場合があるが、スクロールすると変更後のものを確認できる。変更前のものも残る。
   
6. SHIFTキーを押しながら2つの画面をクリックする。両方が青い枠で囲まれたことを確認する。マウスで2つの画面を囲む範囲選択でも同じ結果が得られる。
   
7. メニューの「Generate」をクリックし、「プロトタイプ」を選ぶ。
   
8. プロトタイプの画面が増えたことを確認する。
   
9. プロトタイプにマウスを移動するとメニューが現れる。「Interact」をクリックすると、プロトタイプの動作を確認できる（最初にAIに与えた全機能が実装されているわけではなく、画面のイメージと基本操作を確認する段階である）。
   
   2択の画面に「うどん」「ラーメン」のように入力して決断ボタンをクリックし、画面が変わり結果が表示されることを確認する。
   
   
10. デザインが完了したら、Google AI Studioへエクスポートする。再びSHIFTキーを押しながら2つの画面をクリックし、両方が青い枠で囲まれたことを確認する。
    
11. メニューの「... More」をクリックし、「エクスポート」を選ぶ。
    
12. 「AI Studio」を選び「AI Studioで構築」をクリックする。
    
13. Google AI Studioが起動する。演習3に続く。
    

Stitchからエクスポートした場合、Google AI Studioはデザイン情報を引き継いだ状態で起動する。この場合も、演習3ではプロンプト入力欄に演習1で得た「アプリ設計書」と「改善のコツ」を貼り付けてから「Build」ボタンをクリックする。デザイン情報と機能仕様の両方をGoogle AI Studioに与えることで、要件に沿ったアプリケーションが生成される。

《ヒント》

• 初回アクセス時はログインや利用規約の同意を求められる場合がある。画面の指示に従う。
• 変更前のデザインも残るため、複数の案を比較できる。

《考察ポイント》

• 生成されたデザインは、演習1で記述した機能要件と整合しているか。
• Interactモードで確認した動作と、最終的に必要な機能との差分はどこか。

演習3：Google AI Studioでアプリケーションを生成

《手順》

1. 演習2を行わなかった場合は、次の手順でGoogle AI Studioを起動する。
   1. https://aistudio.google.com を開き、Googleアカウントでログインする。
   2. 左側メニューから「Build」を選択する。次のような画面が表示された場合は、「Build apps with Gemini」または「Build」をクリックする。
      
   ここから先は、演習2を行った場合も行わなかった場合も同じ操作になる。
2. プロンプト入力欄に、演習1の「アプリ設計書」と「改善のコツ」を入力する。
   
3. 「Build」ボタンをクリックする。
   
4. コードが生成され、プレビュー画面にアプリケーションが表示される。
   

《ヒント》

• 生成には数十秒から数分かかる場合がある。
• エラー表示が出た場合は、プロンプトを短くするか、再実行する。

《考察ポイント》

• 生成されたアプリケーションは、入力したプロンプトのどの部分に対応しているか。
• 「改善のコツ」のうち、生成結果に反映された項目はどれか。

演習4：動作を確認する

《手順》

1. Google AI Studioのプレビュー画面でアプリケーションを操作する。入力欄への入力、ボタンのクリックなど、想定した操作が動作するか確認する。
   
   
2. 演習1の「改善のコツ」が反映されていることを確認する。
   
3. 意図どおりに動作すれば、動作確認は完了である。修正が必要な場合は、プロンプト入力欄（チャット欄）に修正内容を入力する。修正を繰り返し、意図どおりに動作する状態に仕上げる。

《修正指示の例》

• 「ボタンの色を青に変更して」（色の変更）
• 「選択結果を大きな文字で表示して」（文字サイズの変更）
• 「結果表示にアニメーションを追加して」（演出の追加）

《ヒント》

• 修正指示は1回につき1点に絞ると、意図が伝わりやすい。
• 修正後、再度プレビュー画面で動作を確認する。

《考察ポイント》

• 動作と機能要件の差分はどこか。
• その差分を埋めるためのプロンプトをどう記述するか。

演習5：アプリケーションを公開する（オプション）

完成したアプリケーションをインターネット上に公開する場合は、GitHub Pagesを使用する。本演習はYAML形式（構造化されたテキスト形式）のワークフローファイル（GitHub Actionsの設定ファイル）の編集を含むため、これまでの演習と異なりテキストファイルの編集操作が必要となる。冒頭で述べた「コード編集なし」の範囲を超えるため、難易度が高いと感じた場合は本演習を省略してもよい。アプリケーションそのものは演習4までで完成している。

《手順》

1. GitHubアカウントを持っていない場合は、github.com でアカウントを作成する。
2. Google AI Studioの画面上部にあるGitHubのアイコンをクリックする。
3. 初回はGitHubアカウントとの連携を求められる。画面の指示に従って認証を行う。
   
4. リポジトリ（コードの保管場所）の名称、説明、privateかpublicか（非公開か公開か）を設定する。
   
5. この版の説明を入力する。
   
6. リポジトリが作成され、コードがGitHubにプッシュ（送信）される。プッシュされたファイルが表示される。次回以降も同様の操作でプッシュできる。
   
7. GitHubで作成されたリポジトリを開き、「Settings」タブをクリックする。
   
   
8. 左側メニューの「Pages」をクリックする。
   
9. 「Build and deployment」の「Source」で「GitHub Actions」を選択する。
   
10. ワークフローの選択画面が表示される。「Static HTML」の「Configure」をクリックする。これはワークフローファイルの編集画面を開くための足がかりであり、次の手順で内容をVite用に置き換える。
11. ワークフローファイルの編集画面が表示される。Google AI Studioが生成するアプリケーションはViteを使用しているため、表示されたワークフローをVite用に書き換える。Vite公式ドキュメントのGitHub Pagesセクションに掲載されているワークフローをコピーし、編集画面の内容を置き換える。
12. 「Commit changes」をクリックする。
13. 「Actions」タブでビルドとデプロイ（公開のための配置）の進捗を確認する。緑色のチェックマークが表示されれば成功である。
14. 「Settings」→「Pages」に戻ると、「Your site is live at...」と公開URLが表示される。これがアプリケーションの公開アドレスである。

《ヒント》

• 公開後に画面が空白になる、ファイルが見つからないなどのエラーが発生した場合は、vite.config.jsのbase設定を確認する。
• ビルドエラーが発生した場合は、「Actions」タブでエラー内容を確認し、Google AI Studioでコードを修正して再度プッシュする。

《考察ポイント》

• ローカル環境のプレビューと、GitHub Pages公開時の動作に差はあるか。
• 差がある場合、原因はどこにあるか（パス設定、ビルド設定など）。

《注意事項》

• GitHub Pagesで公開した内容は全世界に公開される。プログラムの中に個人情報やパスワードを含めない。
• AIが生成したコードには誤りや脆弱性が含まれる可能性がある。公開前にプレビュー画面で動作確認を行う。また、生成されたコード内にAPIキーや認証情報が直接記述されていないかを確認する。
• 本手順はツールの更新により変更される場合がある。画面の指示に従って進める。

付録：ミニゲームを作る場合

本手順はミニゲーム制作にも応用できる。Stitchはゲーム画面の生成に適していないため、演習2を省略してGoogle AI Studioに直接プロンプトを入力する。プロンプトには操作方法（クリック、キーボード等）を含め、シンプルな動作から段階的に機能を追加する。

プロンプト例：数字当てゲーム

数字当てゲームの小さなWebアプリを作りたい。
1から100までのランダムな数字をアプリが決め、プレイヤーが予想を入力する。
「大きい」「小さい」のヒントを表示し、正解したら「正解」と回数を表示する。
クリックで操作する。シンプルで、直感的に操作できるものにしたい。

プロンプト例：モグラたたき風ゲーム

モグラたたき風の小さなWebアプリを作りたい。
画面に9つのマスがあり、ランダムにマスが光る。光ったマスをクリックするとスコアが増える。
30秒の制限時間があり、終了後にスコアを表示する。
クリックで操作する。シンプルで、直感的に操作できるものにしたい。

まとめ

AIツールを組み合わせることで、次の手順でWebアプリケーションを開発できる。

上記の演習は、GoogleアカウントとGitHubアカウントを取得し、各サービスの無料利用枠の範囲内かつパブリックリポジトリで運用する限り、無償で実施できる。GitHubのプライベートリポジトリでGitHub Pagesを利用する場合や、Google AI Studioで無料利用枠を超える利用を行う場合は、有料プランの契約が必要になる場合がある。