こんにちは、2022年4月入社の庄野です。今回は、新卒1年目の私がReact-TypeScript + Material-UI (以下、React,TS,MUI)の技術を使った、簡単なWEBアプリの作り方を3つの記事にわたって1から紹介したいと思います。
対象
- 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",はじめに
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>
);
});import { memo, FC } from "react";
import { Header } from "../layout/Header";
import { Main } from "../layout/Main";
export const MemberList: FC = memo(() => {
return (
<>
<Header />
<Main />
</>
);
});
