MENU
中小企業のデジタル活用を支えるIT情報メディア

【実践ガイド】バイブコーディングで業務ツールを作る方法とは？ChatGPTとGemini活用入門

PCを操作する女性

この記事でわかること
・ バイブコーディングを活用して生成AIと身近なツールを組み合わせる方法
・ ChatGPTで作るToDoリストやGemini APIとGoogleスプレッドシート連携など、実践的なミニツールの作り方
・ 業務改善にバイブコーディングを取り入れるためのポイント

「AIを業務に取り入れたいけど難しそう」「コードなんて書けない…」と思っていませんか？
そんな方にぴったりなのが バイブコーディング（Vibe Coding）。
生成AIに相談しながら、身近なツールを組み合わせて感覚的に業務効率化の仕組みを作れる、新しい開発スタイルです。

この記事では、初心者でも数分で試せる ChatGPTを使ったToDoリスト作成 や、Gemini APIとGoogleスプレッドシートを連携した自動化 を実践形式で紹介します。

専門知識がなくても「こうしたい」を形にできる体験を通して、あなたの業務にAIを取り入れる第一歩をサポート。
「まずは試してみたい」「AIをもっと活用してみたい」という方は、ぜひ一緒にチャレンジしてみましょう！

目次

バイブコーディングを体験してみよう

ここまでの記事では、バイブコーディングとは何か、そしてそれを支える便利なツールたちをご紹介してきました。
いよいよ今回は、実際にAIと一緒に手を動かしてみる「実践編」です！

まだ前回までの記事を読んでいない方は、先にこちらをチェックしてみてくださいね。

あわせて読みたい
【超入門】バイブコーディング（Vibe Coding）とは？非エンジニア必見！AIと一緒に業務効率化を図る方法 バイブコーディングとは、生成AIと対話しながら業務の自動化や効率化を進めていく、新しい開発スタイルです。プログラミングに不安がある方や非エンジニアでも、自分の言葉でAIに相談するだけで、仕組みづくりの第一歩を踏み出せます。本記事では、バイブコーディングの概要や特徴をやさしく紹介し、「何から始めればいいのか？」という疑問に寄り添いながら、最初の一歩をサポートします。
あわせて読みたい
【初心者向け】バイブコーディングに必要なツールとは？生成AI・実行環境・エディタまでやさしく解説 バイブコーディングは「コードはAIが書いてくれるから楽！」と思われがちですが、実際に使いこなすには複数のツールを組み合わせる必要があるのをご存じですか？ この記事では、初心者がバイブコーディングを始める際に知っておきたい主要ツール3種（生成AI・実行環境・コードエディタ）について、それぞれのサービスの特徴・使い分け・得意不得意などをやさしく解説します。

今回は「まずは気軽に試してみたい！」という方向けに、手軽に取り組める2つのサンプルをご紹介します。

実行環境なしで試せるHTML＋ChatGPTで作るToDoリスト

Gemini APIとGoogleスプレッドシート・Googleドキュメントを連携して業務を自動化するミニスクリプト

どちらもコーディングの専門知識がなくてもOK。
生成AIと少しの工夫で、「アイデア」がツールとして形になる楽しさを体験してみましょう！

使うのは、生成AIと身近なツールだけ

バイブコーディングを始めるのに、特別な開発環境や難しい準備は必要ありません。
今回紹介する2つのサンプルもChatGPTやGeminiといった生成AI、そしてHTMLやGoogleスプレッドシートなど、普段使っているようなツールだけで実現できます。

どちらの事例も無料で始められてすぐに試せるものばかり。
たとえばブラウザで開けるだけのToDoリストや、Googleスプレッドシートに集計処理を自動化する仕組みなど、「ちょっと便利にしたい」程度の要望なら十分対応可能です。

まずは今あるツールを活用しながら、気軽に試してみましょう。

「試す→壊す→直す」が前提の進め方

バイブコーディングの魅力は、完璧な仕様や正解を求めずに始められることです。
うまく動かなくても大丈夫。動かしてみて「思った通りにならなかった」としても問題ありません。
AIに聞きながら少しずつ修正・改善していくことで、ツールは自然に育っていきます。

むしろ「まず作ってみて、気になるところを直す」という試行錯誤のプロセスそのものが、バイブコーディングにおける大きな学びになります。気軽に楽しんでみましょう。

注意すべきこと

バイブコーディングはAIと身近なツールを使って気軽に始められるのが魅力ですが、いくつか注意しておきたいポイントもあります。

まず、個人情報や機密性の高い業務データを、そのままAIに入力しないようにしましょう。
生成AIは入力内容を学習に使うことがあるため、社内情報や顧客データなどは避けるのが安全です。

また、Googleスプレッドシートや共有ファイルを使う場合は、公開設定に注意が必要です。
「全員に公開」などになっていないか、あらかじめ確認しておきましょう。

さらにAIが生成したコードの中には、外部のスクリプトやリンクが含まれることがあります。
信頼できないURLが使われていないか、実行前に一度コードの中身を確認することをおすすめします。

今回紹介しているツールは「試作」や「業務改善のたたき台」として活用することが前提のサンプルです。
実際の業務フローに組み込む場合は、IT担当者や専門家のチェックを受けることで、より安全に活用できます。

ePla運営会社では、中小企業の業務に合ったAIツールの導入方・活用方法について
無料でご相談を承っています。

AI活用のお悩みを無料相談する

実践1. ChatGPTで作るToDoリスト

ローカル環境（自分のPC）でブラウザを使って動くシンプルなToDoリストを作ってみましょう。
特別な開発環境は不要。ChatGPTでコードを生成 → ファイルに保存 → ブラウザで開くだけでOKです。

準備するもの

  • ChatGPTなどの生成AI（無料プランでも可）
  • テキストエディタ（メモ帳やVS Codeなど）
  • Webブラウザ（Chromeなど）

インストール作業や環境構築は不要。PCだけあれば始められます。

スマホやタブレットでも試せないことはありませんが、コードのコピー＆ペーストやファイル保存の操作が少しやりづらいため、この記事ではPCでの作業をおすすめします。

ChatGPTに作りたい機能の概要を伝える

まずはChatGPTなどの生成AIに、作りたいToDoリストについて相談してみましょう。
今回は その日のToDoリストを管理するためのミニアプリ を作ってみます。

このToDoリストでやりたいことは、シンプルに以下の3つとします。

  • タスクを入力して追加できること
  • 完了したタスクはチェックを入れると取り消し線がつくこと
  • データは保存されなくてもOK（その日のタスク管理だけで十分）

「どんな機能を作りたいか」がはっきりしたら、あとはこの要望をそのまま生成AIに伝えます。
伝え方のポイントは、「こういう動きをさせたい」というイメージをそのまま言葉にすることです。
無理に専門用語を並べる必要はありません。

たとえば今回のToDoリストの作成を、次のように依頼してみました。

ユーザー

パソコンのブラウザでそのまま開いて動く、シンプルなToDoリストアプリを作ってください。

1. タスクを入力して追加できる
2. 完了したタスクはチェックを入れると取り消し線がつく
3. データは保存されなくてもOK（その日のタスク管理だけで十分）

特別なソフトを入れなくても、ファイルを開くだけで動くようにお願いします。

依頼の意図としては、HTMLとJavaScriptを使ったローカル環境専用のアプリの生成を想定しています。

コードを保存して動かしてみる

生成AIからは、以下の様な回答が返ってきました。

生成AI

以下は、特別なソフトなしで、ブラウザでそのまま動くシンプルなToDoリストです。
ファイルを保存してダブルクリックすれば使えます。

✅ できること
タスクを入力して追加
チェックボックスで完了 → 取り消し線がつく
データ保存はなし（リロードでリセット）

🔧 使い方
下のコードを .html ファイルとして保存（例：todo.html）
保存したファイルをダブルクリックしてブラウザで開く

📄 HTMLコード

サンプルコードを見る（クリックで開閉） 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>シンプルToDoリスト</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #f8f8f8;
      padding: 20px;
    }
    h1 {
      text-align: center;
    }
    #todo-form {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    #new-task {
      width: 300px;
      padding: 8px;
      font-size: 16px;
    }
    #add-button {
      padding: 8px 12px;
      font-size: 16px;
      margin-left: 8px;
    }
    ul {
      list-style: none;
      padding: 0;
      max-width: 400px;
      margin: 0 auto;
    }
    li {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 8px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    li input[type="checkbox"] {
      margin-right: 10px;
    }
    .done {
      text-decoration: line-through;
      color: #999;
    }
  </style>
</head>
<body>
  <h1>ToDoリスト</h1>
  <div id="todo-form">
    <input type="text" id="new-task" placeholder="タスクを入力" />
    <button id="add-button">追加</button>
  </div>
  <ul id="task-list"></ul>

  <script>
    const addButton = document.getElementById("add-button");
    const newTaskInput = document.getElementById("new-task");
    const taskList = document.getElementById("task-list");

    function addTask() {
      const taskText = newTaskInput.value.trim();
      if (taskText === "") return;

      const li = document.createElement("li");
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";

      const span = document.createElement("span");
      span.textContent = taskText;

      checkbox.addEventListener("change", () => {
        span.classList.toggle("done", checkbox.checked);
      });

      li.appendChild(checkbox);
      li.appendChild(span);
      taskList.appendChild(li);

      newTaskInput.value = "";
      newTaskInput.focus();
    }

    addButton.addEventListener("click", addTask);

    newTaskInput.addEventListener("keypress", (e) => {
      if (e.key === "Enter") {
        addTask();
      }
    });
  </script>
</body>
</html>

HTMLコードと、その実装方法が書かれた回答が返ってきました。
コードの内容は理解できなくても大丈夫です。

コードをコピーする

AIが生成したHTMLコードをすべてコピーします。
メモ帳やVS Codeなどのテキストエディタに貼り付けましょう。

ファイル名は自由につけてOKですが、拡張子は必ず生成AIが指定したものにしましょう。（例：todo.html）
また、保存時の文字コードはUTF-8が推奨です。

ブラウザで開いて実行する

デスクトップなどに保存したファイル（例：todo.html）をダブルクリックしましょう。
ブラウザが立ち上がり、ToDoリストが表示されます。

もしダブルクリックしてもブラウザが立ち上がらない場合は、以下を試してみてください。

方法1：ドラッグ＆ドロップ
ブラウザ（Chromeなど）を開き、保存したファイルをウィンドウにドラッグ＆ドロップする。
方法2：右クリックから開く
ファイルを右クリック → 「プログラムから開く」 → ChromeやEdgeなどのブラウザを選択。
方法3：ブラウザのメニューから開く
ブラウザを起動 → 「ファイル」メニュー → 「ファイルを開く」から保存した .html ファイルを選択。

では、早速動きを見てみましょう。
保存したファイルをダブルクリックすると、以下のようなシンプルな画面が表示されました。

まずはタスクを登録してみます。
「バイブコーディングを試してみる」と入力し、追加ボタンを押します。

すると、タスクリストに入力した内容が表示されました。
タスクが終了したら、チェックボックスに「完了」の意味のチェックを入れてみます。

チェックを入れたタスクに、しっかりと取り消し線が引かれました。

本当にわずかな手順で作成したツールですが、最初にリクエストした要望を全て満たしています。
ここまでかかった時間は、ほんの数分！

もし「こんな機能も追加してみたい」「ここがいまいちかも」という要望が出てきた場合は、そのまま生成AIに相談してみましょう。
削除ボタンの追加やデザイン変更といった改良まで、AIに任せて進められます。

ePla運営会社では、中小企業の業務に合ったAIツールの導入方・活用方法について
無料でご相談を承っています。

AI活用のお悩みを無料相談する

実践2. Gemini APIとGoogleスプレッドシートを連携して自動化

次は少し難易度を上げて、Google Workspace（GWS）とGeminiを組み合わせて業務効率化を図るバイブコーディングのサンプルに挑戦します。

ここではGoogleスプレッドシートとGoogleドキュメントを連携させて、顧客からの問い合わせ対応を自動化・効率化するツールを作成します。
顧客から寄せられた質問に対する回答を自動生成し、その内容をもとにFAQやマニュアルを自動更新する仕組みです。

なお、この実践では2つの形でGeminiを活用します。
1つは、ツールの仕様や実現したい機能について相談する生成AIとしてのGeminiとしての活用。
もう1つは、実際にシステムを連携させるためのGemini APIとしての利用です。
「コードの相談はGemini（チャット）」「実装時の自動処理はGemini API」と、目的に応じて2つの使い方を併用していきます。

必要となるもの

  • Googleスプレッドシート：顧客からの質問を入力し、Gemini APIが生成した回答を記録
  • Googleドキュメント：質問と回答をFAQやマニュアルとして自動更新
  • Gemini：実現したいツールを作るために質問をする生成AI
  • Gemini API：プログラム（GAS）からGeminiに質問を送り、回答を受け取るための窓口
  • Google Apps Script (GAS)：スプレッドシート・ドキュメント・Gemini APIをつなぐ自動化スクリプト
  • Googleアカウント：上記全てのサービスを利用するために必要
  • Gemini APIキー：Gemini APIにアクセスするための認証キー

これらのツールは、Google Workspace (GWS) 環境のGoogleアカウントがあれば無料で導入・実行が可能です。

API（アプリケーション・プログラミング・インターフェース）は、ソフト同士をつなぐ窓口のような役割を果たします。
今回のGemini APIは、人がチャットで質問する代わりにGoogle Apps Script（GAS）が自動でGeminiに質問を送り、その返答を受け取るための仕組みです。

Geminiに作りたい機能の概要を伝える

今回はすでにやりたいことが決まっているため、Gemini（生成AI）に具体的に要件を伝えていきます。

ユーザー

GoogleスプレッドシートとGoogleドキュメントを組み合わせ、顧客からの問い合わせ対応を自動化・効率化するツールを作成したい。
顧客から寄せられた質問への回答を自動生成し、さらにその回答を元にFAQやマニュアルを自動更新するものです。

要件
・スプレッドシートのA列に「顧客からの質問」を入力
・入力された質問をトリガーに、Google Apps Script（GAS）がGemini APIに問い合わせ、適切な回答を生成する
・Gemini APIが生成した回答を、スプレッドシートのB列に出力
・スプレッドシートに新しい行が追加されたら、その質問と回答を既存のGoogleドキュメント（FAQ・マニュアル）の末尾に追記して、マニュアルが常に最新の状態に保たれるようにする

「Googleスプレッドシート、Googleドキュメント、Google Apps Script (GAS)、Gemini APIを連携させて業務効率化を図りたい」という内容のリクエストです。

機能を実装していく

Geminiからこのような回答が返ってきました。
複数のツールを連携するため、手順を細かく記載してくれています。

Gemini

このプロジェクト、とても面白いですね！以下に、そのツールを構築するための具体的な手順とコードを説明します。

1. GoogleスプレッドシートとGoogleドキュメントの準備
まず、必要な2つのファイルを作成します。
顧客対応管理用スプレッドシート: 新しいスプレッドシートを作成し、以下のヘッダーを設定します。
A列: 顧客からの質問
B列: Gemini APIが生成した回答
FAQ・マニュアル用ドキュメント: 新しいGoogleドキュメントを作成し、後ほどこのドキュメントに質問と回答を自動で追記します。

2. Gemini APIのセットアップ
Gemini APIを利用するには、APIキーが必要です。以下の手順で取得してください。
Google AI Studioへアクセス: https://aistudio.google.com/ にアクセスします。
APIキーの取得: 画面右上の「Get API key」をクリックし、新しいAPIキーを作成します。
キーの保存: 取得したAPIキーを安全な場所にメモしておきます。GASのスクリプト内で使用します。

3. Google Apps Script（GAS）の作成
次に、スプレッドシートとGemini API、ドキュメントを連携させるためのGASスクリプトを作成します。
スクリプトエディタの起動: スプレッドシートのメニューから「拡張機能」→「Apps Script」を選択します。
コードの記述: エディタに以下のコードをコピー＆ペーストし、YOUR_API_KEYの部分を先ほど取得したAPIキーに置き換えてください。
ドキュメントIDの設定: YOUR__DOCUMENT_IDの部分を、作成したFAQ・マニュアル用ドキュメントのIDに置き換えます。ドキュメントIDは、ドキュメントのURL（https://docs.google.com/document/d/YOUR_DOCUMENT_ID/edit）から取得できます。

4. トリガーの設定と実行
スクリプトが自動で動くようにトリガーを設定します。
トリガーメニューの起動: スクリプトエディタの左側のメニューから「トリガー」を選択します。
新しいトリガーの追加: 「トリガーを追加」ボタンをクリックします。
トリガー設定: 以下の内容で設定し、保存します。
実行する関数を選択: onEdit
実行するデプロイを選択: Head
イベントのソースを選択: スプレッドシートから
イベントの種類を選択: 編集時
これで設定は完了です。

使い方
あとは、スプレッドシートのA列に顧客からの質問を入力するだけです。
スプレッドシートのA列に質問を入力し、Enterキーを押します。
トリガーが発火し、GASがGemini APIを呼び出します。
Gemini APIが生成した回答がB列に自動で表示されます。
同時に、FAQ・マニュアル用ドキュメントの末尾に、入力した質問と回答が追記されます。
このツールを使えば、顧客対応の効率化はもちろん、FAQやマニュアルの更新も手間なく行えるようになります。ぜひ活用してみてください！

サンプルコードを見る（クリックで開閉） 
// Google AI Gemini APIキーを設定
const API_KEY = "YOUR_API_KEY";

// FAQ・マニュアル用GoogleドキュメントのIDを設定
const DOCUMENT_ID = "YOUR_DOCUMENT_ID";

/**
 * スプレッドシートのセルが編集されたときにトリガーされる関数
 */
function onEdit(e) {
  // 編集されたセルの情報を取得
  const range = e.range;
  const sheet = range.getSheet();
  const column = range.getColumn();
  const row = range.getRow();

  // 編集されたセルが「シート1」のA列であるか確認
  if (column === 1 && sheet.getName() === "シート1") {
    const question = range.getValue();

    // 質問が空でない場合のみ、以降の処理を実行
    if (question.trim() !== "") {
      try {
        const answer = generateAnswerWithGemini(question);

        // 生成された回答をB列に出力
        sheet.getRange(row, 2).setValue(answer);

        // 質問と回答をGoogleドキュメントに追記
        appendQuestionAndAnswerToDoc(question, answer);
      } catch (error) {
        // ユーザーにはエラーメッセージを表示せず、GASのログにのみ記録する
        Logger.log("エラーが発生しました: " + error.message);
        // エラーが発生したことを示すために、セルを空にするか、メッセージを削除する
        sheet.getRange(row, 2).setValue(""); 
      }
    }
  }
}

/**
 * Gemini APIに質問を送信し、回答を取得する
 */
function generateAnswerWithGemini(prompt) {
  const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=${API_KEY}`;

  const payload = {
    "contents": [
      {
        "parts": [
          { "text": prompt }
        ]
      }
    ]
  };

  const options = {
    "method": "post",
    "contentType": "application/json",
    "payload": JSON.stringify(payload)
  };

  const response = UrlFetchApp.fetch(url, options);
  const jsonResponse = JSON.parse(response.getContentText());

  // APIレスポンスからテキストを抽出
  const result = jsonResponse.candidates[0].content.parts[0].text;

  return result;
}

/**
 * Googleドキュメントの末尾に質問と回答を追記する
 */
function appendQuestionAndAnswerToDoc(question, answer) {
  const doc = DocumentApp.openById(DOCUMENT_ID);
  const body = doc.getBody();

  // 質問と回答を追記
  body.appendParagraph(`質問: ${question}`).setHeading(DocumentApp.ParagraphHeading.HEADING3);
  body.appendParagraph(`回答: ${answer}`).setHeading(DocumentApp.ParagraphHeading.NORMAL);
  body.appendParagraph("---");
}

わからないキーワードがあれば都度質問し、理解できるまで説明してもらいましょう。
「専門用語をなるべく使わず、丁寧に説明して」など、回答の形を変えてもらうのもおススメです。

次に出力された内容を確認・実行していきます。
実装工程が多いため、一つずつ見ていきましょう。

実装手順1. GoogleスプレッドシートとGoogleドキュメントの準備

顧客対応管理用のスプレッドシートと、FAQ・マニュアル用のドキュメントを準備します。
すでに情報が入っているものを利用するのはセキュリティリスクが高いため、この段階では控えましょう。
実際にデータが入った状態での動きを見たい場合は、ダミーデータを入力したファイルを準備してください。

スプレッドシートには、以下のヘッダーを設定しましょう。

  • A列: 顧客からの質問
  • B列: Gemini APIが生成した回答

ドキュメントは空白で大丈夫です。

実装手順2. Gemini API の発行

Gemini APIを利用するために必要となるAPIキーを発行します。
Google AI Studio にアクセスし、表示された画面から「Get API Key」を選択します。

利用規約・プライバシーポリシーへの同意画面の必要項目にチェックをして、「同意する」ボタンを押します。

Google AI Studio画面右上にある「APIキーを作成」ボタンから、APIキーを発行します。

APIについて情報を設定する画面が表示されます。
任意の値を入力し、「キーを作成」ボタンを押します。

キー名の設定：自由に設定できるので、見返したときにわかりやすい名前を設定します。
インポートしたプロジェクトを選択：APIキーを新規発行したいため、「Create Project」を選択して任意の名前を設定します。既存プロジェクトに紐付けたい場合は、該当のプロジェクトを選択します。

キーの作成が完了すると画面が切り替わります。
「キー」に表示されたリンク（画面では「…kOqg」となっている箇所）を開くと、別ウインドウでAPIキーの詳細が表示されます。

「APIキー」の値をコピーして、ローカル環境など安全な場所に保存します。
※第三者に不正利用されると思わぬ課金や情報流出につながる可能性があるため、必ず厳重に保管しましょう。

実装手順3. Google Apps Script（GAS）と連携させる

続いて、GASで3つをつなぐコードを設定していきます。

スプレッドシートのメニューから、「 拡張機能 ＞ Apps Script 」を選択します。

Apps Script のエディタが表示されたら、Geminiが出力したコードをすべてコピーして上書きします。

サンプルコードを見る（クリックで開閉） 
// Google AI Gemini APIキーを設定
const API_KEY = "YOUR_API_KEY";

// FAQ・マニュアル用GoogleドキュメントのIDを設定
const DOCUMENT_ID = "YOUR_DOCUMENT_ID";

/**
 * スプレッドシートの質問をトリガーにGemini APIに問い合わせ、回答を生成する
 */
function onEdit(e) {
  // 編集されたセルがA列であることを確認
  const range = e.range;
  const sheet = range.getSheet();
  const column = range.getColumn();
  const row = range.getRow();

  if (column === 1 && sheet.getName() === "シート1") { // シート名は適宜変更してください
    const question = range.getValue();
    if (question.trim() !== "") {
      try {
        const answer = generateAnswerWithGemini(question);
        
        // B列に回答を出力
        sheet.getRange(row, 2).setValue(answer);
        
        // ドキュメントに質問と回答を追記
        appendQuestionAndAnswerToDoc(question, answer);
        
      } catch (error) {
        // エラーが発生した場合、B列にエラーメッセージを出力
        sheet.getRange(row, 2).setValue("エラーが発生しました: " + error.message);
      }
    }
  }
}

/**
 * Gemini APIに質問を送信し、回答を取得する
 */
function generateAnswerWithGemini(prompt) {
  // NOTE: モデル名はリリース状況によって変わる場合があります。
  const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=${API_KEY}`;
  
  const payload = {
    "contents": [
      {
        "parts": [
          { "text": prompt }
        ]
      }
    ]
  };

  const options = {
    "method": "post",
    "contentType": "application/json",
    "payload": JSON.stringify(payload)
  };

  const response = UrlFetchApp.fetch(url, options);
  const jsonResponse = JSON.parse(response.getContentText());

  // APIレスポンスからテキストを抽出
  const result = jsonResponse.candidates[0].content.parts[0].text;
  
  return result;
}

/**
 * Googleドキュメントの末尾に質問と回答を追記する
 */
function appendQuestionAndAnswerToDoc(question, answer) {
  const doc = DocumentApp.openById(DOCUMENT_ID);
  const body = doc.getBody();

  // 質問と回答を追記
  body.appendParagraph(`質問: ${question}`).setHeading(DocumentApp.ParagraphHeading.HEADING3);
  body.appendParagraph(`回答: ${answer}`).setHeading(DocumentApp.ParagraphHeading.NORMAL);
  body.appendParagraph("---");
}

※モデル名はリリース状況によって変わる場合があります。

コードの2行目と5行目に値入力が必要と記載されているので、それぞれの値を入力していきます。

YOUR_API_KEY：実装手順2 で取得した「APIキー の値」を、ダブルクォーテーションの中に貼り付けます。
YOUR_DOCUMENT_ID：GoogleドキュメントのURLの一部に表示されている値です。
https://docs.google.com/document/d/この部分に表示される文字列/edit… をダブルクォーテーションの中に貼り付けます。

実装手順4. 自動実行の設定

最後に、どのように動かすかの設定を入れていきます。
Apps Script の左メニューから「トリガー」を選択します。

画面右下の「トリガーを追加」から設定画面に移動し、値を入力して保存します。

それぞれの値には、以下を設定します。今回は以下のようにしました。

実行する関数を選択：onEdit
実行するデプロイを選択：Head
イベントのソースを選択：スプレッドシートから
イベントの種類を選択：編集時
エラー通知設定：今すぐ通知を受け取る

実行する関数を選択：コード内で定義している関数がリスト表示されます。ここでは「onEdit」を選択。
実行するデプロイを選択：常に最新のコードを参照できるよう「Head」を選択。
イベントのソースを選択：スクリプトを動かすきっかけをどこから受け取るかを決めます。「スプレッドシートから」を選択。
イベントの種類を選択：上で選んだスプレッドシートの「どんな操作」で動くかを決めます。「編集時」を選択。
エラー通知設定：エラーが出たときにメール通知を受け取る頻度を設定します。基本は「毎日」や「常に通知」でOK。

作成したGASを初めて実行する場合は、以下のようなアクセス権限の確認画面が表示されます。
青字のスクリプト（設定内容・指示）が、右側の内容を実行してもよいか？というメッセージです。
内容に問題なければ「許可する」で承認しましょう。

他人が作ったスクリプト・よくわからないプロジェクト名の場合は、むやみに許可しないようにしましょう。

設定はこれで完了です。

実行してみる

では、実行してみましょう。
Geminiに依頼した内容は以下の2つ。

  • GoogleスプレッドシートとGoogleドキュメントを組み合わせて、顧客からの問い合わせ対応を自動化・効率化するツールを作成
  • 顧客から寄せられた質問への回答を自動生成し、さらにその回答を元にFAQやマニュアルを自動更新する

スプレッドシートのA列「顧客からの質問」に内容を入力すると、Gemini APIが自動でB列にテキストを生成して反映してくれるはずです。

テストデータで試してみると、「エラーが発生しました」というメッセージが表示されてしまいました。
エラーが出てしまったら、Geminiに内容を確認してみましょう。

ユーザー

エラーがでているので確認してください。

Geminiからはいくつかの解決策が提案され、何度かやりとりを重ねているうちにエラーは無事解決。
今回のケースでは、サンプルコードと実行環境でGemini APIのバージョンが異なっていたことが原因でした。
このように、たとえエラーが出たとしても大丈夫！Geminiがあなたのコーディングをしっかりサポートしてくれます。

【 Before 】
const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${API_KEY}`;

【 After 】
const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=${API_KEY}`;

※モデル名はリリース状況によって変わる場合があります。最新情報はGoogle公式ドキュメントもあわせて確認してください。
※今回は「モデル名の不一致」によるエラーを紹介しましたが、初回実行時には権限エラーが出ることもあります。その場合はスクリプトのアクセス許可を確認してください。

スプレッドシートに質問を入力して数秒待つと、B列に回答が表示されました。
（サンプルツールのため、回答の精度は検証対象としません。）

続いてドキュメントの方を確認します。
スプレッドシートにまとめられた内容を、ドキュメント側でもFAQとして保持するというものでした。
こちらにも同じ内容が反映されています。

このように、スプレッドシートとドキュメントの両方で結果を確認できれば成功です。
一見複雑そうに見える連携処理も、Geminiに相談しながら進めればコーディングの専門知識がなくてもきちんと動かせます。

ePla運営会社では、中小企業の業務に合ったAIツールの導入方・活用方法について
無料でご相談を承っています。

AI活用のお悩みを無料相談する

まとめ

バイブコーディングの由来は、「Vibe（＝感覚・ノリ）」＋「Coding（＝ものづくり）」の組み合わせです。

その本質は、自分の感覚・アイデアをAIの力を借りてすぐにカタチにできること。
ここが従来の「仕様書→要件定義→設計→開発」のような論理主導のプロセスとは異なります。

バイブコーディングの醍醐味は「思いついたらすぐ作れる」ことを通じて、アイデアがどんどん循環していく感覚を得られることにあります。

今回紹介したようなシンプルなツールであれば、生成AIとHTMLやスプレッドシートといった身近なツールだけで十分実現が可能です。
ただし、より高度な機能や本格的な業務システムを作りたい場合は、実行環境の構築やAIコーディングエージェントの活用といった別のステップが必要になってきます。

まずはその入口として、「自分でもAIと一緒にツールを作れた！」という小さな成功体験をぜひ味わってみてください。
そして実際に、あなたの業務ならどんな仕組みを作れそうか、ぜひ置き換えてイメージしてみてくださいね。

＼ AI導入・活用でお悩みの中小企業の方へ ／

「AI導入したいけど、何から始めればいいの？」「最適なツールや活用法がわからない…」
そんなお悩みはありませんか？
ePla運営会社では、中小企業の業務に合ったAIツールの導入方・活用方法について
無料でご相談を承っています。
導入前に気軽に話せる相談窓口として、ぜひご活用ください。

情シスのお悩みを無料相談する
IT運用
AIツール作成 ChatGPT GAS Gemini Googleスプレッドシート バイブコーディング 業務効率化 生成AI

関連記事

目次