More than 1 year has passed since last update.

覚えたてのReactとMUIでJSONPlaceholderのデータを表示してみた

Posted at 2023-08-04

Udemyで下記React関連のコースを修了

モダンJavaScriptの基礎から始める挫折しないためのReact入門
講師：じゃけぇさん
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
講師：じゃけぇさん
【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript
講師：CodeMafiaさん

一通り学んだので、自分でも何かしらのデータを表示するものを作ってみたい！
というわけで、じゃけぇさんのコースの中でも採用されていたJSONPlaceholderがちょうど良さそうだったので、練習用に使ってみました。
ネタがなくて何を作れば良いか困っている方におすすめです。

When to use
JSONPlaceholder is a free online REST API that you can use whenever you need some fake data. It can be in a README on GitHub, for a demo on CodeSandbox, in code examples on Stack Overflow, ...or simply to test things locally.

サイト上の説明によると、GitHubのREADME、CodeSandbox、StackOverflow、そしてローカルでのテスト向けに、無料で利用可能だそうです。

JSONPlaceholderのデータはざっくりと下記のようになっています。
尚、todoやcommentの内容はラテン語か何かで書かれているようです

リソース名	件数	内容
users	10	id, name, username, email, address, phone, website, company のテキストデータがあり、addressとcompanyにはさらに詳細データがあります。
posts	100	userId, id, title, body のデータがあり、usersに紐づけられます。 1ユーザーあたり10件。
todos	200	userId, id, title, completed（boolean）のデータがあり、usersに紐づけられます。 1ユーザーあたり20件
albums	100	userId, id, title のデータがあり、usersに紐づけられます。 1ユーザーあたり10件
photos	5,000	albumId, id, title, url（600x600の画像パス）, thumbnailUrl（150x150の画像パス）のデータがあり、albumsに紐づけられます。 1アルバムあたり50件
comments	500	postId, id, name, email, body のデータです。こちらは特に他のデータと紐付けられるIDはありませんでした。

データの取得にはaxiosを利用しました。（これも上記のコースの中で学びました）
axiosインストール後、下記のようにデータを取得することができます。

import { useEffect, useState } from "react";

import axios from "axios";

export const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const getData = async () => {
      const res = await axios.get("https://jsonplaceholder.typicode.com/users");
      setUsers(res.data);
    };
    getData();
  }, []);

  return (
    <>
        <ul>
        {users.map((row) => (
            <li key={row.id}>{row.username}</li>
        ))}
        </ul>
    </>
  );
};