JavaScript React

ReactとGoogleスプレッドシートを連携させる方法

 

はじめに

この記事では、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を有効にすることで、スプレッドシートをデータベースの代わりに使用できます。

これにより、簡単なデータ管理やデータの視覚化が可能になります。

 

-JavaScript, React