--- title: 【Google Apps Script Webアプリ】Vue.jsを使って非同期にスプレッドシートを読み取りデータを更新する。 tags: Vue.js GoogleAppsScript gas JavaScript author: merarli slide: false --- #はじめに 某社で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) #スプレッドシートにデータを書き込む 表示したいデータをシートに書き込む 1行目にはJSONで使う**key**を設定 2行目以降は**value**を設定 スクリーンショット 2019-03-06 午前1.27.04.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 } //引数にシート名を指定 //スプレッドシートで取得した2次元配列を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] SS 2018-11-09 21.44.50.png index.htmlに以下のコードを貼り付ける ``` index.html

【非同期通信】スプレッドシートのデータをWebアプリケーションで書き出す

~GASでVue.jsを使う~

``` ``google.script.run``を使って``コード.gs``のコードを動かす(非同期処理) ファイル構成は以下のようになっていればOK スクリーンショット 2019-03-06 午前1.30.27.png #Webアプリケーションとして走らせる 完成したら`コード.gs`と`index.html`を保存する 続いてWebアプリケーションとして導入する 導入ボタンを押す SS 2018-11-09 22.08.23.png SS 2018-11-09 22.09.45.png 許可を押す SS 2018-11-09 22.10.09.png 承諾を押す SS 2018-11-09 22.09.55.png 無事に導入できたので[最新のコードでテスト]を押す SS 2018-11-09 22.10.21.png 無事に以下のように表示されたら成功です! ![4e4fbfd773d6de1f61ac9976ecb75762.gif](https://qiita-image-store.s3.amazonaws.com/0/252959/2c17050d-31b2-35e4-7a91-3abc3dce4146.gif)