もうエンジニアに頼まない！Geminiと『話すだけ』で、理想の社内アプリを自作する新常識

「このExcelの転記作業、もっと楽にならないかな…」「チームのタスク状況が、一目でわかるようなカッコいい画面が欲しい…」「SaaSツールは便利だけど、私たちの業務にピッタリ合うものがない…」

日々の業務で、こんな風に感じたことはありませんか？

もし、あなたの隣に専属の優秀なエンジニアがいて、「こんな感じのツールが欲しいんだよね」と話しかけるだけで、みるみるうちに形にしてくれたら…？

実は今、AIの進化によって、それが現実になっています。

この記事では、専門知識がなくても、まるでAIと会話（バイブ・コーディング）をしながら、あなたが普段使っているスプレッドシートを本格的な業務アプリケーションに変えていく、新しい開発体験をご紹介します。

最初に用意するもの

最初に用意するものは、とてもシンプルです。

Googleアカウント: 普段お使いのもので大丈夫です。
「こうなったらいいな」という想い: 「この作業が面倒」「これが見えなくて困る」といった、あなたの業務課題そのものが設計図になります。
AIに話しかける勇気: 専門用語は不要です。「〇〇みたいなこと、できる？」と、同僚に話しかけるような気持ちでOKです。

なぜ「あなた × AI × GAS(Google AppScript)」が最強なのか？

私たちがこれから作るのは、単なる自動化マクロではありません。見た目も機能も、まるでSaaSのようなWebアプリケーションです。このアプローチがなぜ優れているのか、3つの理由があります。

あなたは「監督」、AIは「実行者」 あなたはコードを書く必要はありません。あなたの役割は、「何がしたいか」「どうなってほしいか」というビジョンや要望（バイブス）を言葉で伝えることだけです。面倒なプログラミングは、すべてAI（Gemini）が担当します。
圧倒的な手軽さとコスト 必要なものはGoogleアカウントだけ。サーバー契約や難しい環境構築は不要です。AIとの対話を通じて、スプレッドシートという身近なツールが、みるみるうちに高機能なアプリに生まれ変わります。
「会話」で進む、柔軟な改善 「やっぱり、このボタンの色を変えたいな」「タスクが終わったら通知が出るようにして」といった改善も、AIに話しかけるだけでOK。試行錯誤を繰り返しながら、対話を通じて理想の形に近づけていくことができます。

アプリケーション開発という「対話」

これから作るアプリは、大きく3つの要素で構成されます。そして、その全てをAIとの対話を通じて作り上げていきます。

Google スプレッドシート（＝データベース / 台帳） 全てのタスク情報、ユーザーリストなどを保存する場所です。私たちのアプリの「台帳」や「データ倉庫」の役割を果たします。
Google Apps Script (GAS)（＝頭脳・司令塔） スプレッドシートからデータを読み書きしたり、ユーザーからの指示を実行したりする、アプリの「頭脳」です。Code.gsというファイルにロジックを記述しますが、これもAIが生成します。
HTML / React（＝見た目・インターフェース） ユーザーが実際に触れる画面の部分です。ここにReactというモダンな技術を導入することで、美しくインタラクティブな画面を効率的に作成できます。

実践！AIとの「バイブ・コーディング」

私たちがこれまでの対話で作り上げてきた「タスク管理アプリ」が、どのような「会話」で生まれたのか、その工程を見ていきましょう。

完成品はこんなに素敵な見た目です。まるでウェブアプリケーションですね。

Step 1: 土台作りをAIにお願いする

N対Nでタスクを管理できるアプリを作りたい。まずは土台として、スプレッドシートを使いたいな

Gemini

承知いたしました。では、新しいスプレッドシートに『Tasks』と『Users』という名前のシートを作りましょう。それぞれのシートの1行目には、以下の項目（ヘッダー）を準備してください…

Step 2: 欲しい機能を言葉で伝える

ありがとう。じゃあ次に、自分に割り振られたタスクと、自分が依頼したタスクを別々に見られるようにしてほしい。あと、依頼されたタスクは、いきなり始まるんじゃなくて、一旦『受信トレイ』みたいな場所で確認できるようにしたいな。

Gemini

素晴らしいアイデアですね。では、画面の左側に『受信トレイ』『あなたのタスク』『依頼したタスク』という3つのメニューを作り、それぞれクリックすると対応するタスク一覧が表示されるようにします。そのためのロジックをCode.gsに記述し、画面（UI）も更新しますね。

Step 3: 使ってみて、感覚をフィードバックする

動くようになった！でも、タスクの進捗が分かりにくいな…。進捗バーみたいなものがあると嬉しい。

Gemini

承知いたしました。各タスクにサブタスク（チェックリスト）の概念を追加し、その完了率を進捗バーで表示するようにします。

タスクの詳細画面で、完了した項目にチェックを入れられるようにしましょう。

いいね！ついでに、どの作業にどれくらい時間がかかったか知りたいから、ストップウォッチ機能も追加できる？

Gemini

お任せください。各サブタスクの横にタイマーの開始・停止ボタンを設置します。これで、実作業時間も正確に記録できます。

このように、「要望を伝える→AIが形にする→使ってみて、また要望を伝える」というサイクルを繰り返すだけで、アプリケーションはどんどんあなたの理想に近づいていきます。これが「バイブ・コーディング」の醍醐味です。

Step 4: Webアプリとして安全に公開する

最後に、GASエディタの右上にある「デプロイ」ボタンから「ウェブアプリ」として公開します。この時、セキュリティのために一つ重要な設定があります。

「アクセスできるユーザー」を「自分のみ」または「（あなたの会社のドメイン）内の全員」に設定してください。これにより、部外者がアクセスできない、安全な社内専用アプリケーションとして利用できます。

この設定をすれば、あなただけのWebアプリケーションの完成です！

AIにうまく伝える「コツ」と「型」：プロンプトテンプレート

今回の開発プロセスを振り返ると、うまくAIに意図を伝えるための「型」が見えてきます。これをテンプレートとして使えば、あなたもスムーズに開発を進められます。

フェーズ1：構想と土台作り（最初のプロンプト）

まずは、作りたいアプリの全体像と、使う技術を明確に伝えます。

プロンプトテンプレート（初回）

目的: （例：チームのタスク管理を効率化するための）Webアプリケーションを作成したい。

技術構成:

データベース： Googleスプレッドシート

バックエンド（ロジック）： Google Apps Script (GAS)

フロントエンド（UI）： React (CDNを利用)

基本要件:

（例：ユーザーは自分に割り当てられたタスクと、自分が依頼したタスクを一覧で確認できる）

（例：タスクには担当者、依頼者、期限、ステータスといった情報を持たせる）

まずは、この構成で動作する最小限のコード一式を作成してください。

フェーズ2：機能の追加・改善（対話のプロンプト）

一度動くものができたら、そこから対話形式で機能を追加していきます。ポイントは「現状」と「どうなってほしいか」をセットで伝えることです。

プロンプトテンプレート（機能追加）

今のアプリは（現状）ですが、これを（どうなってほしいか）のように変更してください。

【良い例】

「現状、タスクの一覧が表示されるだけですが、新しくタスクを依頼できるボタンとフォームを追加してください。」

「タスクの詳細画面で、ステータスをドロップダウンで変更できるようにしてください。」

「受信トレイに何件タスクがあるか分かりにくいので、サイドバーのメニュー横に赤いバッジで件数を表示してください。」

フェーズ3：デバッグと修正（困った時のプロンプト）

エラーが出たり、意図通りに動かない場合は、具体的な状況をそのまま伝えましょう。

プロンプトテンプレート（エラー修正）

（操作内容）をしたら、（エラーメッセージ）というエラーが出ました。または、（現状の挙動）という意図しない動きをします。

原因を特定したいので、問題がありそうな箇所にデバッグ用のコード（ログやアラート）を仕込んで、何が起きているか確認できるようにしてください。

【良い例】

「タスクを登録した後、『データの読み込みに失敗しました』というエラーが出ます。」

「タイマーの停止ボタンを押しても、すぐにまた動き出してしまいます。」

「スプレッドシートのデータがうまく表示されません。サーバー側でデータが正しく取得できているか、ログで確認できるようにしてください。」