NotionのデータベースからGatsbyで使うJSONファイルを作る方法

# 背景
* noteの記事一覧のデータをComponentファイル中に記載している。
* 記事の数が増えていくと行数が増え、コードの可読性低下する。
* 記事一覧のデータを別ファイル分離したい。
* ファイルに直接データを打ち込むのは手間がかかる。
* Notionのデータベースを利用してCSVファイルを作成しJSONに変換する。

```NoteArticlesComponent.jsx
import React from 'react';
import {Li, DateStyle, ListTitle} from './ListStyleComponent';

const articleLists = [
  {
    id: 1,
    date: "2021/10/29",
    title: "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第3回目",
    url: "https://note.com/maiamea/n/n21e44fdb4f10"
  },
  {
    id: 2,
    date: "2021/10/27",
    title: "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第2回目",
    url: "https://note.com/maiamea/n/n792779910e0b"
  },
  {
    id: 3,
    date: "2021/10/25",
    title: "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第1回目",
    url: "https://note.com/maiamea/n/n5cd7a8c0cbf7"
  },
];

const NoteArticlesComponent = () => (
  <>
    {articleLists.map((list) => (
      <ul>
        <Li key={list.id}>
          <a href={list.url}>
            <DateStyle>{list.date}</DateStyle>
            <br />
            <ListTitle>{list.title}</ListTitle>
          </a>
        </Li>
      </ul>
    ))}
  </>
);

export default NoteArticlesComponent
```

# Notionでデータベース作成
* `NoteArticlesComponent.jsx`では`date`が新しい順に並べていたが、追記しやすいよう古い順に登録し直す。
* 表示は降順にしたいので、のちほどコードで調整する。 ([別記事「文字列の日付を降順にソートする方法」参照](https://qiita.com/maiamea/private/4ab60364c4c268eaa2a5))
* **カラム名はJSONのプロパティ名と一致させる。**

![スクリーンショット 2021-11-12 14.05.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/cf8cd3f8-f5d2-13a1-814b-64585de8e7ff.png)



# CSVファイル作成
* 「・・・」　→　「Export」→「Export」の順にクリックする。
* zipファイル生成される。
* zipファイルをクリックするとzipと同じディレクトリにCSVファイルが展開されている。

![スクリーンショット 2021-11-12 14.05.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/c6b9fd8c-a38d-7b6a-d4c0-678fd331d0fd.png)

![スクリーンショット 2021-11-12 14.05.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/40a03347-1b14-f2c4-494b-8eadc2329573.png)


![スクリーンショット 2021-11-12 10.04.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/bef137bb-e0f2-11e9-e629-917478c47eef.png)

# CSVファイルをVSCode上にドラック&ドロップ

```
id,title,date,url
1,【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第1回目,2021/10/25,https://note.com/maiamea/n/n5cd7a8c0cbf7
2,【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第2回目,2021/10/27,https://note.com/maiamea/n/n792779910e0b
3,【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第3回目,2021/10/29,https://note.com/maiamea/n/n21e44fdb4f10
```

# JSONに変換 (無料ツールを使用)

**個人情報、機密情報には使用しないよう注意する。**

## 参考サイトに記載したサイトにアクセス

![スクリーンショット 2021-11-12 11.03.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/0f2e5826-4d24-d2f5-59e2-77e1f4978c9c.png)

## 入力例を削除すると、「CSVをここに貼り付けます」が表示される
![スクリーンショット 2021-11-12 14.20.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/e33ff8e5-41a3-8a29-51a5-25bff556c7f8.png)


## 入力欄にCSVを貼り付け、「変換」をクリック
![スクリーンショット 2021-11-12 14.14.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/c285a9a0-78aa-c708-a401-462f63fc1a7b.png)

## 出力欄にJSON形式に変換されたデータが表示される
![スクリーンショット 2021-11-12 14.15.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/244446ee-419c-ce8c-0c5e-53312f2fceab.png)




# `src/data/note.json`ファイルを作成し、出力欄の内容を貼り付ける
```src/data/note.json
[
    {
        "id": "1",
        "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第1回目",
        "date": "2021/10/25",
        "url": "https://note.com/maiamea/n/n5cd7a8c0cbf7"
    },
    {
        "id": "2",
        "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第2回目",
        "date": "2021/10/27",
        "url": "https://note.com/maiamea/n/n792779910e0b"
    },
    {
        "id": "3",
        "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第3回目",
        "date": "2021/10/29",
        "url": "https://note.com/maiamea/n/n21e44fdb4f10"
    }
]
```

# 使い方
```NoteArticlesComponent.jsx
import React from 'react';
import {Li, DateStyle, ListTitle} from './ListStyleComponent';
// JSONファイルを読み込む
import articleLists from '../data/note.json';

const NoteArticlesComponent = () => (
  <>
    {articleLists.map((list) => (
      <ul>
        <Li key={list.id}>
          <a href={list.url}>
            <DateStyle>{list.date}</DateStyle>
            <br />
            <ListTitle>{list.title}</ListTitle>
          </a>
        </Li>
      </ul>
    ))}
  </>
);

export default NoteArticlesComponent
```

# 参考サイト
* [CSV から JSON コンバータ](https://www.site24x7.com/ja/tools/csv-to-json.html)