search
LoginSignup
3

More than 1 year has passed since last update.

posted at

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ファイルを作成
(コーテーションやコンマは入れない)

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3