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

· ·

モダン javascript への理解を深めるついでに React の知識を多少持ちたいので「モダン JavaScript の基本から始める React 実践の教科書」を読む

2 ページのさらっとした解説が後々繋がってきたり、そこまで重要じゃないのかな？と思って進めてしまった部分がいくつかあって後半ちょっと苦労したり。最後のメモアプリは色々調べながら、うんうんやってたけどまだ出来るレベルになってはいない(苦笑)

chapter 2 モダン JavaScript の機能に触れる 🔗

  • const で定義した変数はオブジェクト型(オブジェクト、配列、関数等)の場合中の値の変更可能
  • オブジェクトの定義は基本的に const を利用する
  • React の場合は State で管理せず処理の中で値を上書きしていくような変数のみ let を使う
  • テンプレートはバッククォート
1
2
3

const name = "主田";
const age = 24;
const message = `私の名前は${name}です。年齢は${age}歳です。`;
  • アロー関数例 : const func1 = (num1, num2) => num1 + num2;
  • ワンラインでアロー関数を書く場合は波括弧も return も不要となる
  • 分割代入例
1
2
3
4
5

const myProfile = {
  name: "主田",
  age: 24,
};
const message = `私の名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`;
  • 配列の分割代入
1
2
3

const myProfile = ["主田", 24];
const [name, age] = myProfile;
const message = `私の名前は${name}です。年齢は${age}歳です。`;
  • 引数デフォルト値
1

const sayHello = (name = "ゲスト") => console.log(`こんにちは!${name}さん`);
  • スプレッド構文 : …で展開する
1
2
3

const arr1 = [10, 20];
const arr2 = [30, 40];
const arr3 = [...arr1, ...arr2]; // [10, 20, 30, 40]
  • オブジェクトの省略記法 : 「オブジェクトのプロパティ名」と「設定する変数名が同一の場合は省略できる
1
2
3
4
5
6
7

const name = "主田";
const age = 24;

const user = {
  name,
  age,
};
  • map 関数例
1
2
3
4

const nameArr = ["主田", "先岡", "後藤"];
const nameArr2 = nameArr.map((name) => {
  return name;
});
  • filter 関数 : return の後に条件式を記述して一致するもののみが返却
1
2
3
4

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

chapter 4 React の基本 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

version: '3.9'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./app:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "3000:3000"
    stdin_open: true
  • Dockerfile
1
2

FROM node:16-alpine
WORKDIR /usr/src/app
  • コマンドでサンプルの「react-sample」アプリを生成
1

docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"
  • あとは docker-compose up
  • typescript テンプレートを読み込む場合は…
1

docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample --template typescript"
  • JSX 記法では return に直接 HTML タグを記述できるものの複数の HTML タグを書く場合は Fragment や div またはカラのタグで囲む必要がある
  • Props を分割代入する。例えば props.color, props.children の 2 つが渡される場合…
  • pattern 1
1
2
3

export const SampleMessage = (props) => {
  const { color, children } = props;
};
  • pattern 2
1

export const SampleMessage = ({color, children}) = >{}

chapter 5 React と CSS 🔗

  • node-sass 、styled jsx　、 styled components　、 Emotion
  • CSS だと Emotion が全部網羅されている感じなのかなぁ。初めて触れている身としてはこのあたりの書き方、全然頭に入ってこないな。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/** @jsxImportSource @emotion/react */
import { jsx, css } from "@emotion/react";
import styled from "@emotion/styled";

export const Emotion = () => {
  // scssの書き方をそのまま書く
  const containerStyle = css`
    border: solid 1px #aaa;
    border-radius: 20px;
    padding: 8px;
    margin: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  `;
  // インラインスタイルの書き方
  const titleStyle = css({
    margin: 0,
    color: "#aaa",
  });
  return (
    <div css={containerStyle}>
      <p css={titleStyle}>Emotionです</p>
      <SButton>ボタン</SButton>
    </div>
  );
};

// styled-componentsの書き方
const SButton = styled.button`
  background-color: #ddd;
  border: none;
  padding: 8px;
  border-radius: 8px;
  &:hover {
    background-color: #aaa;
    color: #fff;
    cursor: pointer;
  }
`;

chapter 6 再レンダリングの仕組みと最適化 🔗

  • 親のコンポーネントが更新されると子のコンポーネントも再レンダリングが実施されてしまう。それを防ぐのが React.memo
  • const Component = memo(() => {});
  • たぶん、component をうまく分けられることができれば、それに越したことは無いんだろうなぁ
  • 再レンダリング等でコードが実行されるたび、常に新しい関数が再生成されているため関数のメモ化も必要
  • useCallback() で第 2 引数を空にすることで最初に作成されたものが使い回されるようになる
1
2
3

const onClickButton = useCallback(() => {
  alert("ボタンが押されました");
}, []);
  • 変数も一応メモ化することができる
1
2
3

const sum = useMemo(() => {
  return 1 + 3;
}, []);
  • メモ化した場合、初回の読み込まれたときのみ計算実行され、それ移行再レンダリングされた時は最初の値を使い回す

グローバルな State 管理 🔗

  • React.createContext で Context の器を生成。Context の Provider でグローバル State を扱いたいコンポーネントを囲み、参照したいコンポーネントで useContext を利用する

React と TypeScript 🔗

  • TypeScript の基礎とサンプル
javascript react
comments powered by Disqus