バックエンドからデータを取得

先ほどのuseEffectを利用して、バックエンドからデータを取得する方法を説明します。今回バックエンドは学習用に用意された以下のサイトを利用します。

JSONPlaceholder - Free Fake REST APIjsonplaceholder.typicode.com

バックエンドのAPIからデータを取得するために、axiosというライブラリをインストールします。

npm install axios

axiosをインストールしたら、JsonPlaceholderの https://jsonplaceholder.typicode.com/post というURLを叩いて投稿一覧を取得しましょう。useEffect内にて、axios.get(url)とすることで、データを取得することができます。axios.get(url)にて返却する型ですが、Promise型という型で、非同期処理の操作が完了したときに結果を返却するものです。

まず非同期処理の説明の前に同期処理の説明をします。同期処理とは、上から順に処理が行われることで、以下コードがあった場合1,2,3と順番にコンソールに出力されるかと思います。

console.log(1)
console.log(2)
console.log(3)

一方で非同期処理はその処理が完了するのを待たずに次の処理が実行されます。その時点で非同期処理をコンソールに出力しようとすると、pendingというPromise型のオブジェクトが返却されます。

console.log(1)
console.log(2)
非同期処理
console.log(3)

そのPromise型の処理結果を受け取るためには、.thenと繋げることで処理結果を受け取ることができます。ですので、axios.get(url).then((res) => ...)と記述することで、バックエンドからデータを取得することができます。まずは取得した結果をコンソールに出力してみましょう。

PostList.tsx◎

import axios from "axios";
...
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {
      console.log(res);
    });
  }, [userId]);
...

以下のようなオブジェクトが出力されるかと思います。投稿一覧はdataプロパティに格納されています。

こちらのデータをpostListというstateを作り、取得した投稿一覧を格納しましょう。

そして、Post型を作り、postListの型をPost型の配列にしましょう。

また、res.dataの型をaxios.get<Post[]>(...)と宣言することができます。

PostList.tsx◎

...

type Post = {
  id: number;
  userId: number;
  title: string;
  body: string;
};

export const PostList = () => {
  const [postList, setPostList] = useState<Post[]>([]);
  const [userId, setUserId] = useState(1);

  useEffect(() => {
    axios.get<Post[]>("https://jsonplaceholder.typicode.com/posts").then((res) => {
      setPostList(res.data as Post[]);
    });
  }, [userId]);
...

格納した投稿一覧をUserListを作成したときのようにtableタグにて表示するようにしましょう。

PostList.tsx◎

...
  return (
    <div>
      <h2>PostsList</h2>
      <div>
        <p>userID: {userId}</p>
        <input
          type="number"
          value={userId}
          onChange={(e) => setUserId(Number(e.target.value))}
        />
      </div>
      <table className="table">
        <thead>
          <tr>
            <th scope="col">id</th>
            <th scope="col">ユーザーid</th>
            <th scope="col">タイトル</th>
            <th scope="col">内容</th>
          </tr>
        </thead>
        <tbody>
          {postList.map((post) => (
            <tr key={post.id}>
              <td>{post.id}</td>
              <td>{post.userId}</td>
              <td>{post.title}</td>
              <td>{post.body}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
...

これで投稿一覧が表示されました。

次に投稿一覧から、特定のユーザーIDのもののみを表示するようにしましょう。先ほど、useEffectにてuserIdを監視するようにしましたが、バックエンドのAPIを叩く際にuserIdなどのパラメータを渡して、バックエンド側でフィルターをかけるような実装が多々あります。そういった場合は、userIdを監視するようにするのですが、今回はフロントエンド側でフィルターをかけるようにしますので、useEffectの監視する値を空としましょう。

PostList.tsx◎

...
  useEffect(() => {
    axios.get<Post[]>("https://jsonplaceholder.typicode.com/posts").then((res) => {
      setPostList(res.data as Post[]);
    });
  }, []);
...

そして、postListのmapする前にuserIdにてfilterしましょう

PostList.tsx◎

...
          {postList
            .filter((post) => post.userId === userId)
            .map((post) => (
              <tr key={post.id}>
                <td>{post.id}</td>
                <td>{post.userId}</td>
                <td>{post.title}</td>
                <td>{post.body}</td>
              </tr>
            ))}
...

上記にて、userIdを変更することで投稿内容を特定のユーザーのみにフィルターすることができます。