Gridsome で始めるスプレッドシート生活　~スプレッドシートからデータを取得してみる~

# ゴール

![スクリーンショット 2020-09-27 23.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/14e166c1-d75a-c34f-e5bb-79744f54bc15.png)

こんな感じのスプレッドシートのデータをWebサイトに表示させたいと思います。


![スクリーンショット 2020-09-28 0.08.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/b82b0e62-a391-9369-f689-aa24e9cbe06a.png)

# 動作環境
- @gridsome/cli v0.3.4
- gridsome v0.7.21
- yarn 1.22.0
- macOS 10.14.6

## プロジェクト作成&準備

- [Gridsome](https://gridsome.org/docs/)
    - vue.jsの静的サイトジェネレーター
- [gridsome-source-google-sheets](https://gridsome.org/plugins/gridsome-source-google-sheets)
    - Gridsomeのプラグインでスプレッドシートのデータを[GraphQL](https://graphql.org/)で取得できるようになります。

やる前にGraphQLがどういったものかを知るために下の記事を参考にさせていただきました。
ありがとうございます。

- [GraphQLの全体像とWebApp開発のこれから](https://qiita.com/saboyutaka/items/171f7382cdf75b67d076)

### 1.Gridsome CLI インストール

```.bash
# yarn を使う場合
$ yarn global add @gridsome/cli
# npm を使う場合
$ npm install --global @gridsome/cli
```

### 2.プロジェクト作成

```.bash
$ gridsome create sheetSample
$ cd  sheetSample
```

### 3.サイト表示

```.bash
$ gridsome develop
```

![スクリーンショット 2020-09-28 0.27.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/5fa47755-eb99-0904-b14b-002ab915417f.png)

http://localhost:8080/

アクセスしてサイトが表示されたらOK

静的ファイル生成 `/dist`フォルダに生成されます。

```.bash
$ gridsome build
```

### 3.スプレッドシートのデータを利用するのに必要なプラグインのインストール

```.bash
# yarn を使う場合
yarn add gridsome-source-google-sheets
# npm を使う場合
npm install gridsome-source-google-sheets
```

### 4. sheetIdとapiKeyを準備

```gridsome.config.js
module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: 'gridsome-source-google-sheets',
      options: {
        sheetId: 'GOOGLE_SHEET_ID', 
        apiKey: 'GOOGLE_API_KEY',
        // type: 'TYPE_NAME', //Optional - default is googleSheet. Used for graphql queries.
      }
    }
  ]
}
```

`sheetId`と`apiKey`を準備します。

`apiKey`を設定


APIキーを作成
https://console.developers.google.com/apis/credentials
![スクリーンショット 2020-09-28 1.40.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/71df739a-c745-1692-f32b-a441d47104db.png)




Google Sheets APIを有効にする

https://console.developers.google.com/apis/library

![スクリーンショット 2020-09-28 1.40.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/a46a9604-d9ec-b10c-c4e2-c28647bcdd78.png)

作成したAPIキーを `gridsome.config.js` の**GOOGLE_SHEET_ID**の部分に貼り付けます

`sheetId`を設定

作成したスプレッドシートの共有リンクを作成します。

![スクリーンショット 2020-09-28 1.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/780201f5-54c6-e88b-8956-ef3ffa22838d.png)

スプレッドシートのURLを確認します。

```
https://docs.google.com/spreadsheets/d/GOOGLE_SHEET_ID/edit#gid=0
```

GOOGLE_SHEET_IDの部分が`sheetId`になります。
取得した`sheetId`を `gridsome.config.js` の**GOOGLE_SHEET_ID**の部分に貼り付けます

## スプレッドシートからデータを取得する

### 1.GraphQL でデータを取得してみる

[Introduction to GraphQL | GraphQL](https://graphql.org/learn/)

```.bash
$ gridsome develop
```

![スクリーンショット 2020-09-28 0.27.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/fa7521f1-0d84-dcca-efb7-bad14d911cea.png)

http://localhost:8080/___explore

ここにアクセスしましょう

![スクリーンショット 2020-09-28 0.31.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/9df83996-981e-23ee-2a5a-9d35c7842786.png)

実際にサイト内でアクセスする際に使用するクエリーを作って確認してみましょう

```
query {
  allGoogleSheet  {
    edges {
      node  {
        id
        title
        description
      }
    }
  }
}
```

これを実行すると下記のような結果が得られます。

```.json
{
  "data": {
    "allGoogleSheet": {
      "edges": [
        {
          "node": {
            "id": "11",
            "title": "あああああ11",
            "description": "テストテスト11"
          }
        },
        {
          "node": {
            "id": "10",
            "title": "あああああ10",
            "description": "テストテスト10"
          }
        },
        {
          "node": {
            "id": "9",
            "title": "あああああ9",
            "description": "テストテスト9"
          }
        },
        {
          "node": {
            "id": "8",
            "title": "あああああ8",
            "description": "テストテスト8"
          }
        },
        {
          "node": {
            "id": "7",
            "title": "あああああ7",
            "description": "テストテスト7"
          }
        },
```

![スクリーンショット 2020-09-28 0.42.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/772b8525-4bdc-6755-82d6-27fc31db4b13.png)

### 2.スプレッドシートのデータをサイトに表示させる

`<page-query>`ここのブロックに目的のquery（1.GraphQL でデータを取得してみるで作成したやつ）を記載します。

```/src/pages/Index.vue
<template>
  <Layout>
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>title</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="page in $page.allGoogleSheet.edges" :key="page.id">
          <td>{{ page.node.id }}</td>
          <td>{{ page.node.title }}</td>
          <td>{{ page.node.description }}</td>
        </tr>
      </tbody>
    </table>
  </Layout>
</template>

<page-query>
query {
  allGoogleSheet  {
    edges {
      node  {
        id
        title
        description
      }
    }
  }
}
</page-query>

```

結果

![スクリーンショット 2020-09-28 0.08.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/cf5f4b16-f9fe-eb76-a5d6-2ad768abbcf7.png)

表示できました。

でもidが降順ではなく昇順がいいので昇順にしてみます。

```
query {
  allGoogleSheet(order: ASC, sortBy: "id")  {
    edges {
      node  {
        id
        title
        description
      }
    }
  }
}
```

![スクリーンショット 2020-09-28 1.34.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/8dce3bf6-974b-fb7a-6dfe-b238d0bd9182.png)

並び替えられていますね！

## templateを使ってみる

[Templates - Gridsome](https://gridsome.org/docs/templates/)

templateを使ってよくある詳細画面を作ってみましょう

### 1.template作成

```/src/templates/googleSheet.vue
<template>
  <layout>
    <div>{{$page.googleSheet.title}}</div>
    <div>{{$page.googleSheet.description}}</div>
  </layout>
</template>

<page-query>
query Post ($path: String!) {
  googleSheet (path: $path) {
    title
    description
  }
}
</page-query>
```

```gridsome.config.js
module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: 'gridsome-source-google-sheets',
      options: {
        sheetId: 'GOOGLE_SHEET_ID',
        apiKey: 'GOOGLE_API_KEY',
        // type: 'TYPE_NAME', //Optional - default is googleSheet. Used for graphql queries.
      }
    }
  ],
  templates: {
    googleSheet: [
      {
        path: '/:id',
        component: './src/templates/googleSheet.vue'
      }
    ]
  }
}
```

作成したtemplateのパスを指定します。
pathは`/:id` とすることで

`http://localhost:8080/:id` => `http://localhost:8080/1` これでアクセスするとidが1のデータを取得し templateに表示されます。

### 2.リンク作成

[Linking - Gridsome](https://gridsome.org/docs/linking/)

```/src/pages/Index.vue
<template>
  <Layout>
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>title</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="page in $page.allGoogleSheet.edges" :key="page.id">
          <td><g-link :to="page.node.id">{{ page.node.id }}</g-link></td>
          <td>{{ page.node.title }}</td>
        </tr>
      </tbody>
    </table>
  </Layout>
</template>

<page-query>
query {
  allGoogleSheet(order: ASC, sortBy: "id")  {
    edges {
      node  {
        id
        title
        description
      }
    }
  }
}
</page-query>

```

![スクリーンショット 2020-09-28 2.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/1c08265d-5b31-86cc-e6e7-bf3e8c9d0cfe.png)

idのリンクを押すと対応したtitleと詳細が出るようになりました。

![スクリーンショット 2020-09-28 2.44.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/617ebc85-8829-35d7-18cb-8c486e65642b.png)


# 最後に
Gridsomeのプロジェクト作成は特に指定なして今回は作成しましたが[公式でstarter](https://gridsome.org/starters/)がいくつか用意されているのでより効率よく目的のサイトを作成できると思います。
![スクリーンショット 2020-09-28 2.14.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/c4a58c78-5bb8-c5c5-5dd2-c75626b0ff50.png)

blog系のスターター + Headless CMSとかでJamStackなブログを作ってもいいですね.

gridsome-source-google-sheetsのプラグインを利用すると,
スプレッドシートAPIをそのまま利用してシートデータを取得するのではなく、Graphqlを利用してデータを取得するので扱いやすく、フロントエンドに集中できると感じたのでよかったです。
また、スプレッドシートでデータを用意できれば個人で開発する小規模のものや、短期間でサクッとものを作りたい時などに良さそうと感じました。

```
$ gridsome build
```

で静的サイト生成するときにスプレッドシートのデータを取得してくれるので[vercel](https://vercel.com/)や[netlify](https://www.netlify.com/)を利用してデプロイ時にbuildコマンドを走らせるようにすればサイトが最新の状態に更新されかつサクサク快適に動くサイトが作れそうですね。

Gridsomeに関しては今回スプレッドシートのプラグインを使いたくて使ってみたばかりなので

このプラグインおすすめだよなどありましたら教えてくださるとありがたいです。

# 参考させていただいたもの

- [Introduction - Gridsome](https://gridsome.org/docs/)
- [gridsome-source-google-sheets - Gridsome](https://gridsome.org/plugins/gridsome-source-google-sheets)
- [Build a Job List With Google Sheets, Zapier, and Gridsome](https://medium.com/better-programming/build-a-job-list-with-google-sheets-zapier-and-gridsome-4316ecc6a9a8)
- [Templates - Gridsome](https://gridsome.org/docs/templates/)
- [Linking - Gridsome](https://gridsome.org/docs/linking/)
- [GraphQLの全体像とWebApp開発のこれから](https://qiita.com/saboyutaka/items/171f7382cdf75b67d076)
- [Introduction to GraphQL | GraphQL](https://graphql.org/learn/)