GAS ウェブアプリが「読み込み中」で止まる・遅いときの切り分けと修正

Google Apps Script（GAS）のウェブアプリ（HtmlService + google.script.run）で、「画面が重い」「読み込み中のまま」と報告されたときに、推測ではなく計測で原因を特定して直す手順。2つの原因が重なりやすいので、両方を順に潰す。

0. まず「遅い」のか「止まっている」のかを分ける

• 1分待っても「読み込み中」のままなら、遅いのではなく止まっている。原因1を先に疑う。
• いずれ表示されるが数秒かかるなら、原因2。

画面側で切り分けられるように、最初に次を入れておく:

// 初回表示前に失敗したら、消えるトーストではなく画面にエラー文を残す
function reportError(where, e) {
  const message = String((e && (e.message || e)) || "不明なエラー");
  if (!state) document.querySelector("#app").textContent = "読み込みに失敗しました: " + message;
}
window.addEventListener("error", (ev) => reportError("window.error", ev.error || ev.message));
window.addEventListener("unhandledrejection", (ev) => reportError("unhandledrejection", ev.reason));
// google.script.run の成功ハンドラ内で描画が例外を投げたときも reportError を呼ぶ

注意: 利用者の画面からスクリプトプロパティへエラーを書かせる方法は、ウェブアプリを「アクセスしているユーザー」として実行していると記録できないことがある（編集権限のない利用者）。画面にエラー文を残す方法を必ず併用する。

原因1: 戻り値に Date が1つでもあると、全体が null で届く

• google.script.run は、サーバ関数の戻り値のどこかに Date が含まれていると、エラーにせずに戻り値全体を null にして成功ハンドラへ渡す。
• 症状: 画面に Cannot read properties of null (reading '<最初に読むキー>') が出るか、何も出ずに「読み込み中」のまま。
• 罠: シートの行（getValues() の結果）をそのまま返すと、日時列が Date になって混ざる。特定の条件（例: 期限切れの一覧に行が入ったとき）のときだけその行が戻り値に入るので、ある日を境に突然壊れる。サーバ側で JSON.stringify を通す経路（トリガーやテスト）では再現しない。

確定のさせ方（推測しない）

戻り値の中で Date の場所を列挙する関数を用意し、エディタ実行かトリガー経由で実行する:

function findUnsafeValues() {
  var hits = [];
  (function walk(v, path) {
    if (hits.length >= 20) return;
    if (v instanceof Date) { hits.push(path); return; }
    if (v && typeof v === "object") Object.keys(v).forEach(function (k) { walk(v[k], path + "." + k); });
  })(getBootstrap(), "bootstrap");
  return hits;
}

修正

画面へ大きなオブジェクトを返す関数は、JSON 文字列で返す。どこに Date が混ざっても、ISO 形式の文字列になって届く。

function getBootstrapJson() { return JSON.stringify(getBootstrap()); }

google.script.run.withSuccessHandler((json) => {
  if (!json) throw new Error("サーバから画面データが届きませんでした（応答が空）");
  state = JSON.parse(json);
  render();
}).getBootstrapJson();

原因2: シートを1枚ずつ getValues すると、往復だけで秒単位かかる

• getDataRange().getValues() は1回ごとにサーバと往復するので、空のシートでも1枚 0.3〜1秒かかる。10枚読めば約5秒。データ量はほとんど関係ない。

計測（シートごとの時間を出す）

function profileReads() {
  var out = {}, t0 = Date.now();
  SHEET_KEYS.forEach(function (k) { var t = Date.now(); modelRead(k); out[k] = Date.now() - t; });
  out.total = Date.now() - t0;
  return out;
}

修正: Sheets API の batchGet で1回にまとめる

1. appsscript.json に拡張サービスを追加する: "dependencies": {"enabledAdvancedServices": [{"userSymbol": "Sheets", "serviceId": "sheets", "version": "v4"}]}
2. 全シートを1回で読み、getValues() と同じ形に揃える:

function modelReadMany(keys) {
  try {
    var res = Sheets.Spreadsheets.Values.batchGet(SpreadsheetApp.getActiveSpreadsheet().getId(), {
      ranges: keys.map(function (k) { return "'" + SHEET_NAME[k].replace(/'/g, "''") + "'"; }),
      valueRenderOption: "UNFORMATTED_VALUE", dateTimeRenderOption: "SERIAL_NUMBER" });
    var out = {};
    keys.forEach(function (k, i) {
      var width = HEADER[k].length, rows = (res.valueRanges[i] && res.valueRanges[i].values) || [];
      out[k] = rows.slice(1).map(function (src) {
        var row = src.slice(0, width); while (row.length < width) row.push("");   // 末尾の空セルは省略されて返る
        row.forEach(function (v, c) {
          if (IS_DATETIME_COLUMN(k, c) && typeof v === "number")
            // シリアル0 = 1899-12-30 00:00（シートのTZ）。浮動小数の誤差で1ms手前に落ちるので必ず丸める
            row[c] = new Date(Date.UTC(1899, 11, 29, 24 - TZ_OFFSET_HOURS) + Math.round(v * 86400000));
        });
        return row;
      }).filter(function (r) { return r.some(function (v) { return v !== ""; }); });
    });
    return out;
  } catch (e) {
    var fb = {}; keys.forEach(function (k) { fb[k] = modelRead(k); }); return fb;   // 失敗したら従来経路
  }
}

切り替える前に、本番データで新旧を突き合わせる（必須）

型の違い（日付が通し番号で返る、など）で静かに壊れるのを防ぐため、シートごとに比較し、不一致があれば行・列・両方の値を出す:

keys.filter(function (k) { return JSON.stringify(many[k]) !== JSON.stringify(modelRead(k)); });

実例: 不一致は、日時列が 03:45:03.999Z と 03:45:04.000Z の1msずれだけだった。Math.round(v * 86400000) で解消。不一致が0件になってから切り替える。

結果の目安

• 画面データの読み込み: 約5.1秒 → 約1.1秒（シートの読み込みは5,120ms → 約390ms）
• 「読み込み中」で止まる問題: JSON 文字列で渡すことで解消