Google Apps Scriptからスプレッドシート、HTMLとのデータ受け渡し備忘録

グレンジ [Advent Calendar 2021](https://qiita.com/advent-calendar/2021/grenge) 14日目の記事を担当しました、k_kimura_01 と申します。
グレンジでサーバサイドエンジニアをしております。

Google Apps Scriptを使って簡単なWebアプリ作りたいなと思い、スプレッドシートやHTMLとのデータ受け渡し方法を軽くまとめました。

取得やセットの仕方は他にも色々あるようなので以下も参考に。

[Google Apps Script リファレンス](https://developers.google.com/apps-script/reference)


#使用したスプレッドシートの設定値

![スプレッドシート更新前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218917/70d23b9d-bc12-21d9-356d-868c98259fa7.png)

#GAS ← スプレッドシート

```js:コード.gs
/**
 * SpreadSheetから値を取得する
 */
function getSpreadSheetData() {
  // 指定IDのスプレッドシート取得
  var spreadSheet = SpreadsheetApp.openById('xxxxx');
  // 指定の名前のシート取得
  var targetSheet = spreadSheet.getSheetByName('xxxxx');

  // getRange(row, column) A2を取得
  var range1 = targetSheet.getRange(2, 1);
  // セルの値を取得　結果：aaa
  Logger.log(range1.getValue());

  // getRange(row, column, numRows) A2:A5を取得
  range1 = targetSheet.getRange(2, 1, 4);
  // セルの値を配列で取得 結果：[[aaa], [bbb], [ccc], [ddd]]
  Logger.log(range1.getValues());

  // getRange(row, column, numRows, numColumns) B2:C4を取得
  range1 = targetSheet.getRange(2, 2, 3, 2);
  // セルの値を配列で取得 結果：[[eee, hoge1], [fff, hoge2], [ggg, hoge3]]
  Logger.log(range1.getValues());
}
```

#GAS → スプレッドシート

```js:コード.gs
/**
 * SpreadSheetへ値をセットする
 */
function setSpreadSheetData() {
  // 指定IDのスプレッドシート取得
  var spreadSheet = SpreadsheetApp.openById('xxxxx');
  // 指定の名前のシート取得
  var targetSheet = spreadSheet.getSheetByName('xxxxx');

  // getRange(row, column) E2を取得
  var range1 = targetSheet.getRange(2, 5);
  // 取得したセルに値をセット
  range1.setValue('abc');

  // getRange(row, column, numRows) F2:F5を取得
  range1 = targetSheet.getRange(2, 6, 4);
  // 取得した範囲のセルに値を配列でセット
  range1.setValues([['10'], ['20'], ['30'], ['40']]);
}
```

#GASからスプレッドシートへ値をセットした結果

![スプレッドシート更新後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218917/568e0153-4b65-3751-28cc-739b4dd358bb.png)

E2とF2:F5に値がセットされている。

#HTMLの設定値

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      messageA:<?= messageA ?><br>
      messageB:<?= messageB ?><br>
    </div>
    <?
      var message = getMessage();

      output.append('<p>getMessage:' + message + '</p>');
    ?>
    <form method="post" action="https://script.google.com/xxxxx/exec">
      メッセージ：<input type="text" name="postMessage">
      <input type="submit" value="送信">
    </form>
    <div>
      messageC:<?= messageC ?><br>
    </div>
  </body>
</html>
```

#GAS → HTML（GETリクエスト）

```js:コード.gs
/**
 * GETリクエスト
 */
function doGet() {
  var htmlTemplate = HtmlService.createTemplateFromFile('index');
  // html側で参照する変数に値をセット
  htmlTemplate.messageA = 'hoge';
  htmlTemplate.messageB = 'fuga';
  htmlTemplate.messageC = '';
  return htmlTemplate.evaluate();
}
```

HTML側でmessageA、messageB、messageCを変数として参照できる。
例：

```
messageA:<?= messageA ?><br>
```

#GAS → HTML（メソッドを用意）

```js:コード.gs
/**
 * messageを取得する（HTMLから呼び出しする）
 */
function getMessage() {
  var message = 'piyo';
  return message;
}
```

HTML側でgetMessageメソッドを使って値を取得できる。
例：

```
<?
  var message = getMessage();

  output.append('<p>getMessage:' + message + '</p>');
?>
```

#HTML側の取得結果（GETリクエスト、メソッド）

![html更新前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218917/63367836-0228-f5d8-7287-013b9ae3fcca.png)

#GAS ← HTML（POSTリクエスト）

```js:コード.gs
/**
 * POSTリクエスト
 */
function doPost(e) {
  var htmlTemplate = HtmlService.createTemplateFromFile('index');
  htmlTemplate.messageA = 'hoge';
  htmlTemplate.messageB = 'fuga';
  // POSTで受け取ったpostMessageの値をセット
  htmlTemplate.messageC = e.parameter.postMessage;
  return htmlTemplate.evaluate();
}
```

#HTML側の取得結果（POSTリクエストされた値）

![html更新後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218917/af24a39f-a730-5aae-10b7-084ce3ac03f0.png)

メッセージのテキストボックスに「foo」と入力して「送信」ボタンを押すと、messageC:の所に入力された値が出力される。

#おわりに

こういったデータ受け渡し関連は他にも丁寧に説明されているサイトなど他にもあるのですが、ひとまず備忘録としてまとめてみました（´・ω・｀）
何かの参考になれば幸いです。