ReactでGoogleスプレットシートをデータベースとして使用する方法を比較してみる

**フロントをReactで実装し、一時的なデータベースとしてGoogleスプレットシートを使用する**のが、**「MVPを超短期間で納品する」**という目的からは有力な選択肢であると思いました。
JAMStackの流行に乗るならば、「**GoogleシートをHeadless CMSとして使用する**」と言い換えても良いでしょう。

いくつか手法があり、実際に試してみました。
まだリサーチ中なので、今後も順次追加・更新予定です(半分以上WIP。。。)。

## Tabletop×`useEffect`フック【一番お手軽】

単純にReactコンポーネント内でGoogleシートからデータを取得する方法としては、**`useEffect`フック内で`tabletop`ライブラリを使用するのが最もお手軽な方法**でした。

なんと言ってもGoogle Cloud PlatformのSheets APIからAPIキーを取得する必要がありません。
使用したいGoogleシートのID（urlの一部）さえあればOKです。

デメリットとしては下記です。

- 複数のシートからデータを取得するのが煩雑(受け取るデータがリスト型からオブジェクト型？になるためパースする必要がある)
- シートの途中で欠損データ（空のデータ）があるとそこで処理が終了する
- 公式のgithubレポジトリ上で2020以降の使用は控えるように声明が出ている

一枚のシートから取得するだけならこれで良いかもしれません。


## [WIP]`Papa Parse`【tabletopの公式リプレイス先】

`tabletop`は公式レポジトリ上で2020年以降の使用は控えるよう明記されています。

>Tabletop was created in about 1995, back when we had to remember to disable call waiting when dialing into Compuserve. Now that it's 2020, Google is shutting down the infrastructure that Tabletop relies on.

そして、代わりに推奨されているのが`Papa Parse`です。

>Instead of Tabletop, we're going to use Papa Parse. You still need to share your spreadsheet and all of that (see below), but the changes are actually pretty tiny! I've added a file where you can see a full example of doing it, but the quick version is:

すみません、こちらはまだ試せていません。
（誰か代わりに試してくれないでしょうか）

## Metis【今のところ最有力】

MetisはGoogleシートをデータベースとして使用するためのReactのHOC(高階コンポーネント)です。
ちなみにMetisはギリシャの女神の名前から取られているそうです。お洒落。

`<Provider>`コンポーネントで`<App>`コンポーネントをラップするので、使用感としてはReactのContext APIに近いのかもしれません。
複数のシートも簡単に扱えます。
Next.jsを使わず、**ReactのSPAとして開発するならMetis**を使用するつもりです。

これから動的なルーティングの実装方法やReduxと組み合わせる方法を調べます。

## [WIP]Next.jsのSSGを使用する

ほぼメディアのようなReactアプリなら、いっそ静的化しておきたいところですね。
しかし、コンテンツ数が膨大な場合はビルドが長時間化するという欠点があります。
数百程度なら問題ないと思いますが、１〜２万件あるような場合だとSSGは不適、だそうです（かみむらさんに相談させて頂きました）。
コンテンツ数が膨大な場合は、後述のNext.jsのISRを使うと良いそうです。

## [WIP]Next.jsのISRを使う

**Next.jsでSSGする際、コンテンツ数が膨大（１〜２万件）だとビルドが超長時間化してしまいます**。
そこでかみむらさんから勧められたのがNext.jsの**ISR**でした。
が、まだ試せていません。
Next.jsはきちんと使ってみたいと思っていたため、時間をとって学ぶ予定です。

## [WIP]GoogleシートをFirestoreにimportする

GASを使うとGoogleシートの内容をFirestoreにexportできます。
**firestore向けに書いた既存のコードをそのまま流用できる**のは大きな利点です。

非エンジニアでも簡単にデータベースの追加・編集ができるという利点は失われてしまうように見えますが、GASを上手に設定したら良い感じにできるかもしれません。
例えば、「変更内容を反映して自動的にfirestoreにexportする」なども設定可能なのでしょうか?（GASは使ったことがないので把握していないのです)

私の場合、まずGoogleシートを使用してMVPをリリースしてから、Firestoreに移行するつもりです。
その段階で改めてリサーチする予定です。

## 参考

[React開発効率を3倍にするVS Code拡張機能&環境設定](https://qiita.com/newt0/items/b7810fb38c339ec5e4a7)
[React初案件獲得までの流れ(学習・案件探し・面接・契約まで)](https://qiita.com/newt0/items/975a379de904858dd0f9)

[The Complete React Developer Course (w/ Hooks and Redux)](https://www.udemy.com/course/react-2nd-edition/)
[Universal React with Next.js - The Ultimate Guide](https://px.a8.net/svt/ejp?a8mat=3BK8OP+16V8C2+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Funiversal-react-with-nextjs-the-ultimate-guide%2F)
[React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応 2020年版](https://px.a8.net/svt/ejp?a8mat=3BK8OP+16V8C2+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Freact-native-first-step%2F)
[React.js & Next.js超入門](https://amzn.to/2WwaXwQ)
[Webサイト高速化のための　静的サイトジェネレーター活用入門](https://amzn.to/3b5kDpd)
[詳解！ Google Apps Script完全入門 ～Google Apps & G Suiteの最新プログラミングガイド](https://amzn.to/3jSx8se)
<a href="https://www.amazon.co.jp/dp/B07X7DHZ9F/ref=as_li_ss_il?&linkCode=li2&tag=fden02-22&linkId=0b5b3306ff6ecee8f89a30f15b492aa9&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07X7DHZ9F&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=B07X7DHZ9F" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><a href="https://www.amazon.co.jp/dp/B0851BGDQG/ref=as_li_ss_il?&linkCode=li2&tag=fden02-22&linkId=fedb0f3b6f6cc9bbc2a5b25b79509ef5&language=ja_JP" target="_blank"><a href="https://www.amazon.co.jp/Web%E3%82%B5%E3%82%A4%E3%83%88%E9%AB%98%E9%80%9F%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E6%B4%BB%E7%94%A8%E5%85%A5%E9%96%80-Compass-Books%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%82%A8%E3%83%93%E3%82%B9%E3%82%B3%E3%83%A0-ebook/dp/B088WJWJK9?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=UC7AQUH6OZCN&dchild=1&keywords=jamstack&qid=1613358356&s=digital-text&sprefix=JAMS%2Cdigital-text%2C278&sr=1-5&linkCode=li2&tag=fden02-22&linkId=4ef4eee5d8e31e0ccbb59b21c5bc47ca&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B088WJWJK9&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=B088WJWJK9" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><a href="https://www.amazon.co.jp/Google-Apps-Script%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80-%EF%BD%9EGoogle-Suite%E3%81%AE%E6%9C%80%E6%96%B0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%AC%E3%82%A4%E3%83%89%EF%BD%9E-ebook/dp/B07BNB1Z9L?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=GAS&qid=1613358447&s=books&sr=1-1&linkCode=li2&tag=fden02-22&linkId=90c3880c2f5bcd22b0cc0497d5036f0a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07BNB1Z9L&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=B07BNB1Z9L" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />