【GAS】スプレッドシートをJSONデータ化して予約状況管理ツールを作る（Part2）

前回の続きです。

スプレッドシートを準備する
AppsScript
関数の概要
スプレッドシートのデータ取得
ヘッダーの設定
JSONデータの作成
JSON出力の生成と返却
重要なポイント
まとめ

スプレッドシートを準備する

まずは、土台になるスプレッドシートを準備します。

テーブルの基本構造を定義します。

「日」「時間」「予約状況」のシンプルなシートです。

AppsScript

Google SpreadsheetのデータをJSON形式で提供するウェブアプリケーションを作成するために、Apps Scriptを作成します。

function doGet() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("data"); // シート名を適宜変更
  const data = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();
  
  const headers = data[0]; // 2行目（データの1行目）をヘッダーとして使用
  const jsonArray = [];
  
  for (let i = 0; i < data.length; i++) { // ここを0から始めるように変更
    let rowObject = {};
    for (let j = 0; j < headers.length; j++) {
      rowObject[headers[j]] = data[i][j];
    }
    jsonArray.push(rowObject);
  }
  
  const jsonOutput = JSON.stringify(jsonArray);
  return ContentService.createTextOutput(jsonOutput).setMimeType(ContentService.MimeType.JSON);
}

関数の概要

function doGet() {
  // 関数の内容
}

doGet()関数は、HTTPのGETリクエストを受け取った際に実行される特別な関数です。ウェブアプリケーションのエントリーポイントとなります。

スプレッドシートのデータ取得

const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName("data");
const data = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();

SpreadsheetApp.getActiveSpreadsheet()で現在のスプレッドシートを取得します。
ss.getSheetByName("data")で”data”という名前のシートを取得します。
sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues()で2行目から最終行まで、全列のデータを2次元配列として取得します。

ヘッダーの設定

const headers = data[0];

データの1行目（スプレッドシートの2行目）をヘッダーとして使用します。

JSONデータの作成

const jsonArray = [];
for (let i = 0; i < data.length; i++) {
  let rowObject = {};
  for (let j = 0; j < headers.length; j++) {
    rowObject[headers[j]] = data[i][j];
  }
  jsonArray.push(rowObject);
}

各行のデータをオブジェクトに変換し、jsonArrayに追加します。
ヘッダーの値をキーとして、各セルの値をそのキーの値として設定します。

JSON出力の生成と返却

const jsonOutput = JSON.stringify(jsonArray);
return ContentService.createTextOutput(jsonOutput).setMimeType(ContentService.MimeType.JSON);

JSON.stringify()でJSONArray全体を文字列に変換します。
ContentService.createTextOutput()でテキスト出力を作成し、MIMEタイプをJSONに設定します。

あとは、こちらをデプロイしてHTML内のJavaScript部分のURLに設定すれば、JSONでデータ連携できます。

重要なポイント

データ構造: スプレッドシートの2行目がヘッダーとして使用され、それ以降の行がデータとして扱われます。
動的なデータ取得: sheet.getLastRow()とsheet.getLastColumn()を使用することで、データの行数や列数が変更されても適切に対応できます。
JSONフォーマット: 各行のデータがJSONオブジェクトとして表現され、全体が配列としてまとめられます。
MIMEタイプ設定: 出力のMIMEタイプをJSONに設定することで、クライアント側で適切にJSONとして解釈されます。