# 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のインポート

import React, {useState} from 'react';

- 初期値セット

const [count, setCount] = useState(0)

# useEffect

## useEffectとは？

- ライフサイクル

## 書いてみよう🤘

### useEffectのインポート

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

### useEffectの基本記述

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

# Axios

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

## インストール

npm install axios

## 書いてみよう🤟

### Axiosのインポート

import axios from 'axios'

### データの取得

const response = axios.get(APIURL)

### データ変数の定義

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

# Promiseについて

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

## 書いてみよう🤟

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と同じ

## 書いてみよう🤟

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

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

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リスト作成

- 初期値セット

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

## 書いてみよう🤟

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

<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