以前、Reactを学習中にGitHubへメモしていた内容をここQiitaにも備忘録として残しておきます。
使用した教材
JavaScript
JavaScriptでも、知らない部分やわかりやすい解説が載っていたので念のためメモしました。
debugger;
debugger;と書くと、その行でJavaScriptの実行を一時停止できる。
Chromeの開発者ツールを開いた状態で実行すると、変数の中身や処理の流れを確認できる。
truthyとfalsy
JavaScriptでは、値を真偽値として扱うときにtrueまたはfalseへ変換される。
- falsy:真偽値に変換したときに
falseとみなされる値 - truthy:falsy以外の値
主なfalsyな値は次のとおり。
false-
0、-0 -
0n（BigInt） -
''（空文字） nullundefinedNaN
論理積（&&）と論理和（||）
-
&&は、左から順に評価し、最初に見つかったfalsyな値を返す。すべてtruthyなら最後の値を返す。 -
||は、左から順に評価し、最初に見つかったtruthyな値を返す。すべてfalsyなら最後の値を返す。
条件分岐だけでなく、「値があるときだけ表示する」「空なら初期値を使う」といった場面でも使う。
JSX
JSXは、JavaScriptファイルの中にHTMLのような見た目でUIを書くための記法。
-
classはclassName、forはhtmlForと書く - 1つの
returnでは、複数の要素を1つの親要素またはFragmentで囲む - Fragmentは
<>...</>と短く書ける -
<br />や<hr />のように、タグは必ず閉じる - JavaScriptの値をJSX内で使うときは
{}で囲む
HTMLをJSXの記法に直すときは、HTML TO JSXのような変換ツールが便利。
状態管理
コンポーネントの中で表示を変えたい値は、useStateで状態として持てる。
const [status, setStatus] = useState(null);
statusが現在の状態、setStatusが状態を更新する関数。更新関数の名前はset〜とする書き方がよく使われる。
ディレクトリ構成とnpmコマンド
src
開発用のファイルを置くディレクトリ。ReactコンポーネントのJSXファイルなどを配置する。
public
静的ファイルを置くディレクトリ。HTMLファイル、ロゴ、faviconなどを配置する。
build
本番用のファイルが出力されるディレクトリ。Create React Appではnpm run buildを実行すると生成される。
npm start
ローカル開発サーバを起動して、ブラウザで確認できる。ファイルを変更すると、画面へ反映されるホットリロードにも対応している。
npm run build
本番公開用のファイルを生成する。JavaScriptやCSSなどがまとめられ、Create React Appではbuildディレクトリへ出力される。
npm run eject
WebpackやBabelの設定を直接変更したいときに使うコマンド。一度実行すると元に戻せないため、基本的には使わないものとして覚えている。
コンポーネント
Reactでは、画面を小さなコンポーネントの組み合わせとして作る。
- 役割ごとにコンポーネントを分けると、コードを読みやすくしやすい
- 現在は関数コンポーネントを使う書き方が一般的
- コンポーネントは定義したファイルから
exportし、使うファイルでimportする - React 17以降では、新しいJSX変換を使う設定なら
import React from 'react';は不要 - 1コンポーネントを1ファイルに置くことが多いが、規模や役割に合わせて決める
props
propsは、親コンポーネントから子コンポーネントへデータを渡すためのもの。
- 子コンポーネントは受け取ったpropsを直接変更しない
- 文字列、数値、真偽値、配列、オブジェクト、日付、関数などを渡せる
- JSX内でJavaScriptの値を渡すときは
{}を使う - 文字列だけなら
title="React"のように{}なしでも書ける
importとexport
default exportとdefault import
1ファイルからメインの値を1つexportしたいときは、default exportを使う。
default exportした値は、importする側で好きな名前を付けられる。
export default Button;
import MyButton from './Button';
名前付きexportと名前付きimport
1ファイルから複数の値をexportしたいときは、名前付きexportを使う。
export { Button, Input };
import { Button, Input } from './components';
複数のexportをindex.jsなどに集めておくと、import文を短くできる場合がある。
Hooks
Reactでは、画面の表示は基本的にstateやpropsから決まる。DOMを直接書き換えるより、stateを更新してReactに画面を再描画してもらう考え方が基本。
Reactコンポーネントが再描画されるきっかけは次のとおり。
- stateを更新したとき
- 親コンポーネントが再描画されたとき（propsが変わる場合を含む）
- 利用しているcontextの値が変わったとき
stateとpropsの違い
- props:親から引数のように渡される値。子コンポーネントから直接更新はできない
- state:コンポーネントの内部で持ち、更新関数を使って変更する値
useState
set〇〇のような更新関数を使ってstateを更新する。
前のstateをもとに更新したい場合は、更新関数へ前の値を受け取る関数を渡せる。これをprevStateと呼ぶことがある。
useEffect
クラスコンポーネントでは「ライフサイクル」という言葉がよく使われる。関数コンポーネントではuseEffectを使って、Reactの外にあるものと同期する処理を書ける。
たとえば、APIからデータを取得する、ブラウザのAPIを使う、イベントリスナーを登録するといった処理。
useEffectが実行されるタイミングは、依存配列によって変わる。
- 依存配列を書かない:レンダリングのたびに実行される
-
[]を渡す:最初の表示後に実行される - 値を渡す:指定した値が変わったあとに実行される
クリーンアップ関数をreturnすると、次にEffectが実行される前や、コンポーネントが画面から外れるときに呼ばれる。イベントリスナーの解除や通信の後始末などに使う。
ただし、stateやpropsから計算できる値を更新するだけなら、useEffectは不要なこともある。まずはレンダリング中に計算できないか、イベントがきっかけの処理ではないかを考える。
useEffectのユースケース
- APIから非同期通信でデータを取得する
- 特定の値が変わったときに、データを再取得する
- イベントリスナーやタイマーを登録・解除する