【React-TS + MUI】①メンバーリストのWEBアプリを作成してみた

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

こんにちは、2022年4月入社の庄野です。今回は、新卒1年目の私がReact-TypeScript + Material-UI (以下、React,TS,MUI)の技術を使った、簡単なWEBアプリの作り方を3つの記事にわたって1から紹介したいと思います。

この記事は導入編です。

1. 導入編

2. カスタムフック編

3. リスト表示編

対象

React、TS初心者
APIを扱ってみたい人
カスタムフックを作成したい人
MUIを使ってみたい人

やること

プロジェクトの作成
API用のモックサーバーを立てる
APIを取得するカスタムフック作成
MUIを使ってユーザーをリスト表示する

使用環境
開発環境は以下の通りです。

$ node --version
v16.17.1
$ npm --version
8.15.0

"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.6",
"@mui/lab": "^5.0.0-alpha.102",
"@mui/material": "^5.10.7",
"@stoplight/prism-cli": "^4.10.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",

1 はじめに
2 準備 + 環境構築

はじめに

React-TypeScriptとは

本記事で扱うReactとは、Facebook社が開発したWEBサイトやWEBアプリのUI部分を開発するためのJavaScriptライブラリです。現在は、Facebookをはじめ、InstagramやSlackなどで採用されています。
Reactの特徴として、以下が挙げられます。

Declarative(宣言的)
- View(見た目)を宣言するように実装できるため、コードがシンプルになります。
- 表示するデータが変更された際、自動的に更新を行ってくれます。
Component-Based(コンポーネント指向)
- コンポーネント指向、つまりいくつかの構成要素を組み合わせて開発されます。
- 一部の変更は、関連するコンポーネントのみ変更すれば良いので管理がしやすいです。
- 既存のコンポーネントを再利用できる。
Learn Once, Write Anywhere(一度学べば、どこでも使える)
- 既存のコードを書き換えることなく新しい機能を追加できます。
- どんなWEBアプリでも導入できます。

今回はReactに加えてTSを使います。このTSはJavaScriptと同じような構文を使えます。違うのは、変数のデータ型をあらかじめ決めることのできることです。つまり、コンパイルする時点で変数の型が決定するので、その時点でエラーがわかることやコードの読みやすさが大きなメリットとなります。

Material-UIとは

MUIとは、React用のUIコンポーネントフレームワークです。Googleのマテリアルデザインの概念を基に開発されており、豊富なコンポーネントを提供しています。統一されたデザインで実装できるのでこういったライブラリが使えると、一定のデザイン性を保証できます。

この記事で作成するもの

この記事で目指す作成物は以下のようなものです。ユーザーのアイコンと名前、勤務状態を表示させます。勤務状態によって、フィルタリングもできるものを作ろうと思っています。

仕組みとしては簡単ですが以下の図のようになります。

API用のモックサーバー立ててからAPIを取得し、それをUserListコンポーネントで表示します。

準備 + 環境構築

プロジェクト作成

まずは、”member-list-app”のプロジェクトを開始します。任意の作業ディレクトリで、

$ npx create-react-app --template typescript member-list-app

とします。
試しに出力してみましょう。

$ cd member-list-app
$ npm start

このコマンドを打つとローカルホスト(デフォルトだとhttp://localhost:3000)が立ち上がって、
ブラウザでアクセスすると以下のように出力されると思います。

ライブラリインストール

次に必要なライブラリをインストールします。

$ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/lab axios

また、今回はAPIをモックサーバー立てて取得するので、

$ npm install @stoplight/prism-cli

とします。

以上で、環境構築できたので各コンポーネントを作成していきます。

コンポーネント構成

‘src’配下に以下のようにコンポーネントを作成します。

member-list-app/src/components (main ✗) $ tree
.
├── atoms
│   └── UserIcon.tsx
├── hooks
│   └── useAllUsers.tsx
├── layout
│   ├── Header.tsx
│   └── Main.tsx
├── molecules
│   └── UserCard.tsx
├── organisms
│   └── UserList.tsx
├── pages
│   └── MemberList.tsx
└── types
    └── usertype.ts

デフォルトのくるくる回ってるページは使わないので、./components/pages/MemberListのコンポーネントが表示されるようにしておきます。なので、App.tsxは以下のようにしておきましょう。

import React from "react";
import "./App.css";
import { MemberList } from "./components/pages/MemberList";

function App() {
  return (
    <div className="App">
        <MemberList /> // メンバー一覧
    </div>
  );
}

export default App;

また、Main.tsx、Header.tsxの詳しい説明は省きますが、メインにユーザの一覧(リスト表示編で作るコンポーネント)、ヘッダーに”User List”と表示するようにします。ソースは以下を見てください。

import React from "react";
import { memo, FC } from "react";

import { Box } from "@mui/material";

import { UserList } from "../organisms/UserList";

export const Main: FC = memo(() => {
  return (
    <>
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          bgcolor: "background.default",
          width: "100%",
          height: "100%",
        }}
      >
        <UserList />
      </Box>
    </>
  );
});

import React from "react";
import { memo, FC } from "react";

import { AppBar } from "@mui/material";

export const Header: FC = memo(() => {
  return (
    <AppBar
      position="sticky"
      color={`default`}
    >
        <h1>User List</h1>
    </AppBar>
  );
});

簡単に言うとヘッダーにAppBar、メインにBoxというMUIのコンポーネントを使用して、レイアウトしました。

`MemberList.tsx`に以下のように記載しておきます。

import { memo, FC } from "react";
import { Header } from "../layout/Header";
import { Main } from "../layout/Main";

export const MemberList: FC = memo(() => {

  return (
    <>
      <Header />
      <Main />
    </>
  );
});

ここまでで、環境を構築し、React-TSの雛形プロジェクトを作成しました。

導入編は以上となります。

次回の記事は、APIを取得するカスタムフック作成していきます。