GASとVueでサーバレス社内チーム向け工数管理

##作った経緯

これまでスプレッドシートを使って社内チームの工数管理を行なっていたが、

「もう少し細かい工数管理がしたい。」
「集計がしずらい」
「残業管理もできれば」

みたいな話が上がってきたので、

元々スプレッドシートを使っていたので、
GASでフォームを使ってスプレッドーシートに情報が入っていくようなシステムをVueで作った。
技術的には GAS,Vue,スプレッドシート関数
と言ったところ。

##現時点で実装が出来たこと

• スプレッドシートでクライアント、プロジェクト、案件を管理
• ユーザーが投稿するフォームにはスプレッドシートのクライアント、プロジェクト、案件が選んだ内容でプルダウンが切り替わる。
• ユーザーは１日ごとに行なったクライアント_プロジェクト_案件_かかった時間をフォームから入力
• フォームがSUBMITされた内容を計算用シートにぶち込む。

##気をつけたところ

• 機密情報もあるので、基本クローズドなシステムであること

##実装方法
GAS＋Vue.jsでサーバレスなWebアプリ①
https://qiita.com/kyhei_0727/items/f409ab53bac931d4eb77
こちらを参考に進めさせてもらいました。

実装の流れは

1. スプレッドシートに必要なデータを入れる
2. Vueからユーザーの操作に合わせて.gsファイルに記述している関数を走らせる
3. .gsファイルに記述している関数からVueのDataをリアクティブに変更する

自分の頭の中にしか設計図はなかったので、上記の3工程を平行しながらテストアンドビルドを繰り返した。

以下に細かくシリーズ化して実装内容や詰まったところを掲載して行く予定。

##GASとVueでサーバレス社内チーム向け工数管理

1. Google Apps Script でHTMLファイルを作って表示。
2. VueのイベントハンドラとGAS関数のスプレッドシートデータ連携方法（その１）
3. VueのイベントハンドラとGAS関数のスプレッドシートデータ連携方法（その2）
4. VueからGAS関数でスプレッドシートにデータを入力