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

★★★ イベント情報 ★★★
◇【参加登録受付中】Kong Summit, Japan 2022◇
今年は12月15日に開催決定!最新情報とデモとともにKongと事例/ユースケースのご紹介などAPIエコノミーやマイクロサービスに関心のある開発者の方にとっては必見です。ぜひお申し込みください!イベントの詳細・お申込はこちら

★★★ Live配信告知 ★★★
◇11月29日開催 19:00~ 世界一わかりみの深いクラウドネイティブon Azure◇
テーマは「Web App for ContainersとKeycloakで最速OpenID Connect」です!

◇11月30日開催 17:00〜 知ってると ちょっと便利なコマンド集◇
知っていると少し効率の上がるようなコマンドをいくつかご紹介します!

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

この記事は導入編です。

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.tsxHeader.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を取得するカスタムフック作成していきます。




ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる