【GAS×JS】スプレッドシートの情報を取得してサイトに表示する方法

// WebアプリにPOSTリクエストが来たときに実行される関数（前回作成済分）
function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var range = sheet.getRange("B1");

  // 現在の値を取得。空だった場合は0として扱う
  var count = range.getValue() || 0;

  // カウントを1増やして、その値をB1セルに設定
  count += 1;
  range.setValue(count);

  // スプレッドシートへの変更を即時反映
  SpreadsheetApp.flush();

  // 応答として、更新後の数値をテキストで返す
  return ContentService
    .createTextOutput(String(count))  // 数値を文字列に変換して返す
    .setMimeType(ContentService.MimeType.TEXT);
}

// WebアプリにGETリクエストが来たときに実行される関数
function doGet(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  // B1とB2の値を取得
  var count = sheet.getRange("B1").getValue() || 0;
  var message = sheet.getRange("B2").getValue() || "";
  
  // JSON形式でデータを返す
  return ContentService
    .createTextOutput(JSON.stringify({
      count: count,
      message: message
    }))
    .setMimeType(ContentService.MimeType.JSON);
}

<div class="container">
  <div class="count-display">
    現在のカウント: <span id="current-count">読み込み中...</span>
  </div>
  <div class="message">
    メッセージ: <span id="message">読み込み中...</span>
  </div>
  <button id="count-button">クリック！</button>
</div>

// GASで発行したWebアプリのURLをここに貼り付けてください
const SHEET_URL = "★GASのURL★";

// データを取得して表示する関数
async function fetchAndDisplayData() {
  try {
    // GETリクエストでデータを取得
    const response = await fetch(SHEET_URL);
    const data = await response.json();
    
    // 取得したデータを表示
    document.getElementById("current-count").textContent = data.count;
    document.getElementById("message").textContent = data.lastUpdate || "未更新";
  } catch (error) {
    console.error("データの取得に失敗しました:", error);
    document.getElementById("current-count").textContent = "エラー";
    document.getElementById("message").textContent = "エラー";
  }
}

// ページ読み込み時にデータを取得
fetchAndDisplayData();

// クリック数をカウントする関数（前回作成済分）
document.getElementById("count-button").addEventListener("click", () => {
  // fetch関数でPOSTリクエストを送る（GASが受け取ってカウント）
  fetch(SHEET_URL, { method: "POST" })
    .catch(() => {
      // 通信に失敗した場合のエラーハンドリング
      alert("送信エラーが発生しました");
    });
});