「振り返り入力アプリ」を開発する
ここからは、実際にWebアプリを開発する手順を追いながら、具体的な流れを紹介します。
明確な設計図なしに「こんな感じのものを作りたい」という雰囲気（Vibe）を頼りに、AIと対話しながら試行錯誤を繰り返して開発を進めるスタイルは、近年「バイブコーディング」と呼ばれています。まさに、プログラミングに詳しくなくても「自分の感覚」を頼りにAIと二人三脚で開発を進めていく手法といえます。
今回は、特定のGoogleスプレッドシートに子どもたちが「振り返り」を入力できる簡単なWebアプリを、このバイブコーディングで開発していきます。
なお、これはあくまで一例です。より簡潔・簡単な開発手法は、ほかにも存在する点にご留意ください。また、AIは同じプロンプトでも毎回まったく同じ結果を返すとは限りません。手順の「考え方」を参考にしていただければと思います。
AIにアプリのプログラミングを依頼する
まず「どのようなアプリを作りたいか」を、AIに具体的に伝えます。今回は目標となるスプレッドシートのスクリーンショットをAIに提示することで、イメージを正確に共有します。
振り返り入力アプリで記録したい項目（日付、名前、できたこと等）を1行目に用意したGoogleスプレッドシートを作成し、そのシートのスクリーンショットを撮影します。
Google AI Studioを開き、撮影した画像を貼り付け、チャット欄に「このスプレッドシートに子どもたちが振り返りを入力できるようなWebアプリをGASで作ってください」と入力して「Run」をクリック、コードが生成されるのを待ちます。
Apps Scriptで開発環境を準備し、コードを配置する
Google AI Studioがコードを生成したら、それを動かすための「作業場」であるApps Scriptに配置します。用意したGoogleスプレッドシートを開き、上メニューバーの「拡張機能」→「Apps Script」をクリックします。Google AI Studioが生成したコードの内容をすべてコピーし、Apps Script画面の「コード.gs」に貼り付けます。生成結果が「Code.gs」になっていた場合、名前を変更する必要があります。
次に、Apps Scriptのファイル一覧の横にある「＋」をクリックして「HTML」を選択し、ファイル名を「index」（Google AI Studioが指定しているファイル名と同じにしてください）にします。AI Studioが生成した「index.html」の内容をコピーし、今作成した「index.html」ファイルに貼り付けます。その後、保存をクリックして、両方のファイルを保存します。
アプリを公開し、エラーを解決する
コードを配置したら、Webアプリとして公開（デプロイ）し、動作を確認します。開発にはエラーがつきものですが、AIがあれば解決も難しくありません。
Apps Script画面右上の「デプロイ」ボタン → 「新しいデプロイ」をクリックします。種類の選択の歯車アイコンをクリックし、「ウェブアプリ」を選択します。「アクセスできるユーザー」を「全員」に変更し、「デプロイ」をクリックします（初回はアクセス承認を求められるので、画面の指示に従い許可してください）。
表示されたURLをクリックしてアプリを開き、テスト入力してみます。ここで、エラーが発生することがあります（発生しないこともあります）。このエラーメッセージをコピーしてAI Studioに戻り、AIに貼り付けて「このエラーを解決してください」と依頼し、再度実行します。AIから「スプレッドシートのIDが設定されていない」という原因と、修正された新しいコードが提示されました。この新しいコードをコピーし、Apps Scriptの「コード.gs」の内容をすべて削除してから貼り付け、保存します。
新しいバージョンとして再デプロイする
コードを修正したら、その変更を反映させるために、新しいバージョンとして再度デプロイします。「デプロイ」ボタン →「デプロイを管理」をクリックします。表示された管理画面の右上にある編集アイコン（鉛筆マーク）をクリックし、「バージョン」のプルダウンから「新バージョン」を選択します。「説明」欄に「エラー修正」など、変更内容をメモしておくと後でわかりやすくなります。そして「デプロイ」をクリックします。
再度URLからアプリを開き、テスト入力すると、今度はスプレッドシートに正しく記録されました！
機能を追加し、アプリを育てる
基本的なアプリが完成したので、少し機能を追加してみましょう。「スプレッドシートの項目を編集したら、それがWebアプリの入力画面にも自動で反映される」ように改良します。
スプレッドシートの項目名を「できたこと」「難しかったこと」「その他」などに変更します。Google AI Studioに戻り、「スプレッドシートのヘッダー（1行目）を自動で取得して、Webアプリの入力項目として表示するようにしてください」と、1つだけ指示を入力して依頼します。
AIが生成した新しい「コード.gs」と「index.html」を、それぞれApps Scriptにコピー＆ペーストして上書き保存して、「新バージョン」として再度デプロイします。
再デプロイ後にアプリのURLを開くと、入力項目がスプレッドシートに合わせて更新されていることが確認できます。さらにスプレッドシートの項目を増やしてブラウザを再読み込みすると、それも即座に反映されます。
このように、小さなステップで「AIにお願い→試す→修正する」を繰り返すことで、自分のイメージに近いWebアプリを育てていくことができます。
さいごに
最後に、AIツールを責任をもって安全に活用するための注意点をお伝えします。繰り返しになりますが、児童生徒や保護者の個人情報、学校の機密情報は、どのような形であれ絶対に入力しないでください。必ず、個人を特定できないように匿名化・一般化した上で利用しましょう。また、Webアプリを「全員」に公開すると、URLを知っている誰もがアクセスできます。取り扱う情報には細心の注意を払いましょう。
本記事とともに、プログラミング経験ゼロからひとつのWebアプリを創り上げた経験は、教師がテクノロジーを用いて自らの課題を解決する「創造者」としての大きな一歩です。
最初から完璧なアプリを目指す必要はありません。まずは動く最小限のものを作り、それを少しずつ自分の使いやすいように改善していく「育てる」という姿勢が大切です。AIに下書きをさせ、人間が最終的な仕上げを行う。この新しい協働のスタイルが、多忙な先生方の業務を少しでも豊かにし、子どもたちと向き合う貴重な時間を生み出す一助となるでしょう。
この記事で作成してWebアプリは以下のリンクで公開しています。
また、私のYouTubeチャンネルでは今回説明した手順を動画でも解説しています。こちらもぜひご覧ください。
