2021年7月19日(月)2021年7月18日(日) 投稿者: iwbjp

Google Apps ScriptのHTMLテンプレートでJSの配列を作成する方法

HTMLテンプレート側で配列作成

Google Apps ScriptではHTMLファイルとGoogleスプレッドシートを作成して、GASでシート内のデータをHTML側で読み込ませることができる。

例えば以下のようにTemplated HTMLを記述すれば簡単にデータを表示させることができる。

コード.gs

function doGet() {
  return HtmlService
    .createTemplateFromFile('index')
    .evaluate()
}

function getData() {
  return SpreadsheetApp
    .openById('1Bjil5T3BmyBGm9YlLJuo6Ndcf6aic4yofGDodXeC7fQ')
    .getSheetByName('シート1')
    .getDataRange()
    .getValues()
    .slice(1)
}

index.html

<!DOCTYPE html>
<html>
<body>
<ul>
  <? const data = getData(); ?>
  <? data.forEach(v => { ?>
    <li>id: <?= v[0] ?>, name: <?= v[1] ?></li>
  <? }) ?>
</ul>
</body>
</html>

サンプルのGoogleスプレッドシート

サンプルのWebページ

HTMLのscript内で使用する配列作成

GASのHTMLファイル内ではscriptタグも使用できるため、配列をそのまま使用したいことがある。

しかし、const data = <?= getData() ?>のようにTemplated HTMLを使用してそのまま受け取ると文字列になってしまう。

そのため、一度配列のまま使用するには一度Templated HTMLでforEachを使用して配列を作成する必要がある。

<? const data = getData(); ?>
<script>
const arr = []
<? data.forEach(row => { ?>
  arr.push([
    <? row.forEach(col => { ?>
      '<?= col ?>',
    <? }) ?>
  ])
<? }) ?>
</script>

ただし、配列処理などはgsファイル側で行うべきなので、特別な理由がない限りはこのやり方は非推奨。