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キーが必要になります。
Google Cloud Platformから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キー発行等の詳しい手順は下記サイトを参照してください。

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"
    ]
]

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

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"
    }
]