React 入門

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

Axios による API からのデータ取得

前のページでは JavaScript の fetch 関数を用いて API からデータを取得しました．以降では API からのレスポンス処理を行いやすくするために Axios というライブラリを利用することにします．まずは，ターミナル（またはコマンドプロンプト）で次のコマンドを実行して axios をインストールします．

% npm install axios ⏎

Axios のインストールができたら CommentListPage.js の先頭で axios をインポートします．

src/components/CommentListPage.js（抜粋）import axios from 'axios';

CommentListPage.js を編集して，axios で API にリクエストを送信するようにします．このとき，前のページで追加した useEffect 関数部分をそのまま次のコードに置き換えるようにしてください．

src/components/CommentListPage.js（抜粋）useEffect(() => {
  const url = "http://127.0.0.1:8000/comments/";
  axios.get(url)
      .then(res => console.log(res.data))
      .catch(err => console.log(err.message));
}, []);

実行結果は次のようになりました．Axios では API からのレスポンスデータを JSON 形式へ自動的に変換していることもわかります．（ここでもまだ画面には結果が反映されません．）

次の通り，setResults() 関数を呼び出しすことで API から取得したデータに更新することができます．

src/components/CommentListPage.js（抜粋）useEffect(() => {
  const url = "http://127.0.0.1:8000/comments/";
  axios.get(url)
      .then(res => setResults(res.data))
      .catch(err => console.log(err.message));
}, []);

上のコードでは，API からのレスポンスを受け取った後，setResult(res.data) で results の値を更新しています．React では useState で管理する値が変化するたびにそのコンポーネントが新たに作り直され，画面の中でそのコンポーネントだけが再描画されることになります．実際にブラウザで再読み込みを何度か繰り返して動作を確認してください．最初にコメントが空の状態で画面全体が描画された後，遅れて2件のコメントの部分だけが描画し直されていることが確認できるはずです．

API のデータベースには10件のコメントが保存されており，一覧表示では更新日時の新しいコメントが2件だけ表示されます．次のページではコメントの総数を表示し，過去のデータに表示を切り替えられるようにします．

目次に戻る