Google スプレッドシートを DB 化できる「Stein」と Nuxt.js を連携する

Stein is a suite of programs to help you turn any Google Sheet to a database. The core Stein API provides RESTful access to your sheets. 
（Stein は、Google スプレッドシードを DB として扱うための一連のプログラムです。コア機能の Stein API を使用することで、スプレッドシートへの RESTful なアクセスが可能となります。）

公式ドキュメントの冒頭を引用し、いちおう訳を付けました。今回は、この Stein を Nuxt.js 上で使ってみようと思います。なお、Nuxt.js の導入手順は省略します。

API を作成する

スプレッドシート上に 2 つのシートを用意しました。左を Foods シート、右を Beverages シートとします。このスプレッドシートをもとに、公式ドキュメントの手順に従って API を作成します。Stein にサインアップし、スプレッドシートの URL を登録するだけですね。

クライアントライブラリを導入する

JavaScript で Stein API を叩くために、クライアントライブラリをインストールします。

$ yarn add stein-js-client

あと、本筋とは関係ないですが、後述のコードを正常に動かすためには、dotenv と CSS フレームワークの Vuetify が必要です。

$ yarn add @nuxtjs/dotenv @nuxtjs/vuetify

nuxt.config.js

modules: [
  '@nuxtjs/dotenv',
  '@nuxtjs/vuetify'
],

.env

API_URL=<YOUR_API_URL>

コンポーネントを作成する

API から取得した値は、以下のようにテーブル形式で表示します。

あらかじめ、テーブルをコンポーネント化しておきましょう。

/components/Menu.vue

<template>
 <v-simple-table>
   <template v-slot:default>
     <thead>
       <tr>
         <th class="text-center">Name</th>
         <th class="text-center">Price</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="item in items" :key="item.id">
         <td class="text-center">{{ item.name }}</td>
         <td class="text-center">{{ item.price }} yen</td>
       </tr>
     </tbody>
   </template>
 </v-simple-table>
</template>

<script>
export default {
 props: {
   items: {
     default: () => [],
     type: Array
   }
 }
}
</script>

スプレッドシートの値を取得する

クライアントライブラリを使用して Stein API を叩き、Google スプレッドシートの値を取得します。

/pages/index.vue

<template>
 <v-app>
   <v-content>
     <v-container>
       <v-row class="mb-3" justify="center">
         <h2>Menu</h2>
       </v-row>
       <v-row>
         <v-col cols="12" sm="6">
           <section>
             <h3 class="mb-2">Foods</h3>
             <Menu :items="foods"></Menu>
           </section>
         </v-col>
         <v-col cols="12" sm="6">
           <section>
             <h3 class="mb-2">Beverages</h3>
             <Menu :items="beverages"></Menu>
           </section>
         </v-col>
       </v-row>
     </v-container>
   </v-content>
 </v-app>
</template>

<script>
import SteinStore from 'stein-js-client'
import Menu from '~/components/Menu.vue'

const store = new SteinStore(process.env.API_URL)

export default {
 components: {
   Menu
 },
 async asyncData() {
   const [foods, beverages] = await Promise.all(
     ['Foods', 'Beverages'].map((itemType) => {
       return store.read(itemType)
     })
   )
   return { foods, beverages }
 }
}
</script>

手順は以上です。

Stein API を介せば、今回のような「読み取り」にとどまらず、スプレッドシートに対して比較的容易に CRUD 操作を行うことができます。