GASの画面へ日付を返す｜Date型の変換

スプレッドシートの値をサイドバーへ返す処理で、日付の列を増やした途端に失敗する場合は、戻り値の型を確認します。getValuesはセルに応じてDateを返しますが、google.script.runではDateをそのまま受け渡しできません。

配列やオブジェクトの中にあるDateも対象です。表示する前にGAS側で文字列などへ変換し、画面へ返すデータの形を決めます。今回は時刻を持つ日時をUTCのISO文字列へ変える例で、締め日などの日付だけの意味を自動で変換する例ではありません。

対応している型へ変換する

公式のHTML Serviceの通信資料は、数値・真偽値・文字列・nullや、それらからなる配列・オブジェクトを扱えると説明しています。Date、関数などは使えず、内部に含む場合も失敗する条件です。

次の変換ではDateだった値をkind:"datetime"とISO文字列の組へ変えます。文字列だけだと普通の文章なのか日時なのか分かりにくいため、種類の印を残す設計です。空欄の文字列や、数値の0はそのまま保ちます。

練習用シート「日時練習」のA1:B3に、見出しと架空の日時を含む2件を用意します。シートのタイムゾーンと入力日時の意味も確認してください。GASから返す形の確認と、どの時刻として扱うかの判断は別です。

Code.gsでDateを含まない形にする

不正なDateや、想定していない型はエラーにします。Dateが見つかったからといって、空文字へ置き換えて情報を消さない例です。

function serializeSheetRows(rows) {
  return rows.map(function (row) {
    if (!Array.isArray(row)) throw new Error('2次元配列を指定してください');
    return row.map(function (value) {
      if (value instanceof Date) {
        if (!Number.isFinite(value.getTime())) throw new Error('日時を確認してください');
        return {kind: 'datetime', iso: value.toISOString()};
      }
      if (value === null || ['string', 'boolean', 'number'].includes(typeof value)) {
        if (typeof value === 'number' && !Number.isFinite(value)) throw new Error('数値を確認');
        return value;
      }
      throw new Error('画面へ返せない型があります');
    });
  });
}

function loadPracticeRows() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('日時練習');
  if (!sheet) throw new Error('日時練習シートがありません');
  return serializeSheetRows(sheet.getRange('A1:B3').getValues());
}

function openDatePreview() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('Index'));
}

たとえばDateが2026-11-01T00:00:00Zを表す場合、返す値は{"kind":"datetime","iso":"2026-11-01T00:00:00.000Z"}です。これは文字列を含む通常のオブジェクトで、Dateそのものを配列へ残しません。

Index.htmlで受け取った形を見る

練習用プロジェクトのIndex.htmlへ次を保存し、openDatePreviewを実行します。表示はJSONの確認までにし、ブラウザで日付を再解析する処理は加えません。

<!doctype html>
<html><head><meta charset="UTF-8"><base target="_top"></head>
<body>
  <pre id="rows">読み込み中</pre>
  <script>
    google.script.run
      .withSuccessHandler(function (rows) {
        document.getElementById('rows').textContent = JSON.stringify(rows, null, 2);
      })
      .withFailureHandler(function (error) {
        document.getElementById('rows').textContent = error.message;
      })
      .loadPracticeRows();
  </script>
</body></html>

文字列と日時の印が意図した列へ入っているか、空欄や0が消えていないかを確認します。結果はtextContentで文字として表示し、シート内の文章をHTMLとして実行する形にはしていません。

表示形式を変える前の確認

ISO文字列はUTCの日時なので、日本時間の画面表示と日付が違う場合があります。受け渡しができたことと、利用者が読みたい時刻で表示されたことを混同しないようにします。日付だけの項目には、別の種類や書式を決める方法が必要です。

公式のRange資料にも、Dateを含む値を対応する型へ変換する説明があります。ローカルでは日時・空欄・0・真偽値・不正Date・対象外の型を確認しました。Google上のサイドバー通信と表示は未実行です。サイドバーの基本とシートの読み取りを基に、小さな範囲から確認してください。