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

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

* [モダンJavaScriptの基礎から始める挫折しないためのReact入門](URL "https://www.udemy.com/course/modern_javascipt_react_beginner/learn/lecture/23293780#content")
講師：じゃけぇさん
* [Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版](URL "https://www.udemy.com/course/react_stepup/learn/lecture/24823750#overview")
講師：じゃけぇさん
* [【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript](URL "https://www.udemy.com/course/react-complete-guide/learn/lecture/33043696#overview")
講師：CodeMafiaさん

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

> 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の内容はラテン語か何かで書かれているようです:laughing:

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

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

```jsx
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>
    </>
  );
};
```

コースの中では[Chakra UI](URL "https://chakra-ui.com/")が使われていたのですが、今回は[MUI](URL "https://mui.com/")を使ってみました。
こういったUIフレームワークの色々なComponentsを試してみたい！といった場合にも、JSONPlaceholderのようなデータが用意されていると大変助かります。以下、やってみた画面をご紹介します。

## [AppBar](URL "https://mui.com/material-ui/react-app-bar/"), [Card](URL "https://mui.com/material-ui/react-card/"), [Icons](URL "https://mui.com/material-ui/icons/")

### AppBarにアイコンを設置して、各ページへの導線を用意する
色々なアイコンが用意されていて、選ぶのが楽しいです。

### Cardに説明文とリンクを載せて並べて表示する
（説明文は自分で適当に書いています。）
レイアウトのために[Grid](URL "https://mui.com/material-ui/react-grid/")も使いました。こちらの[Interactive](URL "https://mui.com/material-ui/react-grid/#interactive")のサンプルが分かりやすくて便利です。

![Home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543/064ad313-40aa-5c0b-9615-c60dbbe793ee.png)

## [Table](URL "https://mui.com/material-ui/react-table/")

### 各データを一覧にして表示してみる

ソート機能をつけたり、行をクリックすると行間に詳細情報を表示する方法もあるようです。
下記ではCompletedがtrueだったらチェックボックスにチェックが入るようにしてみました。
![TableWithCheckbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543/f6892b69-f3af-d475-6601-598183835ef2.png)

## [Tabs](URL "https://mui.com/material-ui/react-tabs/")

### 各ユーザーのposts, todos, albumsのデータをタブで出し分けてみる
初心者がコンポーネントの分け方やpropsの渡し方を試行錯誤するのにちょうどいい題材といった感じです。

![Tabs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543/b343859a-cf4a-bab1-4c4d-a7a8fc4c046f.png)

## [Avatar](URL "https://mui.com/material-ui/react-avatar/")

### 各アルバムに含まれている画像をアイコン風に表示してみる
ユーザーのアイコン表示でよくある見せ方ですね。
![AvatarGroup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543/5f1707ab-16be-da6b-c63b-ccc24079deaf.png)

## [ImageList](URL "https://mui.com/material-ui/react-image-list/")

### アルバムの画像を並べてみる
ただのベタ塗りなので味気ないですが…

![ImageList.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543/4d7efc5b-2ba2-3d8b-6625-c034fb6ba91a.png)

## [Dialog](URL "https://mui.com/material-ui/react-dialog/")

### アルバムの画像をクリックして拡大表示してみる
簡単にできました。
![Dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543/b6e5421e-2118-bcaf-7326-3facdf4bcc0f.png)


## [Pagination](URL "https://mui.com/material-ui/react-pagination/")

### commentsのデータをページ毎に表示してみる

１つのpostIdにつき5件のコメントデータがあったので、postIdをページ番号に見立てて試してみました。

![Pagination.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543/193b4b73-2ee6-b200-6f5b-14a2ec5277f2.png)

# 以上です

Udemyで動画を見ながら真似して書いている時と違って、ここまでやってみると習得してきている実感が湧いてきます。
講師の方々、お蔭様でここまで出来るようになりました、ありがとうございました！