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

Last updated at 2021-02-28Posted at 2021-02-14

フロントを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に移行するつもりです。
その段階で改めてリサーチする予定です。