Zenn
Closed11

📚 Reactハンズオンラーニング 第2版

JavaScript
React
O'Reilly
Haruya IzumiHaruya Izumi

2章 Reactに必要なJavaScriptの知識

constキーワード

ES2015が出るまでは、varが変数宣言する唯一の方法

var japan = true;
japan = false;
console.log(japan); // false

上記だと、再代入可能な変数。
constが登場で定数で宣言できる(値が不変であることが証明できる)。

const japan = true;
japan = false;
// Uncaught TypeError: Assignment to constant variable.
// エラーになる

letキーワード

let x = 1;
if (x === 1) {
  let x = 2;
  console.log(x);
  // expected output: 2
}
console.log(x);
// expected output: 1
> 2
> 1

ブロックスコープのローカル変数を宣言でき、任意で値を代入して初期化できる。
MDNの説明が非常にわかりやすい。これがvarだとグローバルになるから扱いづらいってことか.

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let

テンプレート文字列

式の挿入が容易になる

// 通常の場合
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// テンプレート文字列使用の場合
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);

また、空白や改行もそのまま出力される
他にも機能たくさんあるが、一旦ここまでで良い。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

アロー関数

- 簡潔に書ける
　- thisが周辺のスコープからピックアップされる
　- 暗黙的なreturn

// 見た目になれる必要がある。
// 通常の関数
function triple(x) { 
 return x * 3;
}
console.log(triple(3)) // 9

// アロー関数で書く
const triple = x => x * 3;
console.log(triple(3)) // 9

// アロー関数(引数がある場合) ※括弧が必要になる
const loadify = (firstName, land) => `${ firstName } of ${ land }`
console.log(loadify("Don", "Piscataway")); // Don of Piscataway

// 通常の関数
// 上記と同じ処理で書き方が違うだけ
const loadify = function(firstName, land) {
 return `${ firstName } of ${ land }`
}
console.log(loadify("Don", "Piscataway")); // Don of Piscataway

オブジェクトの返却
オブジェクトを戻り値として返すアロー関数のポイント括弧を使用する。

const person = (firstName, lastName) => 
	{
  	　first: firstName,
    	　last: lastName
	};
console.log (person("izumi", "haruya")); // Error: Unexpected token ':'
// 括弧をつけるとエラーにならない
const person = (firstName, lastName) => (
	{
  	　first: firstName,
    	　last: lastName
	});
console.log (person("izumi", "haruya")); // > Object { first: "izumi", last: "haruya" }

デストラクチャリング

const obj = {  
  a: 1,
  b: 2,
  c: 3
}
const {b, c, d} = obj // 分割代入
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined
console.log(a) // Error

https://qiita.com/akifo/items/19a4f2823fc99779dffc

スプレット構文

const arr = [1, 2, 3, 4]
const [x, ...rest] = arr
console.log(x) // 1
console.log(rest) // [2, 3, 4]

JavaScriptの非同期処理

Promiseとfetch

fetchの戻り値とは（APIのレスポンス）は、Promiseオブジェクトが返る。

Promiseオブジェクトの中身

  • Peding（保留中）
  • Resolved（成功）
  • Rejected（失敗）
Haruya IzumiHaruya Izumi

3章 JavaScriptにおける関数型プログラミング

関数型(宣言型)プログラミング言語の基本概念

  • イミュータブルなデータ
  • 純粋関数
  • データの変換
  • 高階関数
  • 再帰
  • 関数の合成
Haruya IzumiHaruya Izumi

4章 Reactの基本

Reactは何をしてるか.

フロント側の簡単な歴史

上記を行うためにブラウザ側では、DOM APIを提供している。document.createElementとかdocument.appendChildといった関数もすべてDOM API。
ReactはこのDOM APIの呼び出しを一手に引き受けてくれるライブラリ。（だから開発者が直接DOM APIを操作しなくてもいい）

Haruya IzumiHaruya Izumi

5章 ReactとJSX

JSXとHTMLの違い

  • コンポーネントタグ
  • classNameプロパティ
  • JavaScript式
<h1>{ body }</h1>
// 上記のように波括弧で囲む必要がある。

Reactフラグメント

親と子の関係の2つのコンポーネントを並列で描画したいときに使用できる。

function Japan ({ name }) {
　return (
　　<h1>My country is { name }.</h1>
　　<p>He's good.</p>
}
// これだとエラーになる.

以下のように記述するとエラーが出なくなる。

function Japan ({ name }) {
　return (
　　<React.Fragment>
　　　<h1>My country is { name }.</h1>
　　　<p>He's good.</p>
　　</React.Fragment>
}
// 以下のように省略して書くこともできる
function Japan ({ name }) {
　return (
　　<>
　　　<h1>My country is { name }.</h1>
　　　<p>He's good.</p>
　　</>
}

Webpackの機能

  • コード分割
  • ミニファイ
  • 機能フラグ
  • Hot Module Replacement (HMR)

ビルドの工程の導入の利点

  • モジュール化することで共同で開発が容易になる
  • 合成の利点
  • ロード時間
  • 一貫性
Haruya IzumiHaruya Izumi

便利の記述

<Ingredient {...ingredinet } />
// これは以下と同じ
<Ingredient
　amount={ingredinet.amount}
　measurement={ingredinet.measurement}
　name={ingredinet.name}
/>
Haruya IzumiHaruya Izumi

useStateの使い方

import React, { useState } from 'react';
import './index.css'

function App() {
  const initialState = Math.floor(Math.random() * 10) + 1
  const [count, setCount] = useState(initialState)
  const [open, setOpen] = useState(true)
  const toggle = () => setOpen(!open)

  return (
    <>
      <button onClick={toggle}>{open ? 'close' : 'open'}</button>
      <div className={open ? 'isOpen' : 'isClose'}>
        <p>現在の数字は{count}です</p>
        <button onClick={() => setCount(prevState => prevState + 1)}>
          + 1
        </button>
        <button onClick={() => setCount(count - 1)}>- 1</button>
        <button onClick={() => setCount(0)}>０</button>
        <button onClick={() => setCount(initialState)}>最初の数値に戻す</button>
      </div>
    </>
  );
}

export default App;

以下の記事がとてもわかりやすい

https://qiita.com/seira/items/f063e262b1d57d7e78b4

setStateの引数は、次のステートを直接受け取るのではなく、ステートから新しいステートを計算する関数を引数で受け取るようにする
なぜそうするかについてわかりやすい

https://zenn.dev/stin/articles/use-appropriate-api

Haruya IzumiHaruya Izumi

useEffect

Reactの一連の処理サイクル

データ更新 → コンポーネントが再描画 → 副作用実行 👈 ここでuseEffect
Reactハンズオンラーニング OREILLYより

useEffect()の基本構文は以下の通りです。
関数コンポーネントのトップレベルで宣言します。

useEffect(() => {
  /* 第1引数には実行させたい副作用関数を記述*/
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存データを記述
第2引数を指定することにより、第1引数に渡された副作用関数の実行タイミングを制御することができます。Reactは第2引数の依存配列の中身の値を比較して、副作用関数をスキップするかどうかを判断します。
説明 データ型
第1引数 副作用関数（戻り値はクリーンアップ関数、または何も返さない）
第2引数 副作用関数の実行タイミングを制御する依存データが入る（省略可能）

上記は以下の記事より引用させていただいております。
https://qiita.com/seira/items/e62890f11e91f6b9653f

このスクラップは2022/06/03にクローズされました