sheets-api

June 13, 2024

Table of Contents

• 別タブのシートを選択

英単語の情報が書いてあるスプレッドシートの値を取得して、ボタンクリック時にランダムで表示

export const SheetsApi: React.FC = () => {
  const [sheetData, setSheetData] = useState<SheetDataType | null>(null);
  const [columnHeader, setColumnHeader] = useState<string[]>([]);
  const [randomIndex, setRandomIndex] = useState<number>(0);
  const ROW_LENGTH = 4;

  const fetchWords = async (): Promise<SheetDataType> => {
    const sheetsId = process.env.REACT_APP_SHEETS_ID;
    const apiKey = process.env.REACT_APP_SHEETS_API_KEY;

    try {
      const response = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${sheetsId}/values/A:F/?key=${apiKey}`);
      if (!response.ok) {
        throw new Error('Failed to fetch data');
      }
      const data = await response.json();
      return data;
    } catch (error) {
      console.error(error);
      throw error;
    }
  };

  useEffect(() => {
    fetchWords().then((value) => {
      const header = value.values.shift();

      if (header) {
        setColumnHeader(header);
      }
      setSheetData(value);
    });
  }, []);

  const handleNextClick = () => {
    if (sheetData && sheetData.values.length > 0) {
      const index = Math.floor(Math.random() * sheetData.values.length);
      setRandomIndex(index);
    }
  };

  return (
    <div>
      <Header />
      <h2>Sheets Api</h2>
      <p>ランダムに英単語を表示</p>
      {sheetData && sheetData.values && (
        <div>
          <button
            onClick={handleNextClick}
          >NEXT!</button>

          <Container className='mt-5'>
            <Stack gap={3}>
              {Array.from({ length: ROW_LENGTH }).map((_, index) => (
                <Row key={index}>
                  <Col className='col-3'>{columnHeader[index]}</Col>
                  <Col>{sheetData.values[randomIndex][index]}</Col>
                </Row>
              ))}
            </Stack>
          </Container>
        </div>
      )}
    </div>
  );
}

別タブのシートを選択

const response = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${sheetsId}/values/${sheetName}!${range}/?key=${apiKey}`);