---
# System prepended metadata

title: 2020年8月22日モブプロ#2

---

# 2020年8月22日モブプロ#2

Created By: kengo kojima
Last Edited: Aug 22, 2020 11:58 AM

# 初参加の人にモブプロの説明

- 5分程度

# 今回の目標

- カウンター機能作成
- ToDoリストの作成

# カウンターの作成

## エクスポートの説明

[ES6のExportとImportについて - Qiita](https://qiita.com/bmf_san/items/bdb67c7abf4d381cf976)

## count++ と count+1の違い

- count++ ⇒ count = count + 1
- count+1 ⇒ count+1

## アロー関数の説明

[【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita](https://qiita.com/mejileben/items/69e5facdb60781927929)

[JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita](https://qiita.com/suin/items/a44825d253d023e31e4d)

# useState

- useStateのインポート

```jsx
import React, {useState} from 'react';
```

- 初期値セット

```jsx
const [count, setCount] = useState(0)
```

# useEffect

## useEffectとは？

- ライフサイクル

## 書いてみよう🤘

### useEffectのインポート

```jsx
import React, {useState, useEffect} from 'react';
```

### useEffectの基本記述

```jsx
useEffect(() => {
    effect // 画面が開いたときに発火
    return () => {
      cleanup // 画面を閉じたときに発火
    }
  }, [input]) // 
```

# Axios

- サーバーとやり取りするときのライブラリ
- JSが標準搭載している`fetch API`というものもある
    - typescriptを使用する場合はこちらはあまりおすすめしない（型の問題のため）

## インストール

```bash
npm install axios
```

## 書いてみよう🤟

### Axiosのインポート

```jsx
import axios from 'axios'
```

### データの取得

```jsx
const response = axios.get(APIURL)
```

### データ変数の定義

```jsx
// 定数は大文字にする（お作法）
const APIURL = "<dataURL>"
```

# Promiseについて

- 非同期処理
- stackに非同期処理が積まれる
    - 処理が完了後、処理が順序発火する

## 書いてみよう🤟

```jsx
const response = axios.get(APIURL)
concole.log("1") // 発火順1番目

response.then((res) => {
  concole.log("2") // 発火順3番目
  console.log(res)
  concole.log("3") // 発火順4番目
})

concole.log("4") // 発火順2番目
```

# Async/Awaitについて

- 上記Promiseより読みやすい書き方
- やっていることはPromiseと同じ

## 書いてみよう🤟

```jsx
async() => {
  const response = await axios.get(APIURL)
  console.log(response)
}
```

Reactからエラーのため、以下に書き換え

```jsx
async function fetchData() {
  const response = await axios.get(APIURL)
  console.log(response)
}
await fetchData()
```

### チェーンについての説明

[複数Promise実装時のベストプラクティス - Qiita](https://qiita.com/naoqoo2/items/139f5606f4337b0f833a)

# GET,PUT,POST,DELETEについて

REST APIの内部で使用される

[Web API: The Good Partsを読んだまとめ - Qiita](https://qiita.com/mitsuya/items/e33d5ac202b41447cfec)

あくまでこちらはクライアント側のお作法である。

# ToDoリスト作成

- 初期値セット

```jsx
// 今回は初期値は空配列
const [todos, setTodos] = useState([]);
```

## 書いてみよう🤟

- ループ回してオブジェクト内のタイトルを入れれば行けそう？

```jsx
<ul>
    {todos.map(todo => <li>{todo.title}</li>)}         
</ul>
```

### 疑問

- map関数とは？
    - 配列をループし、一件ずつに処理を加えて新たな配列を返す
- map変数の返り値がいきなりHTMLなの？
    - これはReactの仕様です。
    - JSXを使用しているためこの書き方ができます。
    - [https://ja.reactjs.org/docs/introducing-jsx.html](https://ja.reactjs.org/docs/introducing-jsx.html)

# Keyについて

- keyがないとどれが変更されたのかJS側では不明なため設定が必要
    - ユニークである必要がある。

# 本日のcommit履歴
1. https://github.com/Skywill-inc/react-sample2nd/commit/aad2d34685a2cf095025926868b070c4a6cb940f
2. https://github.com/Skywill-inc/react-sample2nd/commit/b4f1ecf27dde7db641f4ff2f04dde8ed1f0aca8c