---
# System prepended metadata

title: 2020年8月29日モブプロ#3

---

# 2020年8月29日モブプロ#3
```
みんなで同時編集が可能なので好きに編集してください。
```
[MDの書き方](https://qiita.com/tbpgr/items/989c6badefff69377da7)

モブプロのコンテンツは🤟がついています。

# 前回のおさらい

https://hackmd.io/@9DhXIgigSNmNGDQGNDcWSQ/BkP4aW0zD

# 今日の目標

- タスクリストにいい感じのデザインを適用

# TODOに必要そうな機能

- 作成
- 削除
- 完了

# 使用するCSSフレームワーク

- [MATERIAL-UI](https://material-ui.com/ja/)
    - React専用

## 翻訳ツール

- [DeepL](https://www.deepl.com/translator)

# ボタンを作成してみよう🤟

## material-uiのインストール

```bash
npm install @material-ui/core
```

## ボタン作成

[Button コンポーネント](https://material-ui.com/ja/components/buttons/)
```javascript
 <Button color="secondary" variant="contained" onClick={onClickEvent}>Button</Button>
 ```
### オプション（今回使用したもの）

- color
    - primary
    - secondary
- variant
    - contained

### React以外にMaterialUIを使用したい時

- [MaterializeCSS](https://materializecss.com/)

# App.jsをきれいにしよう🤟

内容は細かいので割愛...

ソースは[こちら](https://github.com/Skywill-inc/react-sample2nd/blob/master/src/App.js)

# コンポーネントの作成🤟

## Header.js

`src/components`の中に`Header.js`を作成。

作成したファイルを`App.js`にインポート

```javascript=
import Header from './components/Header'
```

使用したい場合は`<Header />`とする。

## Footer.js

`src/components`の中に`Footer.js`を作成。

作成したファイルを`App.js`にインポート

```javascript=
import Footer from './components/Footer'
```

使用したい場合は`<Footer />`とする。

# Header.jsを作り込もう🤟

[コンポーネント作成](#コンポーネントの作成🤟)後、必要なUIをインポートする。

```jsx=
import {AppBar, Toolbar, Typography} from '@material-ui/core'
```

## AppBar

```jsx=
<AppBar position="static" component="header">
```

### 使用オプション

- position
    - static
- component
    - header

## Typography

```jsx=
<Typography variant="h4" component="h4"></Typography>
```

### 使用オプション

- variant
    - h4
- component
    - h4

# Footer.jsを作り込もう🤟

## makeStyles
CSS的なスタイルをJavaScriptで定義。

```javascript=
const useStyles = makeStyles(theme => ({
  footer: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    backgroundColor: '#4d4d4d',
    color: '#ffffff'
  },
  footerContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  }
}))
```

定義したスタイルを指定。
```jsx=
const classes = useStyles(); // ←ここで上記の定義を呼び出し
  return (
    <footer className={classes.footer}>
      <Toolbar className={classes.footerContainer}>
```

# Bodyを作り込もう🤟

## 必要なmaterialコンポーネントをインポート

```javascript=4
import {
  Button,
  TextField,
  Box,
  Container,
  CssBaseline,
  List,
  ListItem,
  ListItemText,
  Checkbox,
  Divider,
  makeStyles
} from '@material-ui/core';
```

上記でインポートしたコンポーネントを使用していく。

```jsx=
// Bodyの大枠
<Container component="main" maxWidth="xs">
    <CssBaseline />
    // テキストフィールドコンポーネント
    <Box mt={5} display="flex" justifyContent="space-around">
        <TextField label="タイトル" value="{taskTitle}" onChange={handleTextFieldChanges} />
        <Button variant="contained" color="primary">作成</Button>
    </Box>
</Container>
```

### 完成品

![](https://i.imgur.com/8cyYigU.png)

# Task追加機能を実装しよう🤟

`onClick`を追加

```jsx=
<Button variant="contained" color="primary" onClick={addTask}>作成</Button>
```

上記で設定した`addTask`を定義する

```javascript=
import React, {useState} from 'react'; // 忘れないように１行目に追加
```
```javascript=19
const [tasks, setTasks] = UseState([])
const [taskTitle, setTaskTitle] = UseState('')
const addTask = () => {
    setTasks([...tasks, {
        title: taskTitle,
        doing: false,
        done: false
    }])
}
const handleTextFieldChanges = task => {
    setTaskTitle(event.target.value)
}
```

## 展開演算子（[...tasks]とは？）

```javascript=
const tasks = ['task1','task1','task1','task1']; // → task1 task1 task1 task1

console.log(...tasks) // → task1 task1 task1 task1
```

上記の１行目と３行目の結果は同じ。

`...`は配列を展開する。

### じゃあ今回は何をしているの...?

`tasks`の配列を一回展開して、新たに作られた`task`を追加して新しい配列を生成している。

```javascript=
ex.)
const tasks = [
  {
    title: taskTitle,
    doing: false, 
    done: false
  },   
]
const tasks2 = [
  ...tasks, 
  {
    title: newTask,
    doing: false, 
    done: false
  }
]

↓

[
  {
    title: taskTitle,
    doing: false, 
    done: false
  }, 
  {
    title: newTask,
    doing: false, 
    done: false
  }
]
```

こうなっている。(合っているかな...?)

# 本日のコミット履歴

https://github.com/Skywill-inc/react-sample2nd/commit/bbbaf2dca882acbe41291dfcd2d39288bb9180c3