React(MUI)+PHP(Laravel)+PostgreSQLで環境構築～DB取得まで

今まで、WEBアプリはjsp/servletばかりで開発していました。
今回はSPAで簡単なCRUDアプリを作成するために必要な勉強をしました。
その際に一連の情報がまとまっていると便利かと思い、備忘録として記していきたいと思います。
改善点・誤記等ありましたら、コメントにてご指摘いただけると幸いです。

# 目次
- [やりたいこと](#やりたいこと)
- [環境構築](#環境構築)
  - [事前準備](#事前準備)
  - [React](#react)
      - [React基本パッケージインストール](#react基本パッケージインストール)
      - [Reactプロジェクトの作成](#reactプロジェクトの作成)
      - [Reactローカルサーバー立ち上げ](#reactローカルサーバー立ち上げ)
      - [React用ライブラリインストール](#react用ライブラリインストール)
  - [PHP](#php)
      - [PHP基本パッケージインストール](#php基本パッケージインストール)
      - [PHPプロジェクトの作成](#phpプロジェクトの作成)
      - [PHPローカルサーバー立ち上げ](#phpローカルサーバー立ち上げ)
  - [PostgreSQL](#postgresql)
      - [PostgreSQL環境構築](#postgresql環境構築)
      - [PostgreSQL準備](#postgresql準備)
- [実装](#実装)
    - [メインページ作成](#メインページ作成)
    - [社員一覧取得処理事前準備](#社員一覧取得処理事前準備)
    - [一覧取得処理作成](#一覧取得処理作成)
        - [バックエンド](#バックエンド)
        - [フロントエンド](#フロントエンド)
    - [確認](#確認)
- [最後に](#最後に)
- [参考リンク](#参考リンク)

# やりたいこと
ローカル環境下で社員の一覧取得が行えるWEBアプリケーションの作成を目標とします。
使用する環境については、以下の通りとなります。

- Ubuntu 20.04.5 LTS(Windows10 WSL2)
- react@18.2.0
    - mui@5.10.16
    - axios@1.2.0
- PHP 8.1.13
- PostgreSQL 15.1

# 環境構築

## 事前準備
今回はLinux上で環境を構築します。
windowsで環境構築する場合は、WSLを通してLinuxを利用します。
※WSLについては、下記リンクをご参考ください。

https://qiita.com/whim0321/items/ed76b490daaec152dc69

## React

### React基本パッケージインストール

#### 0. パッケージの更新
後述Node.js、npmをインストールする前にパッケージの更新を実施します。
```Bash
$ sudo apt update
$ sudo apt upgrade -y
```

#### 1. Node.jsのインストール
Node.jsがインストールされているか確認します。
```Bash
$ node -v
```
インストールされていない（バージョン情報が表示されない）場合、以下の通りインストールを実施します。
※バージョンが表示される場合は、「[2. npmのインストール](#2-npmのインストール)」へ進みます。
```Bash
$ sudo apt install nodejs
```
インストールができていることを確認します。
```Bash
$ node -v
v17.9.0
```

#### 2. npmのインストール
npmがインストールされているか確認します。
```Bash
$ npm -v
```
インストールされていない（バージョン情報が表示されない）場合、以下の通りインストールを実施します。
※バージョンが表示される場合は、「[Reactプロジェクトの作成](#reactプロジェクトの作成)」へ進みます。
```Bash
sudo apt install npm
```
インストールができていることを確認します。
```Bash
$ npm -v
8.5.5
```

### Reactプロジェクトの作成
Create React Appを使用して、プロジェクトを作成します。
※Create React Appについては、React公式サイトを参照してください。

https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app

コマンドは`npx create-react-app [プロジェクト名]`です。
プロジェクトでJavaScriptとTypeScriptのどちらを使用するか設定することができますが、今回はJavaScriptを選択します。
※デフォルトがJavaScript、オプションに`--typescript`を付与することでTypeScriptとなります。
```Bash
$ npx create-react-app emp_web
```
プロジェクトのディレクトリが作成されていることを確認します。
```Bash
$ ls
emp_web
```

### Reactローカルサーバー立ち上げ
作成したディレクトリに移動し、ローカルサーバーを立ち上げます。
```Bash
$ npm start
```
[http://localhost:3000/](http://localhost:3000/)にアクセスし、Reactのhelloページが表示されていれば立ち上げ完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952237/7f20c2a2-26f9-1bb4-a9f1-d8fc5f5b8653.png)

### React用ライブラリインストール
基本のパッケージ以外に今回のCRUDアプリに必要なライブラリをインストールします。

#### 1. MUIのインストール
MUIはUIコンポーネントを内包したフレームワークです。
Reactに相性の良いCSSフレームワークを探していたところ、おすすめとして「MUI」が上がっていたため今回は採用しました。
詳細は下記MUI公式サイトをご参照ください。

https://mui.com/

MUIをインストールする対象プロジェクトのディレクトリで以下の通り実施します。
```Bash
$ npm install --save @mui/material @mui/icons-material
$ npm install @emotion/react @emotion/styled @mui/styled-engine
```
ライブラリがインストールされていることを確認します。
```
$ npm list --depth=0
emp_web@0.1.0 [プロジェクトのパス]/emp_web
├── @emotion/react@11.10.5
├── @emotion/styled@11.10.5
├── @mui/icons-material@5.10.16
├── @mui/material@5.10.16
├── @mui/styled-engine@5.10.16
```

#### 2. Axiosのインストール
AxiosはAPI通信を簡単に行うことができるライブラリです。
PHPで作成するバックエンド側のアプリケーションとの通信に使用します。

https://axios-http.com/

Axiosをインストールする対象プロジェクトのディレクトリで以下の通り実施します。
```bash
$ npm install axios
```
ライブラリがインストールされていることを確認します。
```
$ npm list --depth=0
emp_web@0.1.0 [プロジェクトのパス]/emp_web
├── axios@1.2.0
```

## PHP

### PHP基本パッケージインストール

#### 1. PHPがすでにインストールされているか確認
```bash
$ php -v
```
インストールされていた場合は、「[4. Composerのインストール](#4-composerのインストール)」へ進みます。

#### 2. パッケージの更新
```bashsudo apt-get update
$ sudo apt -y install software-properties-common
$ sudo add-apt-repository ppa:ondrej/php
$ sudo apt-get update
```

#### 3. PHPのインストール
```bash
$ sudo apt install php8.1 php8.1-mbstring php8.1-dom
```
PHPがインストールされていることを確認します。
```bash
$ php -v
PHP 8.1.13 (cli) (built: Nov 26 2022 14:07:36) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.13, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.13, Copyright (c), by Zend Technologies
```

#### 4. Composerのインストール
Laravelを使用したPHPプロジェクトを作成する際に必要となるComporserをインストールします。

https://getcomposer.org/

[公式サイトの「Download」](https://getcomposer.org/download/)に記載の通りコマンドを実行します。
```bash
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
$ php -r "if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
$ php composer-setup.php
$ php -r "unlink('composer-setup.php');"
```
composerコマンドを利用できるようにPATH配下のディレクトリに格納します。
その後、移動したしたファイルを実行できるよう、権限を付与します。
```bash
$ sudo mv composer.phar /usr/local/bin/composer
$ sudo chmod +x /usr/local/bin/composer
```

Composerがインストールされていることを確認します。
```bash
$ composer -V
Composer version 2.3.5 2022-04-13 16:43:00
```

#### 5. php-curlのインストール
Comporserでプロジェクトを作成する際、必要となるモジュールです。
php-curlがインストールされているか確認します。
```bash
$ php -m
```
インストールされていない（出力に`curl`が含まれていない）場合、以下の通りインストールを実施します。
※バージョンが表示される場合は、「[6. php-pgsqlのインストール](#6-php-pgsqlのインストール)」へ進みます。
```bash
$ sudo apt-get install php8.1-curl
```
PHPインストールされているモジュールの一覧に`curl`が含まれていることを確認します。
```bash
$ php -m
```

#### 6. php-pgsqlのインストール
PHPからPostgreSQLへデータベースアクセスをする際に必要となるモジュールです。
以下の通りインストールを実施します。
```bash
sudo apt-get install php8.1-pgsql
```
PHPインストールされているモジュールの一覧に`pgsql`が含まれていることを確認します。
```bash
$ php -m
```

### PHPプロジェクトの作成
Composerを使用して、プロジェクトを作成します。
オプションを設定することでフレームワークにLaravelを使用することができます。
コマンドは`composer create-project laravel/laravel --prefer-dist [プロジェクト名]`です。

https://laravel.com/docs/9.x#your-first-laravel-project

```bash
$ composer create-project laravel/laravel --prefer-dist emp_ap
```
プロジェクトのディレクトリが作成されていることを確認します。
```Bash
$ ls
emp_ap
```

### PHPローカルサーバー立ち上げ

作成したディレクトリに移動し、ローカルサーバーを立ち上げます。
```Bash
$ php artisan serve
```
[http://localhost:8000](http://localhost:8000)にアクセスし、Laravelのhelloページが表示されていれば立ち上げ完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952237/daddb9b9-583b-2215-af73-7879531e9fb8.png)

## PostgreSQL環境構築

### PostgreSQLインストール
公式サイトを参考にインストールします。

https://www.postgresql.org/download/linux/ubuntu/

```bash
$ sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
$ wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
$ sudo apt-get update
$ sudo apt-get -y install postgresql
```
PostgreSQLがインストールされていることを確認します。
```bash
$ psql --version
psql (PostgreSQL) 15.1 (Ubuntu 15.1-1.pgdg20.04+1)
```
## PostgreSQL

### PostgreSQL準備

#### 1. PostgreSQLサーバー立ち上げ
```bash
$ sudo service postgresql start

// ※サーバーを止める場合
$ sudo service postgresql stop
```

#### 2. PostgreSQL操作コンソール起動
linuxユーザを`postgres`に切り替えます。
```bash
$ sudo su - postgres
```
操作コンソールを起動します。
```bash
$ psql
psql (15.1 (Ubuntu 15.1-1.pgdg20.04+1))
"help"でヘルプを表示します。

postgres=#
```

#### 3. postgresユーザのパスワードを設定
最初に、postgresユーザにパスワードを与えます。
``` sql
ALTER ROLE postgres PASSWORD '[任意のパスワード]';
```

#### 4. 今回に必要なユーザとデータベースを作成
以下の通り、ユーザーを作成します。
また、ログイン・データベース作成の権限を与えます。
```sql
CREATE ROLE emp_sys_user;
ALTER ROLE emp_sys_user PASSWORD '[任意のパスワード]';
ALTER ROLE emp_sys_user LOGIN;
ALTER ROLE emp_sys_user CREATEDB;
```
今回使用するデータベースを作成します。
```sql
CREATE DATABASE emp_sys_db WITH OWNER emp_sys_user;
```
作成したユーザ`emp_sys_user`でデータベース`emp_sys_db`に接続し、データベース・ユーザが作成されていることを確認します。
```sql
\c emp_sys_db - emp_sys_user
```
※以下のエラーが出力された場合は[こちらのサイト](https://amg-solution.jp/blog/25332)を参照してpeer認証からパスワード認証へ変更します。
```
FATAL:  ユーザー"emp_sys_user"で対向(peer)認証に失敗しました
```
※一度ユーザーを登録すると、linuxのカレントユーザが`postgres`でなくても、psqlコマンドから直接操作コンソールへ作成したユーザを使用して起動可能です。
コマンドは`psql -d [データベース名] -U [ユーザー名]`
```bash
$ psql -d emp_sys_db -U emp_sys_user
ユーザー emp_sys_user のパスワード:
psql (15.1 (Ubuntu 15.1-1.pgdg20.04+1))
"help"でヘルプを表示します。

emp_sys_db=>
```

# 実装
環境の構築が完了したので、続いて実装していきます。
今回はMUIの公式サンプルコードにある「Dashboard」をベースに進めていきます。
※[MUI公式のDashboardデモページ](https://mui.com/material-ui/getting-started/templates/dashboard/)

https://mui.com/material-ui/getting-started/templates/

## メインページ作成

### MUIサンプルコードダウンロード
GitHubにサンプルコードがあるので、ダウンロードしてきます。

https://github.com/mui/material-ui/tree/v5.6.4/docs/data/material/getting-started/templates/dashboard

上記リポジトリには、js版、ts版の二種類ありますが今回はjsでプロジェクトを作成しているため、.jsのファイルを使用します。

### サンプルコードを配置

上記で作成したReactプロジェクトのディレクトリに、以下の通り格納用のディレクトリ`dashboard`を作成します。
`emp_web/src/dashboard`

作成したディレクトリに以下のファイルを配置します。
- Dashboard.js
- Deposits.js
- listItems.js
- Orders.js
- Title.js

### サンプルコードの表示
配置したソースを適用するために`emp_web/src/App.js`を修正します。
※Reactの基本的な知識については、公式のチュートリアルを参照してください。

https://reactjs.org/tutorial/tutorial.html

```diff_javascript:emp_web/src/App.js
+import Dashboard from './dashboard/Dashboard'
-import logo from './logo.svg';
-import './App.css';

function App() {
  return (
+    <Dashboard/>
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
  );
}

export default App;
```
また、今回のライブラリ構成では`chart`コンポーネントは使用できないため`Dashboard`コンポーネントから削除します。

```diff_javascript:emp_web/src/dashboard/Dashboard.js
import * as React from 'react';
import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import MuiDrawer from '@mui/material/Drawer';
import Box from '@mui/material/Box';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import Badge from '@mui/material/Badge';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Link from '@mui/material/Link';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import NotificationsIcon from '@mui/icons-material/Notifications';
import { mainListItems, secondaryListItems } from './listItems';
-import Chart from './Chart';
import Deposits from './Deposits';
import Orders from './Orders';

/*~中略~*/
function DashboardContent() {
  const [open, setOpen] = React.useState(true);
  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
/*~中略~*/
          <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
            <Grid container spacing={3}>
-              {/* Chart */}
-              <Grid item xs={12} md={8} lg={9}>
-                <Paper
-                  sx={{
-                    p: 2,
-                    display: "flex",
-                    flexDirection: "column",
-                    height: 240,
-                  }}
-                >
-                  <Chart />
-                </Paper>
-              </Grid>
              {/* Recent Deposits */}
              <Grid item xs={12} md={4} lg={3}>
                <Paper
                  sx={{
                    p: 2,
                    display: "flex",
                    flexDirection: "column",
                    height: 240,
                  }}
                >
                  <Deposits />
                </Paper>
              </Grid>
              {/* Recent Orders */}
              <Grid item xs={12}>
                <Paper sx={{ p: 2, display: "flex", flexDirection: "column" }}>
                  <Orders />
                </Paper>
              </Grid>
            </Grid>
            <Copyright sx={{ pt: 4 }} />
          </Container>
  );
}
```
ローカルサーバーを起動し、画面が出力されることを確認します。
※すでにサーバーを起動している場合は、修正し保存した時点でホットデプロイが走るためすぐに確認ができます。
```bash
$ npm start
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952237/27a9c7d4-568e-5298-5e6e-ebffa18977d6.png)

### サンプルコードを修正
不要なレイアウトを削除し、シンプルなメインページとします。

```diff_javascript:emp_web/src/dashboard/Dashboard.js
import * as React from "react";
import { styled, createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import MuiDrawer from "@mui/material/Drawer";
import Box from "@mui/material/Box";
import MuiAppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import List from "@mui/material/List";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import Badge from "@mui/material/Badge";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
-import Link from "@mui/material/Link";
import MenuIcon from "@mui/icons-material/Menu";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import NotificationsIcon from "@mui/icons-material/Notifications";
import { mainListItems, secondaryListItems } from "./listItems";
-import Deposits from "./Deposits";
import Orders from "./Orders";

-function Copyright(props) {
-  return (
-    <Typography
-      variant="body2"
-      color="text.secondary"
-      align="center"
-      {...props}
-    >
-      {"Copyright © "}
-      <Link color="inherit" href="https://mui.com/">
-        Your Website
-      </Link>{" "}
-      {new Date().getFullYear()}
-      {"."}
-    </Typography>
-  );
-}

const drawerWidth = 240;

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
  transition: theme.transitions.create(["width", "margin"], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));

const Drawer = styled(MuiDrawer, {
  shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
  "& .MuiDrawer-paper": {
    position: "relative",
    whiteSpace: "nowrap",
    width: drawerWidth,
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
    boxSizing: "border-box",
    ...(!open && {
      overflowX: "hidden",
      transition: theme.transitions.create("width", {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
      width: theme.spacing(7),
      [theme.breakpoints.up("sm")]: {
        width: theme.spacing(9),
      },
    }),
  },
}));

const mdTheme = createTheme();

function DashboardContent() {
  const [open, setOpen] = React.useState(true);
  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <ThemeProvider theme={mdTheme}>
      <Box sx={{ display: "flex" }}>
        <CssBaseline />
        <AppBar position="absolute" open={open}>
          <Toolbar
            sx={{
              pr: "24px", // keep right padding when drawer closed
            }}
          >
            <IconButton
              edge="start"
              color="inherit"
              aria-label="open drawer"
              onClick={toggleDrawer}
              sx={{
                marginRight: "36px",
                ...(open && { display: "none" }),
              }}
            >
              <MenuIcon />
            </IconButton>
            <Typography
              component="h1"
              variant="h6"
              color="inherit"
              noWrap
              sx={{ flexGrow: 1 }}
            >
              Dashboard
            </Typography>
            <IconButton color="inherit">
              <Badge badgeContent={4} color="secondary">
                <NotificationsIcon />
              </Badge>
            </IconButton>
          </Toolbar>
        </AppBar>
        <Drawer variant="permanent" open={open}>
          <Toolbar
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-end",
              px: [1],
            }}
          >
            <IconButton onClick={toggleDrawer}>
              <ChevronLeftIcon />
            </IconButton>
          </Toolbar>
          <Divider />
          <List component="nav">
            {mainListItems}
-            <Divider sx={{ my: 1 }} />
-            {secondaryListItems}
          </List>
        </Drawer>
        <Box
          component="main"
          sx={{
            backgroundColor: (theme) =>
              theme.palette.mode === "light"
                ? theme.palette.grey[100]
                : theme.palette.grey[900],
            flexGrow: 1,
            height: "100vh",
            overflow: "auto",
          }}
        >
          <Toolbar />
          <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
            <Grid container spacing={3}>
-              {/* Recent Deposits */}
-              <Grid item xs={12} md={4} lg={3}>
-                <Paper
-                  sx={{
-                    p: 2,
-                    display: "flex",
-                    flexDirection: "column",
-                    height: 240,
-                  }}
-                >
-                  <Deposits />
-                </Paper>
-             </Grid>
              {/* Recent Orders */}
              <Grid item xs={12}>
                <Paper sx={{ p: 2, display: "flex", flexDirection: "column" }}>
                  <Orders />
                </Paper>
              </Grid>
            </Grid>
            <Copyright sx={{ pt: 4 }} />
          </Container>
        </Box>
      </Box>
    </ThemeProvider>
  );
}

export default function Dashboard() {
  return <DashboardContent />;
}
```
サイドバーのリストも減らします。
```diff_javascript:emp_web/src/dashboard/listItems.js
import * as React from 'react';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
-import ListSubheader from '@mui/material/ListSubheader';
import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import PeopleIcon from '@mui/icons-material/People';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import LayersIcon from '@mui/icons-material/Layers';
-import AssignmentIcon from '@mui/icons-material/Assignment';

export const mainListItems = (
  <React.Fragment>
    <ListItemButton>
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <ShoppingCartIcon />
-      </ListItemIcon>
-      <ListItemText primary="Orders" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <PeopleIcon />
-      </ListItemIcon>
-      <ListItemText primary="Customers" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <BarChartIcon />
-      </ListItemIcon>
-      <ListItemText primary="Reports" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <LayersIcon />
-      </ListItemIcon>
-      <ListItemText primary="Integrations" />
-    </ListItemButton>
  </React.Fragment>
);

-export const secondaryListItems = (
-  <React.Fragment>
-    <ListSubheader component="div" inset>
-      Saved reports
-    </ListSubheader>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Current month" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Last quarter" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Year-end sale" />
-    </ListItemButton>
-  </React.Fragment>
-); 

```
Orderのコンポーネントは、後ほど社員一覧として改造するため残しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952237/c9a3622e-cd20-79ef-7a36-8d1356279e9c.png)

## 社員一覧取得処理事前準備

###  社員テーブル作成
今回のCRUD処理を行うテーブルを作成します。
前述で作成した`emp_sys_db`に以下の通りテーブルを登録します。
※Laravelで連携するテーブルの名称は末尾に`s`を付けるようにします。
```sql
CREATE TABLE employees (
    employee_id CHAR(4) PRIMARY KEY,
    employee_name VARCHAR(60) NOT NULL,
    employee_mail VARCHAR(254)
);
```
続いて、作成した`employees`テーブルに初期データの投入を行います。
```sql
INSERT INTO employees VALUES ('0001', '田中 太郎', 'tanaka_taro@example.com');
INSERT INTO employees VALUES ('0002', '伊藤 花子', 'ito_hanako@example.com');
```
データが登録されていることを確認します。
```sql
SELECT * FROM employees;
employee_id | employee_name |      employee_mail
-------------+---------------+-------------------------
 0001        | 田中 太郎     | tanaka_taro@example.com
 0002        | 伊藤 花子     | ito_hanako@example.com
(2 行)
```



## 一覧取得処理作成

### バックエンド
まずは、DBへ接続するための設定を行います。
`emp_ap/.env`にDB接続情報を記述します。
```diff_php:emp_ap/.env
~中略~

-DB_CONNECTION=mysql
-DB_HOST=127.0.0.1
-DB_PORT=3306
-DB_DATABASE=laravel
-DB_USERNAME=root
-DB_PASSWORD=
+LOG_CHANNEL=stack
+DB_CONNECTION=pgsql
+DB_HOST=127.0.0.1
+DB_PORT=5432
+DB_DATABASE=emp_sys_db
+DB_USERNAME=emp_sys_user
+DB_PASSWORD=[設定したパスワード]
```

作成したテーブル`employees`と連携するためのモデル・リソース・コントローラを作成します。

#### モデル作成
モデルについての詳細な説明は下記リンクをご参照ください。

https://codelikes.com/laravel-model/

PHPプロジェクトのディレクトリ内でコマンドを実行します。
モデルの作成コマンドは`php artisan make:model [テーブル名]`です。
モデル名は、連携するテーブル名の単数形とします。
```bash
$ php artisan make:model Employee
   INFO  Model [app/Models/Employee.php] created successfully.
```
`emp_ap/app/Models/`配下に`Employee.php`が作成されていることを確認します。

### リソース作成
リソースは取得したテーブル定義と、フロントエンドに引き渡すパラメータ(json)との紐づけを行うものです。
PHPプロジェクトのディレクトリ内でコマンドを実行します。
モデルの作成コマンドは`php artisan make:resource [テーブル名]Resource`です。
```bash
$ php artisan make:resource EmployeeResource
   INFO  Resource [app/Http/Resources/EmployeeResource.php] created successfully.
```
`emp_ap/app/Http/Resources/`配下に`EmployeeResource.php`が作成されていることを確認します。
今回のテーブルレイアウトに合わせるため`EmployeeResource.php`を修正します。
```diff_php:emp_ap/app/Http/Resources/EmployeeResource.php
<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class EmployeeResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
     */
    public function toArray($request)
    {
-        return parent::toArray($request);
+        return [
+            'employee_id' => $this->employee_id,
+            'employee_name' => $this->employee_name,
+            'employee_mail' => $this->employee_mail,
+        ];
    }
}
```

#### コントローラ作成
コントローラについての詳細な説明は下記リンクをご参照ください。

https://codelikes.com/laravel-controller/

PHPプロジェクトのディレクトリ内でコマンドを実行します。
モデルの作成コマンドは`php artisan make:controller [テーブル名]Controller`です。
```bash
$ php artisan make:controller EmployeeController
   INFO  Controller [app/Http/Controllers/EmployeeController.php] created successfully.
```
`emp_ap/app/Http/Controllers/`配下に`EmployeeController.php`が作成されていることを確認します。
`employees`テーブルからデータを取得するメソッドを`EmployeeController.php`に追加します。
※Laravelを用いたDB取得方法については以下リンクをご参照ください。

https://blog.capilano-fw.com/?p=665

```diff_php:emp_ap/app/Http/Controllers/EmployeeController.php
<?php

namespace App\Http\Controllers;

-use Illuminate\Http\Request;
use App\Http\Resources\EmployeeResource;
use App\Models\Employee;

class EmployeeController extends Controller
{
    //
+    public function getEmployeeAll()
+    {
+        return EmployeeResource::collection(
+            Employee::get()
+        );
+    }
}

```
#### ルートの設定
上記のコントローラをAPIとして呼び出せるように`emp_ap/routes/api.php`ルートを設定します。

```diff_php:emp_ap/routes/api.php
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

-Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
-    return $request->user();
-});

+Route::group( ['middleware' => 'api'], function(){
+    Route::get('getemployeeall', 'App\Http\Controllers\EmployeeController@getEmployeeAll');
+});
```
API連携で社員情報を取得できるようになったので[http://127.0.0.1:8000/api/getemployeeall](http://127.0.0.1:8000/api/getemployeeall)へアクセスして取得できることを確認します。
※ローカルサーバーを起動していない場合は起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952237/711be7f1-b008-1bdb-3d4d-bcef8ab050c0.png)
以上でバックエンド側は完了です。

### フロントエンド

### 一覧出力用コンポーネント作成
サンプルソースの`Order`コンポーネントを修正して作成していきます。
APIの呼び出しや不要なものの削除や文言の修正等を以下のとおり実施します。
```diff_javascript:emp_web/src/dashboard/Orders.js
import * as React from 'react';
-import Link from '@mui/material/Link';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Title from './Title';
+import { useState, useEffect } from "react";
+import axios from "axios";

-// Generate Order Data
-function createData(id, date, name, shipTo, paymentMethod, amount) {
-  return { id, date, name, shipTo, paymentMethod, amount };
-}

-const rows = [
-  createData(
-    0,
-    '16 Mar, 2019',
-    'Elvis Presley',
-    'Tupelo, MS',
-    'VISA ⠀•••• 3719',
-    312.44,
-  ),
-  createData(
-    1,
-    '16 Mar, 2019',
-    'Paul McCartney',
-    'London, UK',
-    'VISA ⠀•••• 2574',
-    866.99,
-  ),
-  createData(2, '16 Mar, 2019', 'Tom Scholz', 'Boston, MA', 'MC ⠀•••• 1253', 100.81),
-  createData(
-    3,
-    '16 Mar, 2019',
-    'Michael Jackson',
-    'Gary, IN',
-    'AMEX ⠀•••• 2000',
-    654.39,
-  ),
-  createData(
-    4,
-    '15 Mar, 2019',
-    'Bruce Springsteen',
-    'Long Branch, NJ',
-    'VISA ⠀•••• 5919',
-    212.79,
-  ),
-];

-function preventDefault(event) {
-  event.preventDefault();
-}

export default function Orders() {
+  const [rows, setRows] = useState([]);

+  useEffect(() => {
+    axios
+      .get("http://127.0.0.1:8000/api/getemployeeall")
+      .then((res) => {
+        setRows(res.data.data);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }, []);

  return (
    <React.Fragment>
+      <Title>Employee List</Title>
-      <Title>Recent Orders</Title>
      <Table size="small">
        <TableHead>
          <TableRow>
+            <TableCell>社員ID</TableCell>
+            <TableCell>名前</TableCell>
+            <TableCell>メールアドレス</TableCell>
-            <TableCell>Date</TableCell>
-            <TableCell>Name</TableCell>
-            <TableCell>Ship To</TableCell>
-            <TableCell>Payment Method</TableCell>
-            <TableCell align="right">Sale Amount</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
+           <TableRow key={row.employee_id}>
-           <TableRow key={row.id}>
+             <TableCell>{row.employee_id}</TableCell>
+             <TableCell>{row.employee_name}</TableCell>
+             <TableCell>{row.employee_mail}</TableCell>
-             <TableCell>{row.id}</TableCell>
-             <TableCell>{row.name}</TableCell>
-             <TableCell>{row.shipTo}</TableCell>
-             <TableCell>{row.paymentMethod}</TableCell>
-             <TableCell align="right">{`$${row.amount}`}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
-      <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
-        See more orders
-      </Link>
    </React.Fragment>
  );
}

```

#### 修正内容の説明
上記で修正した、不要項目の削除や、文言修正以外の説明をしていきます。

##### 取得データの定義
画面へ出力する可変項目について以下の通り定義します。
```javascript
const [rows, setRows] = useState([]);
```
[{変数}, {Setメソッド}]として定義します。
変数の値を変更する場合はSetメソッドを通して設定します。

##### API呼び出し
useEffectを使用して、初回レンダリング時にAPIの呼び出しを実施しています。
APIの呼び出しには、ライブラリ`axios`を使用しています。
`axios.get()`にバックエンド側で設定したAPIのURLを設定します。
最後に、APIからのレスポンスを定義した`setRows`を使用して`rows`に格納しています。
```javascript
  useEffect(() => {
    axios
      .get("http://127.0.0.1:8000/api/getemployeeall")
      .then((res) => {
        setRows(res.data.data);
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);
```
useEffectの詳しい説明はReact公式サイトをご確認ください。

https://ja.reactjs.org/docs/hooks-effect.html

##### 画面上のテーブル項目へバインド
上記で設定した`rows`をテーブルへバインドしています。
```javascript
<TableBody>
  {rows.map((row) => (
    <TableRow key={row.employee_id}>
      <TableCell>{row.employee_id}</TableCell>
      <TableCell>{row.employee_name}</TableCell>
      <TableCell>{row.employee_mail}</TableCell>
    </TableRow>
  ))}
</TableBody>
```

#### 確認

[http://localhost:3000/](http://localhost:3000/)にアクセスし、テーブルに登録されている社員情報がリストに表示されていれば完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952237/053add6f-2538-a667-a5eb-f8e559531d6f.png)

# 最後に
当初は、登録や更新の機能も記載していく予定でしたが、初投稿のこともあり、思っていたよりも執筆に時間がかかりデータの取得までとなってしまいました。
もし機会があれば、一通りのCRUDアプリ作成について執筆してみたいと思います。
また、今回はMUIのサンプルをそのまま使用しましたが、さらに細かくコンポーネントを分けたりしても面白いかもしれません。
他にもreact-routerを使用したルーティングや、ダークモードの実装などもMUIを用いることで簡単にできたのでこちらも書いてみたいです。

【余談】
今回はあまり紹介できませんでしたが、CSSフレームワークのMUIではbootstrapのようなブロック式でのレイアウトデザインや、一定の画面サイズを設定して表示/非表示の切り替えができるなど、レスポンシブなレイアウト作成も比較的容易に実装できる印象でした。
また、最後にMUIの`Text Field`について。
このコンポーネントは基本的なMUIのテキストボックスとなるのですが、ラベルとプレースホルダーが一体となっています。
この構造が一般的に使いやすいのかはさておき、エンジニアが担当するようなレイアウト作成の際に発生する、「ラベルがあるせいで項目の頭がそろわない」、「プレースホルダーだけだと、入力後に項目の内容が識別できない」などの細々した悩みがなくなり、個人的には画期的だなと思いました。

https://mui.com/material-ui/react-text-field/

他にも便利なコンポーネントはたくさんあり、動きは公式サイトから確認できるのでぜひ一度見てみてください。

# 参考リンク

https://qiita.com/whim0321/items/ed76b490daaec152dc69

https://ja.reactjs.org/

https://mui.com/

https://axios-http.com/

https://getcomposer.org/

https://laravel.com/

https://www.postgresql.org/

https://codelikes.com/laravel-model/

https://codelikes.com/laravel-controller/

https://blog.capilano-fw.com/?p=665