「エンジニア育成教材」または「ガチのシステム開発ツール」としてのAppSheet

# はじめに
皆さんはじめまして。
[@Z-me](https://qiita.com/Z-me)こと、齋藤です。

この記事は[ABEJA Advent Calendar 2020](https://qiita.com/advent-calendar/2020/abeja)の７日目の記事です。

今回はAppSheetという「エンジニア育成教材」もしくは「ガチのシステム開発ツール」にもなる便利なツールをご紹介します。

本記事は、エンジニアの皆さんはもちろん、
「なんかプログラミングってできるようになりたいなぁ。」とか、
「エンジニアさんてすげぇなぁ、俺(私)もできるようになってみたいなぁ」とか
思っている非エンジニアの方にも読んで、触って、楽しんでもらえると幸いです。

## 超雑な自己紹介
株式会社ABEJAで主にUI周りのフロントエンドを開発や、システムの運用もしている(いわゆるDEVOPSと言われる)エンジニアです。
私自身ほとんど登壇等しないのですが、時々ABEJA Tech Blogで[「Atomic Design思考でVue.js×Plotly.jsでのグラフComponentを実装した結果」](https://tech-blog.abeja.asia/entry/atomic-design-vue-plotly)などの記事を書いたり、個人的に、はてなブログで[「Hajimeの妄言とTechの部屋」](https://dtm3110.hatenablog.com/)といった~~痛いタイトルの~~ブログを記事を書いていたりします。

# AppSheetってなに？
AppSheetとは、Google Cloudの機能の一つとして提供している、「インテリジェントなノーコードプラットフォーム」です。
(原文↓そのママ訳)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/d1f03168-8a79-2186-3c65-53e1905cd4c1.png)
AppSheetの最大の特徴は、基本的な処理がすべてコーディング不要で実装可能で、RDS、CloudSQLなどのクラウドDBだけではなく、Google SpreadSheet(以下、GSS)などの表計算ツールのデータと連携することができる点です。
作成したツールはWebアプリとしても、スマホのアプリとしても利用したり、公開したりすることができます。

__今回ブログを書くために作ったAppの[サンプルはこちら](https://www.appsheet.com/start/fd40f344-fddf-449c-baba-de96341e7aee)__

```※注意.txt
- Googleでログインが必要です
- プレビュー機能で生成されるページを共有しているだけなので、リンクが無効になる場合があります
```

## AppSheetでできること
前述してしまいましたが、AppSheetでは様々なデータを参照してアプリを作ることができます。
参照できるデータですが、下記のような様々な種類のデータを取り込むことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/b5350a79-346b-5947-f551-0ff68c137696.png)
一番特徴的なデータソースとして、GSSを使うことができます。
GSSはエンジニアの皆さんだけではなく、いろいろな業種の方が使っているかと思います。

- 目標数値管理したり
    - 日付でシートのコピーを複製しまくるのはやめよう
- 開発工数管理したり
    - GAS（Google App Script）もきちんとリファクタリングしておこう
- スケジュール管理したり
    - 工数自動計算してるとGood
- ドキュメント書いたり
    - そのドキュメント、GSSで作る必要ある？
- 絵を書いたり
    - ダメ絶対

さて、データを取り込んだので、取り込んだデータをApp側で表示に関してご紹介します。
AppSheetでは下記の8種類のUI表示をすることが可能です。

| Deck<br>デッキ | Table<br>テーブル |
|:-:|:-:|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/e2464c91-c406-b982-5819-5316fb38f1c0.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/c4c978b4-a7cb-e7e6-5855-9d76dab2d29f.png) |
| __Gallery<br>ギャラリー__ | __Detail<br>詳細__ |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/d33fb2fd-7144-b5f9-eea6-ea97a3021e52.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/d239370e-c33f-87bb-f260-4433516012e2.png) |
| __Map<br>マップ__ | __Chart<br>グラフ__ |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/8e5e5b9c-36ca-0b9f-0085-1084ebbb50ca.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/82125a22-81b1-1a87-2f4d-e556e8a64de5.png) |
| __Form<br>フォーム__ | __Dashboard<br>__ |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/070e5fb0-fcf7-256b-8ad9-5cd93a0d2812.png) | ![Interactive Dashboard_Calendar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/3c09780e-6cc6-8802-31cb-990f8855047f.gif) | 
| __Onbording<br>スライドショー__ | __Calendar<br>カレンダー__ |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/2b208dce-2845-8b78-3d52-da3bfea1a29a.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/47a7d22e-c2ad-6d69-3b6a-991b27a5d61f.png) |

AppSheetでは、データを受け取って表示する際、見た目(UI)の設定に関しても多くの設定項目があり設定することができます。
また、UIだけではなくUXに関しても色々カスタマイズすることが可能で、「ある処理を実行した後にメールを送信する」といった処理を追加することもできます。
AppSheetには、前述したようなメールの送信機能だけではなく、レポートの送信機能や、[カメラから文字認識をして自動で入力する機能(OCR)](https://youtu.be/aTsFpwnHRBw)など、様々な追加設定機能があります。

## AppSheetではまだできないこと
先程色々できることを紹介しましたが、このツールでできないこともまだあります。

前提条件として、このツールでは複数のデータソース(以下、テーブル)を組み合わせてアプリを作成することが可能であり、
DBの各種テーブルをそれぞれのデータソースとして取り込むことで、複数のテーブルを連携したシステムを構築することが可能です。
一方で、データの操作に関して、あるテーブルのデータを操作した際に関連付けられている別テーブルのデータの追加(C: Create)と読み込み（R: Read）は可能ですが、データの変更（U: Update）と削除(D: Delete)は基本機能として備わっていないという問題があります。(いわゆるSQLで言うところのTRIGGER処理が十分じゃない感じ)
※下図のようなイメージ
※ここで言うCURDはUMLの一つである、CURD図を作成する際に用いられる記号を流用しています。（意味は同じです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/dc2a8785-ef9c-81e1-4aaa-42e572421b7b.png)

上記の点から、ガチガチのシステムを構築するためにはいろいろな工夫が必要となってしまっています。

# エンジニア育成教材としてのAppSheet
それではやっと、本題に入ります。(長らくおまたせしました)

AppSheetはエンジニアの教育素材として、とても適していると考えています。
というのも、GSSという非エンジニアの方も馴染み深いツールをデータソースとして利用することができ、コーディング無しでアプリの開発できるためです。
他にも、設定を変更した際にリアムタイムで表示するビュワーもあるため、とてもかんたんにアプリを作ることができるという利点もあります。

## 簡単なアプリを作ってみよう
「簡単にできる」と言葉で書き連ねても、イメージが沸かないと思うので、実際に日々のランニングの距離と時間を記録するサンプルアプリを作ってみましょう。(目標１０分)

1. 新しいGoogleSpreadSheet（GSS）を作成
2. タグの名称をつける(今回は`RunningTime`)<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/2a083f74-1e51-e733-863a-2af1145ee8b7.png)
3. 一行目にデータの名称を追加
    - A列： `Date`、　B列: `Distance`、　C列: `Time`<br>↓こんな感じ
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/940fea14-aa54-79ec-3855-3cad93b73ddc.png)
4. [AppSheet](https://www.appsheet.com/)にアクセスし、`Start for Free`ボタンを選択
5. `Make a new app`から`Start with your own data`を選択
    - `Quick Start`の中に先程作成したGSSがあればそれを選択するだけでOK
6. `App name`にアプリケーションの名称を入れ、`Category`のところは作ろうとしているアプリに適しているものを選択してください(選択しなくても問題ないです)
7. Googleでログインしていると、`choose your data`からGoogleドライブのファイル選択画面が表示されるので、作成したGSSを選択<br>これでほぼ完成
8. AppSheetの`UX`から`RunningTime`を選択し、表示方法を指定
    - `View type`を`table`に設定(テーブル形式で表示)
    - `Position`を`left most`に設定(ツールバーの一番左に表示)
9. ↑と同じ項目上にある`Display`というボタンを押すと設定をさらに開くことができる
    - `Icon`から`running`を選択(ツールバーのアイコンを指定)
    - `Display name`を`Running記録`に変更（ツールバーの表示名が変更）
10. 完成！！

作ったばかりでは画像の通りデータが入っていないはずなので、右下にある`+`ボタンから追加してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/5be01e39-ee81-a347-a33e-c7ff510033a5.png)

## なぜエンジニア育成教材として適しているか
前述しましたが、GSSなどの馴染み深いツールを利用できたり、コーディングが不要だったりプレビューが常に表示されていたりと、非エンジニアの方でも普通に__アプリを作るという体験__をすることができるという点が大きいと考えています。
エンジニアの方であれば、初めてコーディングし、「Hello World!」の文字列を表示させるのに一喜一憂し、きちんと表示できたときに大きな達成感を得たことを覚えているかと思います。
`何かを達成する`という体験は、大きなモチベーションになるので、そのモチベーションを維持しながら、AppSheetを触っているだけでも開発の楽しさを得られるのではないかと思っています。

次に、AppSheetを使うことでエンジニアとして学ぶことのできることに関して
「コーディングしないんじゃ教材にならないじゃん」
と思っている人がいるなら、エンジニアを誤解しています。
コーディングとは何らかのアプリやソリューションを実現するためのツールを利用する方法であって、「どうやってそれを実現するか」ということをきちんとイメージできていなければ実装することはできません。
そして、実現方法をイメージできないまま、__ただ動く__ようにコーディングする場合はそれはただの負債になります。
持論になりますが、エンジニアとして必要なモノは、やりたいことを実現する方法を論理的に分解することができる論理的思考能力だと考えています。

AppSheetでは、`仮想行(Virtual Column)`という機能を用いた別テーブルへのデータの参照や、`Behavior`という機能を利用した追加処理（メール送信等）を付加することができます。
このように、やりたいことをどんどん増やしていくことで、「どのようにデータをVirtual Columnで作ったら良いだろう」とか、「〇〇を実現するためには△△の処理が終わった後に、新しく◎◎の処理を付ける必要がありそうだ」とかの論理的思考・開発方針のイメージを付ける訓練をすることができます。

※頑張ればこんな事もできる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/a1e96e21-87b9-f7b7-8e63-dc5073e0aea4.png)

# ガチのシステム開発ツールとしてのAppSheet
ここまで長々書いてきましたが、最後のコンテンツです。
~~長くなりすぎたのでサクッと短めにしますmm~~

## メリット
AppSheetを使ってガッツリ利用するソリューションとする場合下記の点が大きなメリットとなります

1. とにかくサクッと作れる
    - 開発工数は本当に少ないです。１週間あれば単純なシステムであれば、ほぼ構築することができます
    - CURD図やER図がかける人ならもっと早いかも
2. 接続できるデータソースが多い
    - Cloud Databaseとして、RDSやCLoudSQLと接続できる。という事実がとても大きく、大抵のDBと接続することができます。
    - 下記のモチベーションのときがAppSheetを利用する最良のタイミング
        1. 既存のDB汚い
        2. 別のDBにデータクレンジングしたDB作った
        3. とりあえずテーブルごとにCURDできるようにしたい ← ココ
3. 中間テーブルが不要
    - `Virtual Column`という機能が想像以上に有用で、`LookUp`関数を使うことで、対象のデータに直接参照することができる。
        - ApSheetの特性上、表示用のTableにデータを集める必要があるが、それによって、中間テーブルがなくても直接参照することが可能
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/fa61a5e3-f558-1519-6059-f31489bfadbe.png)
4. Spec機能
    - 複数DBがある場合、どんな連携をしているかがわかる便利機能
    - 「どんな連携してたっけ？」ってのがわかるのがとても良い点
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102773/1fd3fee4-71e6-0a70-cda3-3643aaa93db0.png)
5. データ読み込みが早い(早く感じる)
    - これは所感なんですが、5000レコード程度で、別テーブルから2・3カラム分のデータを参照していても、ほぼ待ち時間なく検索が可能
    - リストもしくはテーブル表示している際は、UI側がLazyLoadしているので、違和感なくサクサクデータを閲覧できる
6. できることがめっっっっっっっっっちゃ多い
    - できることが多すぎて悩むっていうデメリットすらあると思う
    - 実際に触っていると、個人的に作りたくなっちゃう
7. Google Cloudの一部になっているので、GCPのサポートに色々訊ける
    - レスは御存知の通りだいぶ早いです。
        - ※AppSheetの本体が日本じゃないので時差の問題はありますが…

## デメリット
ココまでAppSheetを絶賛してきましたが、もちろんデメリットも存在しています。

1. 全部英語
    - 説明もドキュメントもすべて英語なので、その部分に壁を感じてしまう可能性がある
    - 動画説明もあるがこれも英語なので注意
    - この部分はまだ言語対応していないだけだと信じて待つしかなさそう
2. データソース(Table)が増えると加速度的に難易度が上がる
    - 基本的に1Viewに対して１Tableという構成が理想だが、テーブルを分けている場合や中間テーブルがある場合は、Virtual ColumnとLookUpによるデータ参照が必要になってしまう
    - 複数テーブルにかかるデータを編集する際、入力フォーム用のTableを用意する必要があり、保存処理後に起動する`Behavior`を用いて様々な処理を追加する必要がある
3. DBのTRIGGERに準ずる機能が中途半端
    - 前述したとおり、該当Table以外のデータを更新する際は`Behavior`にて設定する必要があるが、Behaviorによる別Tableへの変更はレコードの新規追加のみ
    - データの更新や、特定データの削除等はDB側のTRIGGER機能を利用せざるを得ない
4. 構成管理ができない
    - コードがないので、構成管理等ができない
    - DEV、STG、PRODみたいに環境を分けることも不可

# おわりに
ここまで、「エンジニア育成教材」としてのAppSheetと、「ガチのシステム開発ツール」としてのAppSheetに関してご紹介してきました。
もちろんノンコードのツールなので、コーディングの勉強というものはできませんが、AppSheetによるアプリケーションの開発は、エンジニアが実際にシステムを開発していく中で重要な論理的思考能力に関しては十分養うことが可能です。
一方で、本当にProductionで運用しようと考える場合は、それこそきちんとシステムの開発要件等を明確にし、リリース方法や処理を`Behavior`に持たせるのかDBのTRIGGERに持たせるのかなどの要件を詰める必要があります。
所感としては、社内ツールとしてのデータの参照だけであれば、ガンガン使って良いと思います。
というのも、個々人が色々作ってみて、「どのように作っていくとよいか」や「チームで作る場合はどうしたらよいか」など様々な知見を集めることができ、徐々に大きなシステムの開発に利用していく事が可能だからです。

長々書いてきましたが、言いたいことを一言でまとめると
___結論： とにかく使って遊んでみよう___
です。

基本的に無料で作れますし、個人的な用途でも使えるので、ぜひぜひ作って遊んでみてください！

## お知らせ：ABEJA awaits your joining!
現在ＡＢＥＪＡでは一緒にＡＩの社会実装を進める仲間を募集しています！
世の中をアップデートする最前線の現場に、あなたも飛び込んでみませんか？
どんな人がＡＢＥＪＡで働いているのか知りたくありませんか？
まずは気軽にカジュアルインタビューから始めませんか？
[【募集職種一覧はこちら！】](https://hrmos.co/pages/abeja/jobs)
![IMG](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F138258%2F9e5d935a-d3c1-2347-d9b2-6ab11f694eed.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&w=1400&fit=max&s=e26807668f90b2c1aef40b09db339a8c)