GoogleスプレッドシートのデータをReactで利用する

簡便にReactのアプリを作ってみようということで、Google SpreadSheetのデータを読み込ませてみました。

# サンプルデータ
```sample.csv
ID,Name
1,aaa
2,bbb
3,aaa
4,bbb
5,aaa
6,bbb
7,aaa
8,bbb
```

こんな感じのCSVファイルをGoogle SpreadSheetにアップロードしておきます。
シート名は"sheet1"とかにしておきます。
そして、共有で「リンクを知っている全員に変更」にして、

#Google SpreadSheetのデータをJSONで取得する
Google SpreadSheetのデータを取得するには、APIキーが必要になります。
<a href="https://console.cloud.google.com/apis/credentials" title="Google Cloud Platform" rel="noopener" target="_blank">Google Cloud Platform</a>からAPIキーを取得し、メモしておきます。

また、先ほどアップロードしたサンプルデータのURLの

```
https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxx/edit?usp=sharing
```

xxxxxxxxxxxxx部分がスプレッドシートIDになるので、こちらもメモしておきます。

Google SpreadSheetのデータをJSONで取得するには

```
https://sheets.googleapis.com/v4/spreadsheets/スプレッドシートID/values/シート名?key=APIキ
```

をブラウザで開くと、

```
{
"range": "sheet1!A1:Z1001",
"majorDimension": "ROWS",
"values": [
[
"ID",
"Name"
],
[
"1",
"aaa"
],
[
"2",
"bbb"
],
[
"3",
"aaa"
],
[
"4",
"bbb"
],
[
"5",
"aaa"
],
[
"6",
"bbb"
],
[
"7",
"aaa"
],
[
"8",
"bbb"
]
]
}
```
のようなJSONが表示されます。

APIキー発行等の詳しい手順は下記サイトを参照してください。

https://macoblog.com/google-spreadsheet-json/

# ReactでJSONを呼び出す

Reactの環境構築等については省略。

```
npx create-react-app my-app
cd my-app
```

で、Reactのプロジェクトを作成し、プロジェクトフォルダに移動。
VSCodeがインストールされていれば

```
code .
```

でプロジェクトディレクトリを開いて、.envファイルを作成
（コーテーションやコンマは入れない）

```.env
REACT_APP_GOOGLE_SHEETS_API_KEY=APIキー
REACT_APP_GOOGLE_SHEETS_DOC_ID=スプレッドシートID
```

データをコンソールログに表示してみる。

```App.js
const [datas, setDatas] = useState([])

function App() {
	const [datas, setDatas] = useState([])
	useEffect(() => {
		 fetch(`https://sheets.googleapis.com/v4/spreadsheets/${process.env.REACT_APP_GOOGLE_SHEETS_DOC_ID}/values/sheet1?key=${process.env.REACT_APP_GOOGLE_SHEETS_API_KEY}`)
			.then(res => res.json())
			.then(datas =>
				setDatas(datas.values))
	}, [])
	console.log(datas);
  return (
    <div>
    </div>
  );
}

export default App;
```

二重配列で出力される。

```
[
    [
        "ID",
        "Name"
    ],
    [
        "1",
        "aaa"
    ],
    [
        "2",
        "bbb"
    ],
    [
        "3",
        "aaa"
    ],
    [
        "4",
        "bbb"
    ],
    [
        "5",
        "aaa"
    ],
    [
        "6",
        "bbb"
    ],
    [
        "7",
        "aaa"
    ],
    [
        "8",
        "bbb"
    ]
]
```

このままでは使いづらいので、以下のサイトを参考にして辞書型データに変換。

https://ribbit.work/blog/gas-json/

```App.js
const [datas, setDatas] = useState([])

function App() {
	const [datas, setDatas] = useState([])
    const CsvDic = (props) => {
      const [header, ...rows] = props;
      return rows.map((row) =>
        row.reduce((acc, cell, i) => ({ ...acc, [header[i]]: cell }), {})
      );
    }
	useEffect(() => {
		 fetch(`https://sheets.googleapis.com/v4/spreadsheets/${process.env.REACT_APP_GOOGLE_SHEETS_DOC_ID}/values/sheet1?key=${process.env.REACT_APP_GOOGLE_SHEETS_API_KEY}`)
			.then(res => res.json())
			.then(datas =>
				setDatas(CsvDic(res.data.values))
	}, [])
	console.log(datas);
  return (
    <div>
    </div>
  );
}

export default App;
```

コンソールログの表示

```
[
    {
        "ID": "1",
        "Name": "aaa"
    },
    {
        "ID": "2",
        "Name": "bbb"
    },
    {
        "ID": "3",
        "Name": "aaa"
    },
    {
        "ID": "4",
        "Name": "bbb"
    },
    {
        "ID": "5",
        "Name": "aaa"
    },
    {
        "ID": "6",
        "Name": "bbb"
    },
    {
        "ID": "7",
        "Name": "aaa"
    },
    {
        "ID": "8",
        "Name": "bbb"
    }
]
```