目次
はじめに
この記事では、ReactアプリケーションとGoogleスプレッドシートを連携させる方法について説明します。
具体的には、Googleスプレッドシートをデータベースの代わりに使用して、データの読み書きを行う方法を紹介します。
この連携により、簡単なデータ管理やデータの視覚化が可能になります。
サンプルデータ
sample.csv
ID,Name
1,taro
2,sato
3,kato
4,fuji
5,tamura
Google SpreadSheetのデータをJSONで取得する
Google SpreadSheetのデータを取得するには、APIキーが必要になります。
Google Cloud PlatformからAPIキーを取得し、メモしておきます。
また、先ほどアップロードしたサンプルデータのURLの
Google SpreadSheetのデータをJSONで取得する方法は以下のURLをブラウザで叩いてください。
command
https://sheets.googleapis.com/v4/spreadsheets/スプレッドシートID/values/シート名?key=APIキ
Reactアプリケーションのセットアップ
アプリケーションの作成、環境設定
Create React Appを使用して、新しいReactアプリケーションを作成してください。
command
npx create-react-app google-sheets-integration
cd google-sheets-integration
code .
次にルートディレクトリ上に.envを作成してください。
内容は以下の通りとなります。
.env
REACT_APP_GOOGLE_SHEETS_API_KEY=APIキー
REACT_APP_GOOGLE_SHEETS_DOC_ID=スプレッドシートID
App.jsにメインの処理を記述する
App.js
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;
まとめ
この記事では、ReactアプリケーションとGoogleスプレッドシートを連携させる方法について説明しました。
Google Sheets APIを有効にすることで、スプレッドシートをデータベースの代わりに使用できます。
これにより、簡単なデータ管理やデータの視覚化が可能になります。