【GAS】Googleフォームの回答をリアルタイムにWeb表示する仕組みを作る（Part2）

第1章で仕組みを理解しました。ここでは、実際のコードを噛み砕いて解説します。

---

GASのコード

function getSurveyData() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheets()[0]; 
  const data = sheet.getDataRange().getValues();
  const answers = data.slice(1).map(row => row[1]).filter(ans => ans);
  return answers;
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

解説

• getSurveyData()
  • 一番左のシートからデータを取得
  • 1行目を除外し、B列だけを抽出
  • 空白を除外し、回答配列を返す
• doGet()
  • Webアプリとしてアクセスされた時に index.html を返す

---

HTMLのコード

<div id="answers">読み込み中...</div>
<script>
  function renderAnswers(data) {
    const container = document.getElementById("answers");
    container.innerHTML = "";
    if (!data || data.length === 0) {
      container.innerHTML = "<p>まだ回答がありません</p>";
      return;
    }
    data.slice(-10).reverse().forEach(ans => {
      const div = document.createElement("div");
      div.className = "card";
      div.textContent = ans;
      container.appendChild(div);
    });
  }

  function refreshData() {
    google.script.run.withSuccessHandler(renderAnswers).getSurveyData();
  }

  refreshData();
  setInterval(refreshData, 5000);
</script>

解説

• renderAnswers()
  回答配列を受け取り、最新10件をカード形式で表示
• refreshData()
  GASの getSurveyData() を呼び出して最新データを取得
• setInterval
  5秒ごとに refreshData() を呼び出し、自動更新を実現

---

まとめ

第2章では、コードがどのように動作するのかを理解しました。
次章では、実際に公開して使える状態にする手順と応用方法を紹介します。