【Google Apps Script Webアプリ】Vue.jsを使って非同期にスプレッドシートを読み取りデータを更新する。


#はじめに
某社でGASのWebアプリを用いて社内ツールを作っている現在大学3年生(就職活動中)
社内ツールは主にjQueryで実装してきたが、Vue.jsを使えばもっと楽に作れるのではないかと勉強を始めた。

スプレッドシートのデータをWebアプリケーションから**非同期通信**を使って表示する。
これを利用すれば**ページ移管**なしで、データを更新することができる。

今回はVue.jsを利用してWebアプリケーションを作成する。
[jQueryで実装したのはこちら](https://qiita.com/merarli/items/2466ca6e7ae32d946aa5)
##デモ
![4e4fbfd773d6de1f61ac9976ecb75762.gif](https://qiita-image-store.s3.amazonaws.com/0/252959/1385a867-e7b7-7b5d-6f16-f9ddcb057280.gif)


#スプレッドシートにデータを書き込む
表示したいデータをシートに書き込む
１行目にはJSONで使う**key**を設定
２行目以降は**value**を設定

<img width="613" alt="スクリーンショット 2019-03-06 午前1.27.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/8a037407-12f8-f7e3-077d-3a97327febbf.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
  
}
//引数にシート名を指定
//スプレッドシートで取得した２次元配列をJSONに変換
//src https://qiita.com/takatama/items/7aa1097aac453fff1d53
function getData(sheetName) {
  var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}
```

続いてHTMLファイルを作成する

ファイル名を ``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に以下のコードを貼り付ける

``` index.html
<!DOCTYPE html>
<html>

<head>
</head>

<body>

<h2>【非同期通信】スプレッドシートのデータをWebアプリケーションで書き出す</h2>
<h3> ~GASでVue.jsを使う~</h3>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <button @click="get_sheet">データ更新</button>

  <ul>
    <li v-for="list in lists">
      <span>{{list.name}}</span>
      <span>{{list.area}}</span>
    </li>
  </ul>

</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      lists: null
    },
    methods: {
      get_sheet: function () {
        //GAS内のコード読み出し
        google.script.run
          .withSuccessHandler(function (data) {
            // GAS正常終了時の処理
            //★ここが一番時間がかかる★
            console.log('正常　取得したデータ: ' + JSON.stringify(data));

              // this.lists = data; この処理だとDOMが更新されない

            vm.lists = data;
          })
          .withFailureHandler(function (data) {
            // GASエラー時の処理
            console.log('エラー　取得したデータ: ' + JSON.stringify(data));
          })
          .getData('シート1');
      }

    }

  })
</script>
</body>

</html>

```
``google.script.run``を使って``コード.gs``のコードを動かす(非同期処理)

ファイル構成は以下のようになっていればOK
<img width="475" alt="スクリーンショット 2019-03-06 午前1.30.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/252959/8f5adee6-5f1e-e957-18d7-27b6f29c8b55.png">


#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">


無事に以下のように表示されたら成功です!
![4e4fbfd773d6de1f61ac9976ecb75762.gif](https://qiita-image-store.s3.amazonaws.com/0/252959/2c17050d-31b2-35e4-7a91-3abc3dce4146.gif)