Google Apps Script(GAS) スプレッドシートの値を非同期でwebアプリケーションに表示する方法


#はじめに
Google Apps Script(GAS) スプレッドシートの情報をWebアプリケーションから非同期通信を使って表示する。
これを利用すればページ移管なしで、情報を更新することができる。

JavaScriptライブラリとして、jQueryを使用している
[vue.jsで実装したのはこちら](https://qiita.com/merarli/items/e82299fb91e066e714fe)

##デモ
![fed86b9b3b38e661c8c6add47c42d323.gif](https://qiita-image-store.s3.amazonaws.com/0/252959/b842d678-16d9-60d4-ba2c-a2d5f92e36da.gif)



#スプレッドシートにデータを書き込む
今回は２次元配列のデータをWebアプリケーションとして表示するため以下のようなデータを入れてみる

<img width="596" alt="SS 2018-11-09 21.34.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/4d3b7e01-6606-ce0b-b56e-74d1e632c01e.png">

ツール　> スクリプトエディタを立ち上げる
<img width="697" alt="SS 2018-11-09 21.35.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/3bdc4774-3c8e-6916-e1ba-5956cc92615f.png">

#コードを書く
コード.gsに以下を貼り付ける

```js:コード.gs
function doGet(e) {  
  htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  
  htmlOutput
  .setTitle('GASであそぼ')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  
  return htmlOutput
  
}

function myFunction() {
  //アクティブじゃないシートの取得 名前指定で取得
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName('シート1');
  
  //シート内の最終行取得
  //1,1~sheet.getLastRow(),sheet.getLastColumn()を取得 　★書き込まれている範囲を全部取る★
  var range = sheet.getRange(1,1,sheet.getLastRow(),sheet.getLastColumn());
  
  //取得した全配列をdataにいれる
  var data = range.getValues();
  Logger.log(data[0][0]);
  
  return data;
}
```

続いてHTMLファイルを作成する
<img width="537" alt="SS 2018-11-09 21.44.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/83b8b203-be2a-22ae-3c86-3eb65d537054.png">

ファイル名を ``index``して[OK]
<img width="572" alt="SS 2018-11-09 21.44.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/a48a24e7-125b-132e-4e4f-320e34fbc4f9.png">

index.htmlに以下のコードを貼り付ける
JavaScriptライブラリとしてjQueryを使用

``` index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  
  <h1>表の書き出し</h1>
  <!-- クリックしたら index.html内のgetData()が呼び出される-->
  <button onclick="getData()">書き出し</button>
  <!-- resultのdivの中に書き出す -->
  <div id="result"></div>
  
  
  <script type="text/javascript">
  
  function getData(){
    google.script.run
    .withSuccessHandler(function(data) {
      // GAS正常終了時の処理
      //★ここが一番時間がかかる★
      console.log("正常　取得したデータ: " + data);
      
      //書き出し用の関数呼び出し
      outPut(data);
    })
    .withFailureHandler(function(data) {
      // GASエラー時の処理
      console.log("エラー　取得したデータ: " + data);
    })
    .myFunction();
  }
  
  
  function outPut(data){
    //テーブルタグとして出力
    var html = "";
    html += "<table class='table'>";
    html += "<tr>"
    html += "<th>名前</th>";
    html += "<th>住所</th>";
    html += "</tr>";
    for(var i = 0, l = data.length; i < l; i++) {
      html += "<tr>";
      html += "<td>" + data[i][0] + "</td>";
      html += "<td>" + data[i][1] + "</td>";
      html += "</tr>";
    }
    html += "</table>";
    
    $('#result').html(html);
  }
  
  
  </script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>

```

`function getData()`を呼び出すとGAS内にある`myFunction()`が走り`data`にデータが入る
その`data`を描画用の関数`function outPut(data)`に引数として渡す

#Webアプリケーションとして走らせる
完成したら`コード.gs`と`index.html`を保存する
続いてWebアプリケーションとして導入する

導入を押す
<img width="630" alt="SS 2018-11-09 22.08.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/0be0515e-cd45-9789-5ef8-c918001bc85d.png">
<img width="469" alt="SS 2018-11-09 22.09.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/35274dbc-ddb9-95c8-042e-9093ee398206.png">

許可を押す
<img width="655" alt="SS 2018-11-09 22.10.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/64597f72-972d-ef65-d042-d647d74e13c7.png">

承諾を押す
<img width="568" alt="SS 2018-11-09 22.09.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/3440c47b-c51f-be26-b10e-0d39addee20e.png">

無事に導入できたので[最新のコードでテスト]を押す
<img width="482" alt="SS 2018-11-09 22.10.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/46fcf6be-9136-9912-e1ff-480aab809496.png">


無事に以下のように表示されたら成功です!
![fed86b9b3b38e661c8c6add47c42d323.gif](https://qiita-image-store.s3.amazonaws.com/0/252959/3296b4d7-8ccc-a24d-6b3b-668abaa52ca9.gif)