『モダンJavaScriptの基本から始める React実践の教科書』

モダンJavaScriptの基本から始める React実践の教科書

モチベーション

jQuery全盛期でフロントエンドの知識が止まっている
もともとJavaScriptはWebブラウザ上で複雑な動きを実装する程度のものでしたが、今はフロントエンドだけではなく、バックエンドも実装することができます（Node.jsなど）
スマホアプリ、デスクトップアプリケーション等もJavaScriptで実装できてしまいます
- どうやって？そのイメージができてない…。

メモ

Chapter1 モダンJavaScript の基礎

従来のコードは、手続き的でわかりやすい反面、レンダリングコストの問題が発生しやすかったり、コードが肥大化してくるとどこで何をしているかわからないつらさ→これを解決するのが仮想DOM
- プレーンなJavaScript例
  1
  document.getElemenyById("nushida").aapendChild(textElement);
- jQueryの例
  1
  $('#nushida).append(textElement);
パッケージマネージャー
- npm
  - npm install [パッケージ名]
  - npm install
- yarn
  - yarn add [パッケージ名]
  - yarn install
- node_modules フォルダが生成される
ECMAScript
- JavaScriptの標準仕様
- 1年に1回更新される「ES2015」「ES2016」
  - ES2015(ES6) が転換期
    - let, constを用いた変数宣言
    - アローファンクション
    - Class構文
    - 分割代入
    - テンプレート文字列
    - スプレッド構文
    - Promise
モジュールハンドラー（webpack）
- jsやcssをひとつのファイルにまとめてくれる
トランスパイラ（Babel）
- JavaScriptの記法をブラウザで実行できる形に変換してくれるもの
- 新しい記法で書かれたJavaScriptを古い記法に変換してくれる
Vite

Chapter2 モダンJavaScript の機能に触れる

let, constを用いた変数宣言

var
- 上書き可能
- 再宣言可能
let
- 上書き可能
- 再宣言不可能
const ※ほとんどの場合で使用
- 上書き不可能
  - オブジェクト型の場合、中の値を変更可能
- 再宣言不可能

テンプレート文字列

従来
- "私の名前は" + name + "です。";
ES2015以降
- `私の名前は${name}です。`

アロー関数

従来

1
2
3
function func1(value) {
  return value;
}

アロー関数（「=> があれば関数」と考える）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
const func2 = (value) => {
  return value;
}

//引数が1つの場合、カッコを省略可能
const func3 = value => {
  return value;
}

//処理が単一行の場合は波括弧とreutnrを省略可能
const func4 = (num1, num2) => num1 + num2;

//カッコで囲んでまとめて省略して返却
const func5 = (val1, val2) => (
  {
    name: val1.
    age: val2
  }
)

分割代入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const myProfile = {
  name: "つまり",
  age: 24,
};
// myProfile.~ が冗長
const message = `私の名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`;

//分割代入を使用。一致するプロパティ名を取り出せる
const { name, age } = myProfile;
const message = `私の名前は${name}です。年齢は${age}歳です。`

//抽出したプロパティ名に別名をつける
const { name: newName, age: newAge } = myProfile;
const message = `私の名前は${newName}です。年齢は${newAge}歳です。`

//デフォルト値指定可能
const { name = "ゲスト" } = myProfile;
const message = `私の名前は${name}です。`

//配列も可。格納順通りに。
const myProfile = ["つまり", 24];
const [ name, age ] = myProfile;
const message = `私の名前は${name}です。年齢は${age}歳です。`

スプレッド構文

要素の展開

1
2
3
4
5
6
7
8
const arr1 = [1, 2];
const summaryFunc = (num1, num2) => console.log(num1 + num2);

//普通に配列の値を渡す場合
summaryFunc(arr1[0], arr1[1]);

//スプレッド構文 内部の要素を順番に展開してくれる
summaryFunc(...arr1);

要素をまとめる

1
2
3
4
5
const arr1 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr2] = arr1;
console.log(num1); //1
console.log(num2); //2
console.log(arr2); //[3,4,5]

要素のコピー、結合

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
const arr4 = [10, 20];
const arr5 = [30, 40];

const arr6 = [...arr4];
console.log(arr4); //[10,20]
console.log(arr6); //[10,20]

//イコールでコピーすると
const arr8 = arr4;
console.log(arr4) //[10,20]
console.log(arr8) //[10,20]
arr4[0] = 100;
console.log(arr4) //[100,20]
console.log(arr8) //[100,20] ←こいつにも影響が出る

map関数

1
2
const nameArr = ["佐藤", "高橋", "つまり"];
nameArr.map((name) => console.log(name));

filter関数

1
2
3
4
5
const numArr = [1,2,3,4,5];
const newNumArr = numArr.filter((num) => {
  return num %2 === 1;
});
console.log(newNumArr); //[1,3,5]

`&&` と `||` について

|| はその左側がfalseなら右側を返す

1
2
3
const num = null;
const fee = num || "金額未設定です";
console.log(fee); //金額未設定です

&& はその左側がtrueなら右側を返す

1
2
3
const num = 100;
const fee = num && "何か設定されました";
console.log(fee); //何か設定されました

Chapter3 JavaScript でのDOM 操作

プレーンなJavaScriptやjQueryでは「この要素を」「高操作する」というように手続き的にDOM操作を行う
- Reactは「宣言的」
HTMLのidやclass、DOMの階層構造とJavaScriptが密接で複雑になりやすく保守が難しかった

Chapter4 React の基本

コンポーネント
- 他のファイルでも使えるように export
- 他のファイルから使う import
- 拡張子は .jsx で作成する
イベント名、CSSプロパティ名すべてキャメルケースになる
- onClickButton
props
- コンポーネントに渡す引数のようなもの
state
- コンポーネントが持つ状態
再レンダリング
- 変更を検知してコンポーネントを再処理する
React Hooks
- useState
- useEffect

Chapter5 React とCSS

CSS Modules

1
import classes from "./CssModules.module.scss";

Styled JSX

1
2
3
<style jsx>{`
/* ここにCSSを書く */
`}</style>

styled components

Emotion

1
/** @jsxImportSource @emotion/react */

Tailwind CSS
コンポーネントライブラリ
- Headless UI
- Chakra UI
- Material-UI
- Semantic UI React

Chapter6 再レンダリングの仕組みと最適化

再レンダリングが起きる条件
- Stateが更新された
- propsが変更された
- 再レンダリングされたコンポーネント配下のコンポーネントすべて
コンポーネントのメモ化（memo）
1
const Component = memo(() => {});

関数のメモ化（useCallback）

1
2
3
const onClickButton = useCallback(() => {
  alert('ボタンが押されました');
}, []);

変数のメモ化（useMemo）

1
2
3
const sum = useMemo(() => {
  return 1 + 3;
},[]);

Chapter7 グローバルなState 管理

バケツリレー
- 下層のコンポーネントで使うために本来不要なpropsを受け渡していくこと
- コードが複雑化
- 再利用しづらいコンポーネントになる
- 不要な再レンダリングが増える
Reactが提供しているContext を使うことでグローバルな値を管理
- React.createContext で Context の器を作成
- Provider で囲む
- コンポーネントで React.useContext を使う
グローバルState管理ライブラリ
- Redux
- Recoil
- Apollo Client

Chapter8 React とTypeScript

TypeScript
- JavaScript で Type(型)を扱えるようにしているもの
1 2 3 4
// : string で指定 let str: string = "A"; str = "10"; //OK str = 10; //NG
- npx create-react-app [プロジェクト名] --template typescript
tsconfig.json にプロジェクトに合わせた設定をおこなうことでルールをカスタマイズ
型を定義することでエラーを防ぐ
コンポーネントにも型を付与する

Chapter9 カスタムフック

任意の処理をまとめて自作のHooks(use〜)を作成する実装
- ロジックをコンポーネントから分離
- 複数コンポーネントでのロジックの再利用
React標準Hooks
- useState
- useEffect
- useCallback
- useMemo
- useContext

モチベーション

メモ

Chapter1 モダンJavaScript の基礎

Chapter2 モダンJavaScript の機能に触れる

let, constを用いた変数宣言

テンプレート文字列

アロー関数

分割代入

スプレッド構文

map関数

filter関数

&& と || について

Chapter3 JavaScript でのDOM 操作

Chapter4 React の基本

Chapter5 React とCSS

Chapter6 再レンダリングの仕組みと最適化

Chapter7 グローバルなState 管理

Chapter8 React とTypeScript

Chapter9 カスタムフック

`&&` と `||` について