Google SheetsとGASでつくる簡易Webアプリ～5分で動く「なんちゃってデータベース」～

1. はじめに
2. 全体構成イメージ
3. 実装手順
4. 動作確認
5. メリットと制限
1. メリット
2. 制限
6. セキュリティについて
7. まとめ
8. 補足：なぜこれを紹介するのか

1. はじめに

こんにちは！スタッフのやまさきです。

新しいサービスや機能を考えたとき、まずは「動くものをサッと作って試したい」と思うことはありませんか？

アプリを作るのに「サーバーやデータベースを準備」ってどうやればいいんだ？

とはいえ、エンジニアでない方が「サーバーやデータベースを準備して環境構築を行う」のは、なかなか大変です。

そんなときに便利なのが、Google Sheetsをデータベース代わりに使う方法です。

今回はGoogle Apps Script（GAS）と組み合わせて、シンプルなWebアプリを作ってみました。

2. 全体構成イメージ

今回の仕組みは以下のようになります。

[Webページ] ⇔ [GAS (API)] ⇔ [Google Sheets]

Google Sheets：データの保存場所（1行＝1レコード）
GAS：APIサーバーとしてリクエストを処理（doGet/doPost）
Webページ（HTML/JS）：ユーザーが操作する画面

シンプルですが「Webアプリっぽい」体験ができます。

3. 実装手順

ステップ1：スプレッドシート準備

新しいシートを作成し、1行目に name | email | date を入力
URLからスプレッドシートIDをコピー
- 例）https://docs.google.com/spreadsheets/d/XXXXXXX/edit の XXXXXXX 部分

ステップ2：GASコードを作成

シートの「拡張機能 → Apps Script」で以下を貼り付けます。

const SHEET_ID = 'ここにシートID';   // ← コピーしたIDを貼る
const SHEET_NAME = 'シート1';

function doGet(e) {
  const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);
  const values = sheet.getDataRange().getValues();
  return jsonResponse(values);
}

function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);
  sheet.appendRow([data.name, data.email, new Date()]);
  return jsonResponse({ status: 'ok' });
}

function jsonResponse(obj) {
  return ContentService
    .createTextOutput(JSON.stringify(obj))
    .setMimeType(ContentService.MimeType.JSON);
}

ステップ3：ウェブアプリとしてデプロイ

デプロイ → 「新しいデプロイ」
種類は「ウェブアプリ」
アクセス権限は「全員」に設定　※セキュリティは考慮していません

このときにリクエストの許可が出ますので、許可してください。

無料のGoogleアカウントを使っている場合

以下のような表示が出ますので、画像に沿って操作してください。

「このアプリは確認されていません」

このアプリは Google による確認が済んでいません。よく知っている信頼できるデベロッパーの場合に限り続行してください。

順調に進むと、ウェブアプリのURLが発行されるので「コピー」してください。

ステップ4：テスト用HTMLを作成

ローカルのHTMLファイルでAPIを呼び出すコードを用意すると、ブラウザから実際に操作できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GAS APIテスト</title>
</head>
<body>
<h1>Google Sheets API テスト</h1>

<h2>追加</h2>
<input id="name" placeholder="名前">
<input id="email" placeholder="メール">
<button onclick="addData()">追加</button>

<h2>取得</h2>
<button onclick="getData()">取得</button>
<pre id="output"></pre>

<script>
const API_URL = "GASのURL";  // ← コピーしたURLを貼る

async function addData() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const res = await fetch(API_URL, {
    method: 'POST',
    body: JSON.stringify({ name, email })
  });
  const result = await res.json();
  document.getElementById('output').textContent = JSON.stringify(result, null, 2);
}

async function getData() {
  const res = await fetch(API_URL);
  const data = await res.json();
  document.getElementById('output').textContent = JSON.stringify(data, null, 2);
}
</script>
</body>
</html>