React 入門

TypeScript コメント掲示板アプリの開発

fetch による API からのデータ取得と useEffect

いよいよ API に接続をしてコメント一覧データを取得します．まずは Fetch API（fetch 関数）を使った API コールを試します．Fetch API は Web API の一種で，これを使うとサーバからデータを取得することができます．ただし，fetch 関数は非同期処理になることに注意が必要です．

まず，ここページを参照して API サーバが起動し，API からレスポンスが得られる状態であることを確認してください．

プログラムの先頭で useEffect をインポートします．

src/components/CommentListPage.tsx（抜粋）
import { useState, useEffect } from 'react';

fetch(url) によって与えられた URL に GET リクエストを送信します．API からのレスポンスは res.json() によって JSON 形式（つまり JavaScript のオブジェクト形式）に整えられ，console.log(json) によってブラウザのコンソールに表示されます（まだ画面には反映されません）．もしも API へのリクエストで何らかのエラーが発生した場合には .catch() のコードが実行されます．

src/components/CommentListPage.tsx（抜粋）
useEffect(() => {
  const url = "http://127.0.0.1:8000/comments/";
  fetch(url)
    .then((res) => res.json())
    .then((json) => console.log(json))
    .catch(() => console.log("error"));
}, []);

また，fetch(url) の処理は useEffect() 関数の中で呼び出されていることにも注意してください．この useEffect() は React のフックのひとつです．useEffect() はコンポーネントの（再）描画，破棄のタイミングで処理を実行するためのフックで，次のような構文です．

useEffect(()=>{描画時に実行する処理}, 依存する変数);

依存する変数に空配列 [] を渡すことで，コンポーネントの初期描画時のみ処理が実行されることになります．初回描画時に実行されるのが4行目から6行目の処理になります．このように API へのコールを useEffect でフックすることで，無駄な通信を減らすことができるようになります．

もしも，useEffect を使わずに次のようにすると，読み込み時だけでなく，投稿や削除のたびに API がコールされることに注意してください．

src/components/CommentListPage.tsx（抜粋）
// useEffect(() => {
  const url = "http://127.0.0.1:8000/comments/";
  fetch(url)
    .then((res) => res.json())
    .then((json) => console.log(json))
    .catch(() => console.log("error"));
// }, []);

目次に戻る