Gatsby+GraphQLでJSONデータを読み込みReact bootstrapテーブルで表示

# Gatsby+GraphQLでJSONデータを読み込みReact bootstrapテーブルで表示

AngularのMaterial2のmat-tableから吐き出したJSONファイルがあるが、それをわざわざHTMLのbootstrap Tableにマニュアルで書き写すのはムリってことでGatsbyで一気に読み込んで表示する方法を探したらあった。

[Reading Data From A JSON File With Gatsby + GraphQL](https://itnext.io/reading-data-from-a-json-file-with-gatsby-graphql-572b18ab98a)
記事の筆者はEmma Bostianさんという美人さん。ドイツ在住のアメリカ人のようだ。Twitterのほうは10万もフォロワーがいるよ（驚


### ゴール
以下のように数百データあるJSONファイルが手元にあって。

```json
/* Symptoms.json */
[
    {"症状名": "関節痛", "症状名（英語）": "Aching joints"},
    {"症状名": "筋肉痛", "症状名（英語）": "aching muscles"},
    {"症状名": "急性過興奮状態", "症状名（英語）": "Acute hyper excited state"},
・・・以下略・・・
]
```

これをbootstrapのテーブルにしたい。こんな風に。
[画面表示]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/be397963-c394-d807-0833-ce74dab25195.png)

[HTML]

```html
<Table striped bordered hover variant="dark" size="sm" responsive>
   <tbody>
     <th>症状名</th><th>症状名（英語）</th>
       <tr><td>関節痛</td><td>Aching joints</td></tr>
       <tr><td>筋肉痛</td><td>aching muscles</td></tr>
       <tr><td>悪寒</td><td>Chills</td></tr>
       <!--・・・以下略・・・-->
    </tbody>
</Table>
```

### JSONを読み込み動的に表示する方法
結論からいうと`gatsby-transformer-json`というプラグインでできる。


#### 前提
・Gatsbyプロジェクトは作成済み
・React bootstrapも導入済み。参考：[GatsbyにReact bootstrap導入とナビゲーションバー](https://qiita.com/atomyah/items/5eb8b0019665254876da)

#### 導入方法
##### JSONファイルの置き場所
Gatsbyプロジェクトに`src/data/`というフォルダを作る。そしてJSONファイルはその下に置く。ここではSymptoms.jsonファイルを置いた。
Symptoms.jsonファイルはキー名が日本語だと都合が悪いので英語に置換しておいた。

```json
[
    {"SymptomNameJ": "関節痛", "SymptomNameE": "Aching joints"},
    {"SymptomNameJ": "筋肉痛", "SymptomNameE": "aching muscles"},
    {"SymptomNameJ": "急性過興奮状態", "SymptomNameE": "Acute hyper excited state"},
・・・略・・・
]

```


##### プラグインをインストール
`gatsby-transformer-json`と `gatsby-source-filesystem`をインストールする。

```bash
$ yarn add gatsby-transformer-json gatsby-source-filesystem
```

##### コンフィグファイルに設定
`gatsby-config.js`に次のように記述

```jsx
// ・・・略・・・
      `gatsby-transformer-json`,
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `data`,
          path: `${__dirname}/src/data/`,
        },
      },
// ・・・略・・・
```

path: に指定した`${__dirname}/src/data/`はJSONファイルの置き場所として作ったフォルダになる。

##### コンポーネント作成
index.jsでもいいけどここではSymptoms.jsファイルをpagesの下に作成する。
作成したら最初に JSONデータを読めるようにStaticQueryとgraphqlをつぎのようにインポート。

```jsx
import { graphql, StaticQuery } from "gatsby"
```

##### クエリー属性を記述
graphQLでクエリー属性を記述する。

```graphql
graphql
`query SymptomsQuery {
  allSymptomsJson {
   edges {
      node {
               SymptomNameJ
               SymptomNameE
           }
         }
     }
 }`
```

クエリー名SymptomsQueryはまあ適当にSymptomsというコンポーネント名にQueryをくっつけた。任意と思う。

`allSymptomsJson` は名前つけ規則が決まっていてSymptoms.jsonからとってくるデータなので`all + Symptoms + Json`となる（すなわち`allSymptomsJson`）これは http://localhost:8000/___graphql で確認できる。


そしてedgeときてnodeときて、JSONファイルのキー名とくるのも http://localhost:8000/___graphql で確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/d1a6e2a7-b211-05df-c854-7eab012c4158.png)

##### レンダリング
あとはrender={}でレンダリングするだけ。
コードとしてはこうなる。

```jsx
            <StaticQuery
                query={graphql`
                   query WithdrawalSymptomsQuery {
                       allWithdrawalSymptomsJson {
                           edges {
                               node {
                                   SymptomNameJ
                                   SymptomNameE
                               }
                           }
                       }
                  }
               `}
                render={data => (
                    <>
                        <Table striped bordered hover variant="dark" size="sm" responsive>
                            <tbody>
                                <th>症状名</th><th>症状名（英語）</th>
                                {getSymptoms(data)}
                            </tbody>
                        </Table>
                    </>
                )}
            />
```
みてのとおり`<StaticQuery />`エレメントの中にすべて書く。

`{getSymptoms(data)}`という部分でJSONデータを読みこんでテーブルの`<td>[症状名]</td><td>[英語症状名]</td>`を配列で出力しているところ。この関数は以下のとおり。Emmaさんはヘルパーファンクションと呼んでるが…ヘルパー関数？

```jsx
function getSymptoms(data) {
    const SymptomsArray = [];
    data.allSymptomsJson.edges.forEach(item =>
        SymptomsArray.push(
            <tr>
                <td key={item.node.SymptomNameJ}>{item.node.SymptomNameJ}</td>
                <td key={item.node.SymptomNameE}>{item.node.SymptomNameE}</td>
            </tr>
        )
    );
    return SymptomsArray;
}
```


#### コード全文

Symtomps.jsのコード全文：

```jsx
import React from "react"
import { graphql, StaticQuery } from "gatsby"
import { Container, Table } from 'react-bootstrap'

const Symptoms = () => (
    <Container fluid="md">
            <StaticQuery
                query={graphql`
                   query WithdrawalSymptomsQuery {
                       allWithdrawalSymptomsJson {
                           edges {
                               node {
                                   SymptomNameJ
                                   SymptomNameE
                               }
                           }
                       }
                  }
               `}
                render={data => (
                    <>
                        <Table striped bordered hover variant="dark" size="sm" responsive>
                            <tbody>
                                <th>症状名</th><th>症状名（英語）</th>
                                {getSymptoms(data)}
                            </tbody>
                        </Table>
                    </>
                )}
            />
    </Container>
function getSymptoms(data) {
    const SymptomsArray = [];
    data.allSymptomsJson.edges.forEach(item =>
        SymptomsArray.push(
            <tr>
                <td key={item.node.SymptomNameJ}>{item.node.SymptomNameJ}</td>
                <td key={item.node.SymptomNameE}>{item.node.SymptomNameE}</td>
            </tr>
        )
    );
    return SymptomsArray;
}

export default Symptoms

```

以上。

# 本の宣伝
### Gatsbyバージョン５>>>>改訂２版

**前編**の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と**後編**の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ **https://yah-space.work**
<hr />


静的サイトジェネレーターGatsby**最新バージョン５**の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《**Slicy API**》《**Script API**》《**Head API**》を紹介、実装方法も。《**Gatsby Functions**》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

**最新Gatsby５**とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《**サイト内検索機能**》をGatsbyバージョン４からの新機能《**Gatsby Functions**》と《**microCMSのqパラメータ**》で実装。また、**SEOコンポーネントをカスタマイズ**して**microCMS APIをツイッターカードに表示**させる**OGPタグ**実装方法も解説。

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />

参考：
[Reading Data From A JSON File With Gatsby + GraphQL](https://itnext.io/reading-data-from-a-json-file-with-gatsby-graphql-572b18ab98a)