GASでWEBアプリケーションを作るときはちゃんと考えよう

この記事は、マイナビ Advent Calendar 2019 16日目の記事です。
この記事は、Google Apps Script + Vue.js + Vuetify で社内向けWebアプリケーションを作った話になります。
人生初のQiita記事のため、拙いですがお付き合いいただければ幸いです。

今年、新卒で入った際に初めて仕事を振られた際に、ついでにVue.jsに触れてみようと考えて作ったツールです。
そのため、いろいろと突っ込みどころの多いものとなりますので、アンチパターンのようなものとして読んでいただければ幸いです。

TL;DR

• 事前の調査をしっかりしましょう。
• Google Apps Script(以下GAS)を書くならclaspを使いましょう。
• GASである程度以上の大きさのwebアプリケーションを作るのはやめましょう。
• claspを使うなら、TypeScriptを使いましょう。
• Vuetifyは便利。

はじめに

今回作ることになったツールは、Excelファイルに記載されたスケジュール帳から、いい感じにデータを抽出するツールです。
マイナビは、比較的規模の大きな会社であるためか、いろいろな部署に改善の余地がある仕事が存在しています。
今回の部署では、毎日十何枚ものExcelファイルを印刷して、そこから手作業でデータを抽出していたそうなので、それを改善するために新しくツールを作ることになりました。

環境を選択する

当時の私は、この話を聞く数日前にGASでWebアプリケーションを作れると知ったばかりでした。
そのため、Excelファイルからいい感じに～という話を聞いた直後、すぐさま何も考えずにGASで実装することを思いつき、動き始めました。
今思えば、もうちょっといろいろ別の手段があったと感じますが、当時の私にはそんな考えはありません。

先輩たちも、内心やめたほうがいいとは思っていたのだと思いますが、多少であれば失敗の許される社内向けツールということもあってか、そのままGASで作るという案が通ってしまいました。

claspを使ってみる

当然ながら、すぐにこれが色々とまずい手法であることに気が付きました。
まず、直接オンラインエディタに書き始めたのですが、当然苦痛でしかありません。
すぐにvscodeで書いてコピペ、という書き方に移りましたが、vscode上ではエラーが起きてもわからないということが何度かあったため、ちょっとしたエラーが起きた時にそのままオンラインエディタ上で修正して、そのままローカル上に上書きするのを忘れてエラー修正を吹き飛ばすということを何度かしました。

2度3度と失敗すれば注意はするのですが、流石に改善する必要があると考えます。
そんな時に、検索の末たどり着いたのが、claspでした。

claspとは

Qiitaにいくつも記事があるのでざっくりと。
claspはGoogleの提供しているCLIツールです。
ローカル上にあるGASのソースをpushしたりpullしたりできます。

これを使うことで、コピペなどがなくなり、vscodeのターミナル上から直接webアプリケーションを開けるのでいちいちドライブからGASプロジェクトをひらいて～という手間が減りました。

TypeScriptを触ってみる

claspで便利になったのはいいのですが、便利になってくると、そこに隠れて今まであまり気になっていなかったことが気になってきます。
GASは、古いjavaScriptとスプレッドシート操作等のGoogleサービス関連の拡張で構成されています。そのため、例えばアロー関数やfilterメソッドといった便利な書き方が利用できません。
babelで変換も考えたのですが、どうせなのでTypeScriptを使ってみることにしました。

claspは、TypeScriptからのトランスコンパイル機能を備えています。
TypeScriptは、古いjavaScriptに沿った書き方はしなくてもよく、また学生時代にjavaを触っていたこともあってかTypeScriptの静的型付けがわかりやすくていいと感じられたので、開発がとても快適になりました。

静的型付けはいいぞ。

Vue-CLIを使う

肝心のフロントの部分ですが、実は今でもVue.jsのCDNを使っています。
一度、Vue-CLIを使って書こうとしたのですが、ビルドしてみたところ別のファイルを参照する形で出力されてしまったので、特に調べることもなくCLIツールを利用できないと考えてしまいました。(当然ながら、ちゃんとできます)

その結果、以下のようなものを大量生産する羽目に……

example.html

～前略～
const mainContent = {
  template: `
  <v-card class="mx-auto">
    <v-row align="center" justify="center">
      <v-col cols="11">
        <div v-if="isLoading"></div>
        <create-to-do v-if="isXXXXX" />
        <member-admin v-show="isYYYYY" ref="YYYYY" />
        <file-list v-show="isZZZZZ" ref="ZZZZZ" />
      </v-col>
    </v-row>
  </v-card>
`,
  data() {
    return {
      content: "XXXXX",
      isLoading: false
    };
  },
  components: {
    "XXXXX": XXXXX,
    "YYYYY": YYYYY,
    "ZZZZZ": ZZZZZ
  },
  methods: {
    changeContent: function(e) {
      this.content = e;
    }
  },
  computed: {
    isXXXXX: function() {
      if (this.content == "XXXXX") {
        return !this.isLoading;
      }
      return false;
    },
    isYYYYY: function() {
      if (this.content == "YYYYY") {
        return !this.isLoading;
      }
      return false;
    },
    isZZZZZ: function() {
      if (this.content == "ZZZZZ") {
        return !this.isLoading;
      }
      return false;
    }
  },
  watch: {
    content: function() {
      if (this.content == "ZZZZZ") {
        this.$refs.zzzzz.getzzzzz();
      } else if (this.content == "YYYYY") {
        this.$refs.yyyyy.getyyyyy();
        this.$refs.yyyyy.getzzzzz();
      }
    }
  }
};
～後略～

こんな感じなのが、1000行以上続いてしまっています。
時間が空き次第直そうと思いつつも、これ直すのどれくらいかかるんだろうと思っていたり。

Vuetifyを使う

こんなことに時間をかけてしまったので、デザインなんて考えていられませんでした。
そんな時に出会ったのが、Vuetifyです。

Vurtifyとは

Vuetifyは、美しく手作りされたマテリアルコンポーネントを備えたVue UIライブラリです。設計スキルは必要ありません—素晴らしいアプリケーションを作成するために必要なものはすべて手元にあります。

Vurtifyを使うことを決めたのは、公式が提供しているCDNがあることだったのですが、これが大成功でした。

いい感じの入力フォームや、ドロップダウンリストなどを特に何か意識したりせず書くことができます。
オーバーレイ表示なども変にJSやCSSを書かずにできるので、一気に完成させることができました。
ちょっとデザインがお堅いところがありますが、プロトタイプなどを作るときなどはとても便利だと思います。

おわりに

だいぶ長々とした記事となってしまいましたが、結局言いたいことは以下の五つです。

• 事前の調査をしっかりしましょう。
• Google Apps Script(以下GAS)を書くならclaspを使いましょう。
• GASである程度以上の大きさのwebアプリケーションを作るのはやめましょう。
• claspを使うなら、TypeScriptを使いましょう。
• Vuetifyは便利。

以上です。
お付き合いいただきありがとうございました。