【React + Recoil】ちょっとリッチな ToDo アプリ

2020-06-182020-06-18

React

Recoil

Material-UI

アプリ開発

おいしそうなタイトルになってしまいました。

これまで React でやを作ってきましたが、

今回は ToDo アプリを作成しました。

タイピング練習アプリ制作のときにはスパイス的に入れていた Material-UI を、

今回は全面的に利用しています。

また、2020年5月に発表された状態管理ライブラリ Recoil を試験的に利用しています。

この記事では、Recoil の Atom という機能の簡単な説明をした後に、

実際の実装について書いていきます。

今回は React Hooks や Material-UI や TypeScript を利用していますが、

それらの簡単な説明についてはこちらをご覧ください。

関連記事【React 初心者】React でタイピング練習アプリ！

Recoil とは

Recoil は2020年5月に発表されたばかりの新しい React のための状態管理ライブラリです。

React はいくつかの state を持つことが多いのですが、

アプリが大規模になってくると、state の管理が React だけでは辛くなってきます。

また、コンポーネントが増えると、props で変数を上位のコンポーネントに渡していく「バケツリレー」が発生し、

効率が悪くなります。

そこで、Redux などの状態管理ライブラリが使われます。

管理下に置いている state はどのコンポーネントからも呼び出しが可能です。

Recoil は、React Hooks とほぼ同じ書き方で状態管理を実現でき、

Redux よりも直観的で導入しやすいと感じたので、

Recoil を選択しました。

Recoil のインストールは、コマンドでnpm install recoilまたはyarn add recoilとすることでできます。

Atom

Atom は管理下におく state のことです。

次のように定義します。

/src/atoms/text.js1import { atom } from 'recoil';
2
3export const textState = atom({
4    key: 'textState',
5    default: ''
6});

keyには全体の中で一意的な（グローバルにユニークな）ID を指定します。

defaultはデフォルト値です。

これをコンポーネントファイルの中で使うには、次のようにします。

/src/components/App.js1import { useRecoilState } from 'recoil';
2import { textState } from '../atoms/text';
3
4export default function App() {
5    const [text, setText] = useRecoilState(textState);
6    ...
7}

なんと React Hooks の useState とほぼ同じような形で state を呼び出すことができます。

また、読み込み専用、書き込み専用の関数も用意されています。

/src/components/App.js1import { useRecoilValue, useSetRecoilState } from 'recoil';
2import { textState } from '../atoms/text';
3
4export default function App() {
5    const text = useRecoilValue(textState);         // 読み込み専用
6    const setText = useSetRecoilState(textState);   // 書き込み専用
7    ...
8}

これらの関数を使うことで、より効率的な処理が行われます。

なお、Recoil を使うときは、

使用範囲に含める最上階層のコンポーネントをRecoilRootタグで囲む必要があります。

関連記事結局、React とは何なのか？

実装

ここからは、実際の実装について解説していきます。

ヘッダの設置

Material-UI App Bar より、Simple App Bar を使って、

ヘッダコンポーネントを作成します。

コードサンプルが提示されているので、基本的にはそれをもとにしてコーディングしていきます。

/src/components/TodoAppBar.tsx1import React from 'react';
2import AppBar from '@material-ui/core/AppBar';
3import Toolbar from '@material-ui/core/Toolbar';
4import Typography from '@material-ui/core/Typography';
5
6export default function TodoAppBar() {
7  return (
8    <AppBar position="static">
9      <Toolbar>
10        <Typography variant="h6">TO DO</Typography>
11      </Toolbar>
12    </AppBar>
13  );
14}

Typographyの部分は、直接h6と書いても大丈夫です。

/src/App.tsx1import React from 'react';
2
3import TodoAppBar from './components/TodoAppBar';
4
5import './styles.css';
6
7export default function App() {
8  return (
9    <DialogContent className="App">
10      <TodoAppBar />
11    </div>
12  );
13}

出ました！

タスク未登録のときの画面

タスクが登録されていないことを伝える文と、

タスク登録のためのボタンを配置します。

Material-UI Button から Contained Buttons を使用します。

/src/components/TodoList.tsx1import React from 'react';
2
3import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
4import Box from '@material-ui/core/Box';
5import Typography from '@material-ui/core/Typography';
6import Button from '@material-ui/core/Button';
7
8const useStyles = makeStyles((theme: Theme) =>
9  createStyles({
10    button: {
11      '&:hover': {
12        backgroundColor: '#6666ff'
13      }
14    }
15  })
16);
17
18export default function TodoList() {
19  const classes = useStyles();
20
21  return (
22    <Box padding="2rem" textAlign="center">
23      <Typography variant="subtitle1" gutterBottom>
24        まだ登録されたタスクはありません。
25      </Typography>
26      <Button
27        className={classes.button}
28        variant="contained"
29        color="primary"
30        >
31        タスクを登録する
32      </Button>
33    </Box>
34  );
35}

8-16行目は、Material-UI からスタイル指定ができるというものです。

makeStyles - createStylesはおまじないのように書いてもらって大丈夫です。

createStylesの中に、クラス名、スタイルプロパティ、スタイルを書き込んでいきます。

コンポーネント内部でこれを呼び出し、JSX のタグにclassName={classes.button}のように指定します。

22行目のBoxは Material-UI のものですが、

スタイルを直接書き込むことができます。

出力はデフォルトではdivになります。

/src/App.tsx1import React from 'react';
2
3import TodoAppBar from './components/TodoAppBar';
4import TodoList from './components/TodoList';
5
6import './styles.css';
7
8export default function App() {
9  return (
10    <div className="App">
11      <TodoAppBar />
12      <TodoList />
13    </div>
14  );
15}

タスク登録ダイアログの表示

次はボタンを押したら情報を入力するダイアログを表示させます。

Dialog の Form dialogs を参考にします。

/src/components/RegisterDialog.tsx1import React from 'react';
2
3import Button from '@material-ui/core/Button';
4import Dialog from '@material-ui/core/Dialog';
5import DialogActions from '@material-ui/core/DialogActions';
6import DialogTitle from '@material-ui/core/DialogTitle';
7import DialogContent from '@material-ui/core/DialogContent';
8import DialogContentText from '@material-ui/core/DialogContentText';
9
10type Props = {
11  open: boolean;
12  onClose: () => void;
13};
14
15export default function RegisterDialog({ open, onClose }: Props) {
16  return (
17    <Dialog
18      open={open}
19      onClose={onClose}
20      aria-labelledby="form-dialog-title"
21      fullWidth
22    >
23      <DialogTitle>タスク登録</DialogTitle>
24      <DialogContent>
25        <DialogContentText>
26          登録するタスクの情報を入力してください。
27        </DialogContentText>
28      </DialogContent>
29      <DialogActions>
30        <Button onClick={onClose} color="primary">
31          もどる
32        </Button>
33        <Button color="primary">
34          登録
35        </Button>
36      </DialogActions>
37    </Dialog>
38  );
39}

openとonCloseを props として親コンポーネントに渡しています。

このダイアログを、さきほどのボタンを押したときに出現するようにします。

/src/components/TodoList.tsx1import React, { useState } from 'react';
2
3import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
4import Box from '@material-ui/core/Box';
5import Typography from '@material-ui/core/Typography';
6import Button from '@material-ui/core/Button';
7
8import RegisterDialog from './RegisterDialog';
9
10...
11
12export default function TodoList() {
13  const classes = useStyles();
14
15  const [open, setOpen] = useState<boolean>(false);
16
17  const handleOpen = () => setOpen(true);
18
19  const handleClose = () => setOpen(false);
20
21  return (
22    <>
23      <Box padding="2rem" textAlign="center">
24        <Typography variant="subtitle1" gutterBottom>
25          まだ登録されたタスクはありません。
26        </Typography>
27        <Button
28          className={classes.button}
29          onClick={handleOpen}
30          variant="contained"
31          color="primary"
32          >
33          タスクを登録する
34        </Button>
35      </Box>
36      <RegisterDialog open={open} onClose={handleClose} />
37    </>
38  );
39}

22行目と37行目の<></>ですが、

React では return で返す JSX はひとつのタグで全体が囲まれていなければなりません。

そこで不定のタグで全体を囲っています。

これは別にdivとかでもいいのですが、

HTML に現れない<></>を使っています。

ダイアログが表示されました！

タスク登録ダイアログの入力部分

入力させる情報は、

内容
期限
優先度

の３つです。

内容はテキスト、期限は日付（カレンダー）、優先度は数値とスライダーを使います。

テキスト部分は Text Field、期限は Pickers、

スライダーは Slider の Label always visible と Slider with input field を使って、

これらを Grid で並べています。

長くなったので、コンポーネントとして分けました。

入力した情報は state として管理下におきたいので、atom の設定をします。

/src/atoms/RegisterDialogContent.tsx1import { atom } from 'recoil';
2
3export const taskContentState = atom<string>({
4  key: 'taskContentState',
5  default: ''
6});
7
8export const taskDeadlineState = atom<Date>({
9  key: 'taskDeadlineState',
10  default: new Date()
11});
12
13export const taskPriorityState = atom<number>({
14  key: 'taskPriorityState',
15  default: 1
16});

これらをコンポーネントファイルで呼び出して使用します。

/src/components/RegisterDialogContent.tsx1import React from 'react';
2import { useRecoilState, useSetRecoilState } from 'recoil';
3
4import Grid from '@material-ui/core/Grid';
5import TextField from '@material-ui/core/TextField';
6import Slider from '@material-ui/core/Slider';
7import Input from '@material-ui/core/Input';
8import DialogContent from '@material-ui/core/DialogContent';
9import DialogContentText from '@material-ui/core/DialogContentText';
10import DateFnsUtils from '@date-io/date-fns';
11import {
12  MuiPickersUtilsProvider,
13  KeyboardDatePicker
14} from '@material-ui/pickers';
15
16import {
17  taskContentState,
18  taskDeadlineState,
19  taskPriorityState
20} from '../atoms/RegisterDialogContent';
21
22export default function RegisterDialogContent() {
23  // atom から state を取得する
24  const setContent = useSetRecoilState(taskContentState);
25  const [deadline, setDeadline] = useRecoilState(taskDeadlineState);
26  const [priority, setPriority] = useRecoilState(taskPriorityState);
27
28  // タスクの内容が変更されたとき
29  const handleContentChange = (
30    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
31  ) => {
32    setContent(e.target.value);
33  };
34
35  // タスクの期限が変更されたとき
36  const handleDeadlineChange = (date: any) => {
37    setDeadline(date);
38  };
39
40  // スライダーが動かされたとき
41  const handleSliderChange = (e: React.ChangeEvent<{}>, newValue: any) => {
42    setPriority(newValue);
43  };
44
45  // スライダー横の数値入力欄が変更されたとき
46  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
47    setPriority(Number(e.target.value));
48  };
49
50  // 数値入力欄で１～５以外の数値が指定されたとき
51  const handleBlur = () => {
52    if (priority < 1) {
53      setPriority(1);
54    } else if (priority > 5) {
55      setPriority(5);
56    }
57  };
58
59  return (
60    {// このタグ内にある部分が pickers のカバーする範囲になる }
61    <MuiPickersUtilsProvider utils={DateFnsUtils}>
62      <DialogContent>
63        <DialogContentText>
64          登録するタスクの情報を入力してください。
65        </DialogContentText>
66        <Grid container spacing={6} direction="column">
67          <Grid item>
68            <TextField
69              onChange={handleContentChange}
70              margin="dense"
71              id="name"
72              label="内容"
73              fullWidth   {// 横幅いっぱいにする }
74            />
75            <KeyboardDatePicker
76              disableToolbar
77              variant="inline"          {// カレンダーが出現する位置 }
78              format="yyyy/MM/dd"       {// 表示する日付のフォーマット }
79              minDate={new Date()}      {// 現在の日より前の日は選択不可 }
80              margin="normal"
81              id="date-picker-inline"
82              label="期限"
83              value={deadline}
84              onChange={date => handleDeadlineChange(date)}
85              invalidDateMessage="無効な形式です"
86              minDateMessage="昨日以前の日付を指定することはできません"
87            />
88          </Grid>
89          <Grid container item spacing={2}>
90            <Grid item xs={2}>
91              <DialogContentText>優先度</DialogContentText>
92            </Grid>
93            <Grid item xs={8}>
94              <Slider
95                value={priority}
96                onChange={handleSliderChange}
97                defaultValue={1}        {// デフォルト値 }
98                aria-valuetext=""
99                aria-labelledby="discrete-slider"
100                valueLabelDisplay="on"  {// 数字の吹き出しを常に表示する }
101                step={1}  {// 変動幅 }
102                marks     {// 境界に印をつける }
103                min={1}   {// 最小値 }
104                max={5}   {// 最大値 }
105              />
106            </Grid>
107            <Grid item xs={2}>
108              <Input
109                value={priority}
110                margin="dense"
111                onChange={handleInputChange}
112                onBlur={handleBlur}
113                inputProps={{
114                  step: 1,
115                  min: 1,
116                  max: 5,
117                  type: 'number',
118                  'aria-labelledby': 'input-slider'
119                }}
120              />
121            </Grid>
122          </Grid>
123        </Grid>
124      </DialogContent>
125    </MuiPickersUtilsProvider>
126  );
127}

これを親コンポーネントRegisterDialog.tsxで呼び出します。

/src/components/RegisterDialog.tsx1...
2
3import RegisterDialogContent from './RegisterDialogContent';
4
5...
6
7export default function RegisterDialog({ open, onClose }: Props) {
8  return (
9    <Dialog
10      open={open}
11      onClose={onClose}
12      aria-labelledby="form-dialog-title"
13      fullWidth
14    >
15      <DialogTitle>タスク登録</DialogTitle>
16      <RegisterDialogContent />
17      <DialogActions>
18        <Button onClick={onClose} color="primary">
19          もどる
20        </Button>
21        <Button color="primary">登録</Button>
22      </DialogActions>
23    </Dialog>
24  );
25}

また、Recoil を使ったので、

使用範囲に含める最上階層のコンポーネントの JSX をRecoilRootタグで囲む必要があります。

/src/App.tsx1import React from 'react';
2import { RecoilRoot } from 'recoil';
3
4import TodoAppBar from './components/TodoAppBar';
5import TodoList from './components/TodoList';
6
7import './styles.css';
8
9export default function App() {
10  return (
11    <RecoilRoot>
12      <div className="App">
13        <TodoAppBar />
14        <TodoList />
15      </div>
16    </RecoilRoot>
17  );
18}

できました！

タスクが登録されているときの画面

まず、タスク一覧を atom で設定します。

/src/atoms/Tasks.tsx1import { atom } from 'recoil';
2
3export const tasksState = atom<
4  { content: string; deadline: any; priority: number }[]
5>({
6  key: 'tasksState',
7  default: []
8});

ダイアログの登録ボタンを押したときに、atom に値を追加します。

/src/components/RegisterDialog.tsx1...
2import { useRecoilValue, useRecoilState } from 'recoil';
3
4...
5
6import {
7  taskContentState,
8  taskDeadlineState,
9  taskPriorityState
10} from '../atoms/RegisterDialogContent';
11
12import { tasksState } from '../atoms/Tasks';
13
14...
15
16export default function RegisterDialog({ open, onClose }: Props) {
17  const taskContent = useRecoilValue(taskContentState);
18  const taskDeadline = useRecoilValue(taskDeadlineState);
19  const taskPriority = useRecoilValue(taskPriorityState);
20  const [tasks, setTasks] = useRecoilState(tasksState);
21
22  const handleRegister = () => {
23    setTasks([
24      ...tasks,
25      {
26        content: taskContent,
27        deadline: taskDeadline,
28        priority: taskPriority
29      }
30    ]);
31    onClose();
32  };
33
34  return (
35    <Dialog
36      open={open}
37      onClose={onClose}
38      aria-labelledby="form-dialog-title"
39      fullWidth
40    >
41      <DialogTitle>タスク登録</DialogTitle>
42      <RegisterDialogContent />
43      <DialogActions>
44        <Button onClick={onClose} color="primary">
45          もどる
46        </Button>
47        <Button onClick={handleRegister} color="primary">
48          登録
49        </Button>
50      </DialogActions>
51    </Dialog>
52  );
53}

tasksにはオブジェクトを入れています。

ボタンを押すとダイアログを閉じるので、handleRegister関数の中にもonClose()を書いています。

続いてタスクの一覧を表示する表のコンポーネントを作成します。

/src/components/TodoTable.tsx1import React from 'react';
2import { useRecoilState } from 'recoil';
3
4import Table from '@material-ui/core/Table';
5import TableHead from '@material-ui/core/TableHead';
6import TableBody from '@material-ui/core/TableBody';
7import TableCell from '@material-ui/core/TableCell';
8import TableContainer from '@material-ui/core/TableContainer';
9import TableRow from '@material-ui/core/TableRow';
10import { format } from 'date-fns';
11
12import { tasksState } from '../atoms/Tasks';
13
14export default function TodoTable() {
15  const [tasks, setTasks] = useRecoilState(tasksState);
16
17  return (
18    <TableContainer>
19      <Table>
20        <TableHead>
21          <TableRow>
22            <TableCell>タスク</TableCell>
23            <TableCell align="center">期日</TableCell>
24            <TableCell align="center">優先度</TableCell>
25          </TableRow>
26        </TableHead>
27        <TableBody>
28          {tasks.map((task: any) => (
29            <TableRow>
30              <TableCell>{task.content}</TableCell>
31              <TableCell align="center">
32                {// 年/月/日の形式に変換して表示する }
33                {format(task.deadline, 'yyyy/MM/dd')}
34              </TableCell>
35              <TableCell align="center">{task.priority}</TableCell>
36            </TableRow>
37          ))}
38        </TableBody>
39      </Table>
40    </TableContainer>
41  );
42}

登録されたタスクがひとつでもあれば、この表を出現させます。

タスクの一覧を Table を使って表示し、

タスク追加のアイコンボタンを Floating Action Button を使って置いています。

/src/components/TodoList.tsx1import { useRecoilValue } from 'recoil';
2
3...
4
5import Fab from '@material-ui/core/Fab';
6import AddIcon from '@material-ui/icons/Add';
7
8...
9
10import TodoTable from './TodoTable';
11
12import { tasksState } from '../atoms/Tasks';
13
14const useStyles = makeStyles((theme: Theme) =>
15  createStyles({
16    button: {
17      '&:hover': {
18        backgroundColor: '#6666ff'
19      }
20    },
21    fab: {
22      position: 'absolute',
23      bottom: '2rem',
24      right: '2rem',
25      '&:hover': {
26        backgroundColor: '#6666ff'
27      }
28    }
29  })
30);
31
32export default function TodoList() {
33  const classes = useStyles();
34
35  const tasks = useRecoilValue(tasksState);
36  const [open, setOpen] = useState<boolean>(false);
37
38  const handleOpen = () => setOpen(true);
39
40  const handleClose = () => setOpen(false);
41
42  return (
43    <>
44      <Box padding="2rem" textAlign="center">
45        {tasks.length !== 0 ? (
46          <>
47            <TodoTable />
48            <Fab
49              className={classes.fab}
50              onClick={handleOpen}
51              color="primary"
52              aria-label="add"
53            >
54              <AddIcon />
55            </Fab>
56          </>
57        ) : (
58          <>
59            <Typography variant="subtitle1" gutterBottom>
60              まだ登録されたタスクはありません。
61            </Typography>
62            <Button
63              className={classes.button}
64              onClick={handleOpen}
65              variant="contained"
66              color="primary"
67            >
68              タスクを登録する
69            </Button>
70          </>
71        )}
72      </Box>
73      <RegisterDialog open={open} onClose={handleClose} />
74    </>
75  );
76}

三項演算子を使用して、tasksの要素が存在するかどうかで条件分岐をしています。

タスクの削除

選択したタスクが削除できるようにします。

選択には Checkbox を使います。

Table の Sorting & Selecting を参考にします。

/src/components/TodoTable.tsx1import React, { useState } from 'react';
2...
3import IconButton from '@material-ui/core/IconButton';
4import DeleteIcon from '@material-ui/icons/Delete';
5import Checkbox from '@material-ui/core/Checkbox';
6...
7
8export default function TodoTable() {
9  const [tasks, setTasks] = useRecoilState(tasksState);
10  const [selected, setSelected] = useState<number[]>([]);
11
12  // すべてのタスクを選択する
13  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
14    if (e.target.checked) {
15      setSelected([...Array(tasks.length).keys()]);
16      return;
17    }
18    setSelected([]);
19  };
20
21  // 特定のタスクを選択する
22  const handleCheck = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {
23    const selectedIndex = selected.indexOf(i);
24    let newSelected: number[] = [];
25
26    if (selectedIndex === -1) {
27      newSelected = newSelected.concat(selected, i);
28    } else if (selectedIndex === 0) {
29      newSelected = newSelected.concat(selected.slice(1));
30    } else if (selectedIndex === selected.length - 1) {
31      newSelected = newSelected.concat(selected.slice(0, -1));
32    } else if (selectedIndex > 0) {
33      newSelected = newSelected.concat(
34        selected.slice(0, selectedIndex),
35        selected.slice(selectedIndex + 1)
36      );
37    }
38
39    setSelected(newSelected);
40  };
41
42  // 選択したタスクを消去する
43  const handleDelete = () => {
44    let newTasks = tasks.filter(
45      (e: object, i: number) => selected.indexOf(i) === -1
46    );
47    setTasks(newTasks);
48    setSelected([]);
49  };
50
51  return (
52    <>
53      <IconButton
54        onClick={handleDelete}
55        disabled={selected.length === 0}
56        aria-label="delete"
57      >
58        <DeleteIcon />
59      </IconButton>
60      <TableContainer>
61        <Table>
62          <TableHead>
63            <TableRow>
64              <TableCell padding="checkbox">
65                <Checkbox
66                  checked={tasks.length > 0 && tasks.length === selected.length}
67                  onChange={handleSelectAll}
68                />
69              </TableCell>
70              <TableCell>タスク</TableCell>
71              <TableCell align="center">期日</TableCell>
72              <TableCell align="center">優先度</TableCell>
73            </TableRow>
74          </TableHead>
75          <TableBody>
76            {tasks.map((task: any, index: number) => (
77              <TableRow>
78                <TableCell padding="checkbox">
79                  <Checkbox
80                    checked={selected.indexOf(index) !== -1}
81                    onChange={(e: any) => handleCheck(e, index)}
82                  />
83                </TableCell>
84                <TableCell>{task.content}</TableCell>
85                <TableCell align="center">
86                  {format(task.deadline, 'yyyy/MM/dd')}
87                </TableCell>
88                <TableCell align="center">{task.priority}</TableCell>
89              </TableRow>
90            ))}
91          </TableBody>
92        </Table>
93      </TableContainer>
94    </>
95  );
96}

タスクの並び替え

期限や優先度順に並び替えられるようにします。

tasksの要素となるオブジェクトを、そのdeadlineやpriorityによって並び替えることになります。

/src/components/TodoTable.tsx1...
2import TableSortLabel from '@material-ui/core/TableSortLabel';
3...
4
5const sortTasks = (
6  arr: { content: string; deadline: any; priority: number }[],
7  sortBy: 'deadline' | 'priority',
8  order: 'asc' | 'desc'
9) =>
10  arr.sort(
11    (
12      a: { content: string; deadline: any; priority: number },
13      b: { content: string; deadline: any; priority: number }
14    ) => (order === 'asc' ? a[sortBy] - b[sortBy] : b[sortBy] - a[sortBy])
15  );
16
17export default function TodoTable() {
18  const [tasks, setTasks] = useRecoilState(tasksState);
19  const [selected, setSelected] = useState<number[]>([]);
20  const [order, setOrder] = useState<'asc' | 'desc'>('asc');
21  const [orderBy, setOrderBy] = useState<'deadline' | 'priority' | ''>('');
22
23  const handleSort = (sortBy: 'deadline' | 'priority') => (
24    e: React.MouseEvent
25  ) => {
26    let newOrder: 'asc' | 'desc' =
27      orderBy === sortBy ? (order === 'asc' ? 'desc' : 'asc') : 'asc';
28    setOrderBy(sortBy);
29    setOrder(newOrder);
30    setTasks(sortTasks(tasks.concat(), sortBy, newOrder));
31  };
32
33  ...
34
35  return (
36    ...
37          <TableHead>
38            <TableRow>
39              <TableCell padding="checkbox">
40                <Checkbox
41                  checked={tasks.length > 0 && tasks.length === selected.length}
42                  onChange={handleSelectAll}
43                />
44              </TableCell>
45              <TableCell>タスク</TableCell>
46              <TableCell align="center">
47                <TableSortLabel
48                  active={orderBy === 'deadline'}
49                  direction={order === 'asc' ? 'desc' : 'asc'}
50                  onClick={handleSort('deadline')}
51                >
52                  期日
53                </TableSortLabel>
54              </TableCell>
55              <TableCell align="center">
56                <TableSortLabel
57                  active={orderBy === 'priority'}
58                  direction={order === 'asc' ? 'desc' : 'asc'}
59                  onClick={handleSort('priority')}
60                >
61                  優先度
62                </TableSortLabel>
63              </TableCell>
64            </TableRow>
65          </TableHead>
66    ...
67  );

sortメソッドは、配列を引数の関数に従って並び変えるです。

要素となるオブジェクトのdeadlineまたはpriorityにもとづいて、

正順または逆順に並べ替えるようにしています。

30行目のtasks.concat()は、tasksのコピーを作っています。

sortメソッドは破壊的処理なので、このようにしないとtasks自体を変更しようとしてエラーが発生します。

49, 58行目は、矢印の向きを指定しています。

長くなりましたが、React + Recoil + Material-UI + TypeScript での ToDo アプリの実装について書きました。

Material-UI で本当にいろいろなことが比較的簡単にできて楽しい！というのと、

Recoil が React Hooks からシームレスに移行できて学習コストも意外と低い！という印象でした。

この記事が参考になれば幸いです。

ではまた