VueのイベントハンドラとGAS関数のスプレッドシートデータ連携方法（その１）

こちらの記事は
[GASとVueでサーバレス社内チーム向け工数管理](https://qiita.com/taromorimotohf/items/711d01557c7b08b842f1)

の詳細記事その②です。

##スプレッドシートにデータを用意する
社内チームの要望で「クライアント」「プロジェクト」「案件」という３つのシートが連携できるようにシートを分けて項目を入力したスプレッドシートを作成しました。
今回は仮で家族からの料理リクエストとして

```
クライアント→家族
プロジェクト→料理名
案件→料理方法（種類）
```

としてみました。

**クライアント→家族**
<img width="450" alt="スクリーンショット 2018-08-08 16.01.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/3cdce44a-fb55-9dfb-af40-000ccf44efe4.png">

**プロジェクト→料理名**
<img width="574" alt="スクリーンショット 2018-08-08 16.02.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/71bbc3a6-4d19-7612-d2ab-afcd5dd47ab1.png">

**案件→料理方法（種類）**
<img width="861" alt="スクリーンショット 2018-08-08 16.07.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/6f41a38c-02ba-8f27-d932-021f6a0a15dd.png">

**全て親→子→孫**

という感じで紐づいて入力しています。
ここら辺のスプレッドシート関数は下記が参考になりました。

[Googleスプレッドシートで他のセルの内容に応じてプルダウンリストの内容を変更する](https://dendensouken.net/googlespreadsheet01-6cdec44a912d)

##Vueを使えるように準備
index.htmlにCDNでVueを読み込みます。
<img width="400" alt="スクリーンショット 2018-08-08 12.26.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/83af627f-7f10-841e-6c67-e272465f4322.png">

js.htmlにVueを使う記述を書きます。
<img width="337" alt="スクリーンショット 2018-08-08 12.26.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/913fc40c-1509-183e-0897-b620c7f9f909.png">

テスト環境で以下の様になっていればひとまずOK。
<img width="557" alt="スクリーンショット 2018-08-08 13.18.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/36aeccf3-4cb8-afd8-85a6-9f724cd7691a.png">



##GASを使ってスプレッドシートの内容をVueのDataで扱う
ユーザーの動作想定は

1. 「クライアント」のシートを初期で読み込んで配列にしてVueのDataに入れます。
2. 「クライアント」の内容を選んだタイミングでそのクライアント名を関数に渡して、「プロジェクト」のシートA列に該当するクライアントがあればそのB列から横の値を配列で返す。
3. 「プロジェクト」の内容を選んだタイミングで2.同様に案件の横の値を配列で返す。

という形で案件まで選んでもらって工数（時間）を入力してもらう。

という動作を想定しています。

スプレッドシート関数に関しては、色々と情報が転がってますので、そちらをご覧ください。


まず、.gsファイルに記述した関数をVueで動かすには、下記を参考にさせてもらいました。

[GAS＋Vue.jsでサーバレスなWebアプリ](https://qiita.com/kyhei_0727/items/761aabac5d6ab6807249)

ほぼ上記ページにある方法でGASファイルからVueのmethodに記述を入れて動かす関数までは出来ます。


```
// クライアント一覧を取得
function getSheetDataCliant(){
  var spreadSheetID = "スプレッドシートID";
  var sheetName = "クライアント";
  var res = SpreadsheetApp.openById(spreadSheetID).getSheetByName(sheetName).getDataRange().getValues();
  res = Array.prototype.concat.apply([], res);
  return res;
}
```
上記関数をGASに記述します。

```
google.script.run
 .withSuccessHandler(this.initData)
 .withFailureHandler(function(arg){
  console.log(arg)
  alert("データの取得に失敗しました。");
}).getSheetDataCliant();

```
上記GASを呼び出すスクリプトをVueのcreatedプロパティに記述します。

```
<select value="" id="cliant01">
 <option v-for="row in cliantArray">{{ row }}</option>
</select>
```
上記タグをindex.htmlに記述します。
全体像は以下です。

**CODE.gs**
<img width="824" alt="スクリーンショット 2018-08-20 13.06.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/ba07d72e-855c-c847-d38e-5e8b1d7f3ec2.png">
**index.html**
<img width="474" alt="スクリーンショット 2018-08-20 13.04.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/919a2064-5f22-88a2-1eee-76b03281e8f5.png">
**js.html**
<img width="371" alt="スクリーンショット 2018-08-20 13.04.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/74845efb-40ff-5f62-ff8f-5366cd001a28.png">
**結果**
<img width="539" alt="スクリーンショット 2018-08-20 13.03.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/750d6b76-3681-f0bf-31a8-2dd5151d4894.png">

こんな感じで表示されればひとまずOKです。

続いてプルダウンの選ばれた内容から、動的に紐づいたプルダウンの中身の切り替えの実装を行います。

[続きはこちらです。](https://qiita.com/taromorimotohf/items/febfcb7a338078d9561d)