udemy React完全入門ガイド学習メモ (original) (raw)
udemyのReact完全入門ガイドを視聴したので、新しく学んだことをメモしました。
4 章 React に触れる
package.jsonのstartは開発環境でサーバーを動かすコマンドpackage.jsonのbuildは本番環境用にビルドするコマンドpackage.jsonのejectはcreate-react-appで作った隠しファイルを表示するコマンド- Vite でも create-react-app でも React 自体の挙動は変わらない
- Vite での
SWCはより高速にビルドを行うためのツールで、容量は重い importで相対パスを使う場合は同じ階層には./をつける必要がある- 基本的にコンポーネントは 1 つのファイルにつき 1 つだけなので、デフォルトエクスポートを使えばいい
- Fragment には属性は指定しないが、
keyを使うことはある、その場合Fragmentは省略できない - JSX では boolean の値は表示されない
- 変数に代入できるものが式で、できないものが文
- 文は
returnの中以外なら問題なく動作する - props にもデフォルト引数を使える
- props の値を子コンポーネントで書き換えてはいけない
- JSX はあくまで JavaScript のオブジェクト
- JSX の実体は
React.createElementメソッドで生成される - コンポーネントも React 要素
- React 要素を利用可能な状態にすることをマウントという
- ReactDOM が仮想 DOM を元に DOM を更新する
- 関数コンポーネントは props を受け取り JSX を返す
5 章 イベントリスナと状態管理
- イベントに渡す関数に
()をつけると実行されて戻り値が渡されてしまう useStateはコンポーネントの再レンダリングを React に依頼し、変更した値を保持する仕組み- 更新関数によってコンポーネントの再レンダリングが行われる
memorizedStateとnextを使うことでuseStateを呼び出した順番を管理している- 更新関数による再レンダリングは即時に行われるのではなく予約される
- オブジェクトの state は同じ構造で更新する必要がある
- オブジェクトの state は新しいオブジェクトで更新する必要がある
keyはコンポーネントを一意に識別する- React 要素のツリーにおけるコンポーネントの位置が変わらない場合は state は保持される
6 章 制御構文とフォームの制御
- React は差分検出で DOM を更新する
- key があるとどの要素が変更されるか識別できるので差分のみ更新できる
- key には配列のインデックスはなるべく使わない
textareaの値は HTML とは違ってvalueに書くselectで選択された値を表示したい場合はoptionにselectedを指定するのではなく、selectのvalueにoptionのvalueと同じ値を指定する
7 章 スタイリング
- React では以下の 4 つの CSS の適用方法がある
- インラインスタイルは
style属性を使わなければならないのでコードの再利用性が低く、また疑似セレクタとメディアクエリが使えず、パフォーマンス的にも良くない - 画面全体に適用する CSS は外部 CSS で読み込む
- CSS Modules は class を JavaScript のモジュールのようにインポートして使う方法
- CSS Modules は近い将来廃止される可能性があるので CSS in JS を使うべき
- CSS Modules を使うと自動で class が一意になる
- CSS in JS は
styled-componentsやemotionなどのライブラリを使う styled-componentsはスタイルを当てたコンポーネントを作って使う方法styled-componentsはstyled()を使ってコンポーネントのスタイルを継承できるstyled-componentsも自動で class が一意になるstyled-componentsでは props を使って動的にスタイルを変更できる- ChakraUI は
styled-componentsを元にした CSS フレームワーク - CSS フレームワークはコンポーネントをそのまま使うタイプと、class を当てていくタイプがある
8 章 DOM 操作
createPortalはポータルの子要素を直接の親要素ではなく別の DOM 要素にマウントすることができる- バブリングはイベントが子要素から親要素に伝播すること
- React では直接 DOM を操作しないが、
useRefを使うと DOM を直接操作できる useRefの使い方useRefで Ref オブジェクトを作る- 取得したい DOM の
refに Ref オブジェクトを指定する - React は DOM への参照を
currentに格納する - イベントハンドラなどで DOM にアクセスする
useRefは DOM のメソッドにアクセスする場合に使われるuseRefのcurrentプロパティに値が設定される- ref は再レンダリングされても情報が保持される
- ref の値を変更しても再レンダリングされない
- ref を props として渡す際は、
refとは別の名前で受け取るか、forwardRefを使う - ref を受け渡すのはコンポーネントの結びつきが強くなるのでやめたほうがいい
useImperativeHandleを使うことで ref の操作を限定できるforwardRefはuseImperativeHandleは子から親にデータが流れるのであまり使わずに、state で解決したほうがいい- React のデフォルトではコンポーネントが他のコンポーネントの DOM にアクセスすることはできない
10 章 関数型プログラミング
- React は React Hooks 導入により関数型プログラミングにシフト
- 関数型プログラミングとは、手続き型の制御を関数に分離して隠蔽し、コードを整理するプログラミング手法
- 手続き型プログラミングは、手順通り命令を記述する手法
- 実際は関数型と手続き型は混在する
- 関数型では状態と処理を切り離すこと、特定の入力には特定の出力を返す純粋関数、一度設定した値を書き換えないことが重要
- 関数型では関数の引数にデータを渡して結果を返して処理を行う
- 純粋関数は決まった引数からは決まった戻り値を返す関数で、関数外のデータを参照・変更せず、関数外に影響を及ぼさない
- 引数で渡された値は変更してはいけない
- イミュータブルな値の変更は、値を書き換えるのではなく、新しい値をメモリ空間に作成し、参照を切り替える
- Immutability は配列やオブジェクトをイミュータブルな値のように元の値を変更せずに扱うこと
- 関数コンポーネントは props を受け取り、JSX を返す純粋関数にする（実際は state にも依存する）
- props は変更してはいけないので、更新関数も props として渡すようにする
- React ではコンポーネント外のものは基本的に引数だけを見ればいい
11 章 様々な状態管理の方法
useReducerはuseStateの書き換えのようなもので、規模が大きいアプリに向いているuseStateは状態の更新の仕方を利用者が決め、useReducerは更新の仕方もあらかじめ状態側が決めるuseReducerの使い方- 現在の状態を保持する
stateとどのように状態を更新するかを示すオブジェクトであるactionの 2 つの引数を取るreducer関数を定義する useReducerをインポートして、第一引数にreducer関数、第二引数に初期値を渡して、分割代入でstateと状態を更新するトリガーとなるdispatch関数を定義する- 任意の関数で
dispatchを使って、actionをreducerに送り、状態の更新をトリガーする
- 現在の状態を保持する
actionはどの更新方法を実行するかを決め、switch 文で条件分岐を書くのが一般的useReducerの第一引数は純粋関数になっている- input の
valueの値は文字列になるので、数値として扱う場合は変換する必要がある useContextの使い方createContextをインポートして、コンテキストを作る（初期値を指定する場合は引数に渡す）- コンテキストの
Providerで囲んで値を渡す - 作成したコンテキストを使いたい場所でインポートして、
useContextで値を定義する
ProviderやuseContextは別ファイルで定義したほうが良い- Context を使っているコンポーネントは context が更新されると再レンダリングされる
- 不要な再レンダリングは値ごとに
Providerを作ると防げる
12 章 useEffect とカスタムフック
- 依存配列が更新されると
useEffectのコールバック関数が実行される - 依存配列を
useEffect内で更新すると無限ループになる useEffectのコールバック関数内で関数を返すと、コンポーネントが削除されたときに実行される（クリーンアップ処理）- クリーンアップ処理はコンポーネントが消滅するタイミングで後始末を行いたいときに書く
setIntervalは使用が終わったらメモリのためにクリアする必要があるuseLayoutEffectはuseEffectと同じように書けるが、useEffectより先に実行される、また画面の反映よりも先にコールバック関数が実行されるuseEffectは上から実行される- カスタムフックは hooks を内部で使った関数のこと
- JSX の構築に関係ない処理はすべて副作用なので、
useEffectかイベントハンドラに記述する
13 章 Redux と Redux Toolkit
- Redux は
useContextとuseReducerを合わせたような状態管理の仕組みで、React 以外でも使える - Redux を使うことで、
useContextとuseReducerよりも保守性や可読性が上がるので中規模のアプリでも Redux を使ったほうがいい - Redux Toolkit を使うことが推奨されており、Redux 以外の便利なライブラリや関数も使うことができる
- Redux でも state を使いたいコンポーネントを
Providerで囲む - state は
Storeに保持する - state を使う時は
useSelector()を使う - state を更新する時は
useDispatch()を使う - Redux の仕組み
- 1 つのグローバルストアが準備されていて Reducer を登録する
- Reducer によって Store に登録されている state を更新する
- Reducer を実行するために Dispatch で Action が Store に送られる
- Action の Type に一致する Reducer が実行される
- Redux では state を更新するのは Reducer だけになる
- Store は複数の Reducer を保持できる
- 複数の Reducer を使うと、Reducer ごとに state が作られるので、同じ type があるとどちらも変更されるので注意する（toolkit を使うと自動で別になる）
ActionCreatorは dispatch で渡すactionを定義する関数で、toolkit では自動的に作られる- toolkit ではストアは
configureStoreで定義する - toolkit では
createSliceに渡すオブジェクトで初期値やreducerを定義する - toolkit では reducer は
createSliceに渡すオブジェクトのreducerプロパティとして定義し、reducerプロパティに渡すオブジェクト内のメソッドで処理を記述する - toolkit の中では Immer が使われているので、ミュータブルな操作がイミュータブルに扱われる
- プロキシによってミュータブルな処理がイミュータブルな処理に変換される
- Immer を使うとネストされたミュータブルな値にも対応できる
- Immer を使ってミュータブルな値を変更した場合は
returnを書かない - Redux での副作用のコードは Middleware に書く
- Reducer に非同期処理は書かない
- すべての action に対して共通処理を書きたい場合は
middlewareを使う（あまり使うことはない）
14 章 クラスコンポーネント
- 関数コンポーネント以前はクラスコンポーネントを使っていた
- React の 16.8 から Hooks が追加されたので関数コンポーネントが使われるようになった
- クラスコンポーネントの問題点
- ロジックとビューの分離が難しい
- ステートの管理が複雑になるとロジックや副作用の整理が難しい
thisやbindを使う必要がある
- クラスコンポーネントは
Componentをインポートして継承して作る - JSX は
render()のreturnに記述する - クラスコンポーネントは strict モードなので、メソッドをそのまま
this.methodで呼び出すと、メソッド内のthisはundefinedになる - クラスコンポーネントの
thisの挙動を解決するにはbindを使ってthisをクラス自身に束縛する（コンストラクタ内で実行する） - コンポーネントには Mounting、Updating、Unmounting の 3 つのライフサイクルがある
- それぞれのライフサイクルで実行できるライフサイクルメソッドが存在する
- 関数コンポーネントではライフサイクルは
useEffectで実現する - コンポーネントが初回にマウントされた時 componentDidMount =
useEffect(.., []) - state が更新された時 componentDidUpdate =
useEffect(.., [val]) - コンポーネントが消滅する時 componentWillUnmount =
useEffect(() => {return () => {}}, []) ErrorBoundayで囲むと全体のエラーを表示せずに、エラー時の UI を表示できるErrorBoundayはクラスコンポーネントでしか実装できない
15 章 パフォーマンスの最適化
- React で画面を更新する流れ
- 初回のレンダリングはルートコンポーネントを HTML にマウントした時
- state が更新された時に再レンダリングが走る
- 現在地と同じ値で更新を行うと React は子のレンダーや副作用の実行を回避して処理を終了する
- 再レンダリングはそのコンポーネントの子コンポーネントもすべて行われる
- state の変化は内部では
Object.isで検知する - StrictMode だと React がレンダリングを実行してバグがないか確認するので、開発環境では余分にレンダリングが実行される（本番では実行されない）
StrictModeはルートコンポーネントを囲むのが一般的React.memoは囲んだコンポーネントが受け取る props が更新されない限り、再レンダリングが実行されなくなる- 子コンポーネントの props で関数を受け取る場合、親コンポーネントで渡したい関数を
useCallbackで囲むと、再レンダリングが発生しても再定義されず同じ関数が渡されることになる useCallbackでは第二引数で依存配列を指定する必要があるuseCallback内の関数で state を更新する場合は依存配列にその state を指定するuseMemoはコールバック関数で return するあらゆる値をメモ化できる（キャッシュする）useMemo自体の判定処理もコストがかかるstartTransitionは処理を遅延しているだけなので、メモ化を行なってもパフォーマンスが解決しない場合に検討すべき- React18 で導入された Concurrent Mode は処理の優先順位付けを行なってより快適でレスポンシブな画面を作成する機能
16 章 Rest API を使ったサーバーとの通信
- React でサーバーと通信を行う場合は、React のコードでサーバーにリクエストを送り、サーバーが JSON でレスポンスを送信するのが一般的
- REST API はサーバーへのリクエスト方式のこと
- REST API を使わない場合は
/create-todoや/delete-todoのように処理ごとに URL のパスを設ける - REST API の場合はリソースごとに URL を作り、HTTP メソッドで処理を分ける
- JSON は JavaScript のオブジェクトのようなデータ定義言語
.jsonはコメントをかけないが、.jsoncとするとコメントを書ける- JavaScript のオブジェクトを JSON に変換するには
JSON.stringifyを使う - JSON を JavaScript が認識できる形に変換するには
JSON.parseを使う（サーバーからのレスポンスなど） - JSON server は開発環境用の API のモックを作成できる node.js のライブラリ
useEffectのコールバック関数にasyncをつけるとエラーが出るので、非同期処理の関数を作るaxiosを使うと JSON を内部で JavaScript のオブジェクトに変換してくれる- 非同期で取得したデータは state に格納する
useEffectで state を更新する時に第二引数に空の配列を渡さないと無限ループになる- ダイナミックインポートは
import()を使ったインポートの方法で、モジュールが必要になったときに読み込めるようになる import()は Promise を返す- React でダイナミックインポートを使う時は
lazy()を使って、コールバック関数にコンポーネントを読み込むimport()を使う
17 章 Next.js 14 （App Router）を使ったアプリの構築方法
- 新規のプロジェクトでは App Router で実装する
- 現在はサーバーのキャッシュを使った SSR が主流
- App Router は
page.jsはリクエストが送信された時に表示するコンポーネントを書くRootLayoutは全てのレイアウトに適用されるlayout.jsがまず読み込まれて、childrenにpage.jsのコンポーネントが読み込まれる- パスが見つからない場合は
not-found.jsが読みこまれる - App Router ではフックがある場合は
use clientを書く必要がある - サーバー側で実行するための
use serverは基本は使わない - Next.js では基本的にはサーバー側で完結させる
- クライアント側でレンダリングする部分はなるべく分ける
- サーバーコンポーネントでは直接データを取得できる
- Next.js の
fetchはブラウザ標準のものとは別で、Next.js 独自の関数 - Next.js では
fetchでデフォルトでキャッシュを使う generateStaticParamsはダイナミックルーティングに当てはまる値を決めるメソッド- SG で生成されたファイルは
out/に出力されるので、outをサーバーに配置すれば公開できる - ページのメタデータは
layout.jsのmetadataのオブジェクトで設定できる - メタデータを動的にする場合は
generateMetadata()を使う - Next.js で API を作る時は
api/にroute.jsを作り、HTTP メソッドごとに関数を作る - Server Actions は REST API 経由でのサーバー側のデータの更新を直接関数経由で行う
- Server Actions の関数には
use serverを記述する useFormStateは新しい React のフックで、Server Actions の結果を画面に表示することができる
18 章 Next.js 12 （Pages Router）基本的な使い方
next.config.jsは Next.js の設定を書く- ディレクトリかファイル名に
[]を使うことで、動的なルーティングを実装できる - ページが
index.jsだと URL で省略できる - 動的なルーティングと固定のルーティングでは固定のルーティングが優先される
- ダイナミックルーティングは 1 つの階層に 1 つしか作れない
getServerSidePropsは SSR を行うための関数- 動的ルーティングの値を取得するには、
context.queryまたはuseRouterのrouter.queryを使う useRouterが返すオブジェクトは URL のパスの情報や画面遷移のメソッドの情報が格納されているrouter.pushで画面遷移できるrouter.replaceでも画面遷移できるが、履歴を上書きするrouter.backで 1 つ前の画面に戻るrouter.reloadで画面を更新するLinkコンポーネントを使わずに a タグを使うと画面が更新される- クエリパラメータは文字列で取得される
next.config.jsでrewritesを設定することで実際の URL とは異なる URL でアクセスできる_app.jsはページを開いた時に必ず実行されるコンポーネントなので、グローバルな state を使う時は_app.jsで Provider を使うHeadは head タグに挿入するタグを書くScriptコンポーネントは外部スクリプトを読み込み時に使うが、ほぼ使わないpagesに外部からアクセスされてはいけないファイルは置かない- 静的なリンクには
Linkを、何らかの処理をきっかけに画面遷移を行う場合はuseRouterを使う - Next.js では CSR、SSR、SG、ISR のレンダリング方法があるが、SSR と SG がよく使われる
- CSR はクライアントサイドレンダリングで全ての処理がクライアント上で行われる
- Next.js でクライアント側での処理のみを行いたい時は
useEffectを使う - SSR はサーバーサイドレンダリングでサーバー側で動的に HTML を生成する
- SSR は外部 API へのデータ取得やコンポーネントの props の値を決定する処理を行い、HTML を作成してクライアント側に返却する
- SG は静的サイト生成で、リクエスト時ではなくビルド時にデータを取得し HTML を生成する
- Next.js では基本的なページは SG で作り、動的な変更が多い場合は SSR で作る
- ISR はビルド時に HTML を構築し、一定時間後のアクセスでサーバー側で HTML を更新する
- ISR はサーバーの設定が手間であるデメリットがある
- Next.js では Node.js 上とブラウザで関数コンポーネントが実行される
- Next.js では仮想 DOM を使って擬似的に Node.js 上で DOM ツリーを作成し、値を代入して HTML を返す
- SSR ではブラウザの window などは使えないので使いたい場合は
useEffectを使う - SSR は初期表示で、画面遷移では CSR
getServerSidePropsは Node.js 上で実行されるので、コンソールには表示されないgetServerSidePropsはページコンポーネントでしか使えないgetServerSidePropsの引数のcontextには通信の情報が格納される- Next.js では他の画面から遷移してきた場合は CSR になるが、ページコンポーネントで使用する
pagePropsは Node.js から JSON 形式で受け取る - SG は HTML を出力するもの
- SG はいくつかパターンがある
- export - ビルドしたものを HTML として出力する
getStaticPropsはビルド時に実行され、戻り値が json で保存される- SG ではあらかじめファイルを生成するので、ダイナミックルーティングでの値を取得できない
- SG でダイナミックルーティングを使う時は
getStaticPathsを使う getStaticPathsはビルド時に実行され、動的なパスを事前に生成するために使うgetStaticPathsのparamsはgetStaticPropsのcontextで取得できるnpm exportだとout/に静的ファイルを出力するnpm startはfallbackはfalseにするとnpm startを実行した時にgetStaticPathsに定義されていないパスにアクセスした時に 404 になるISRは Vercel だとうまく動くが、他のホスティングサービスだと設定が難しいISRはgetStaticPropsのreturnにrevalidateを追加するだけrevalidateには秒数を指定する- API Routes は Next.js 上で簡易的な API を作る機能
- プロトコル、ドメイン、ポート番号が同一のものが同一オリジン
- クライアントサイドからリクエストを送信する際は外部サービスの API の URL は一般的にはバックエンドで集約して隠蔽する
- Next.js では開発環境には
.env.development、本番環境では.env.productionに環境変数を設定する - 環境変数を取得する場合は
process.env.を使う - 環境変数によって実行する環境によって自動的に値が切り替わる
20 章 テスト
- テストがないとコードの改修時に影響範囲を調べる必要がある
- 関連システムを含め、エコシステム全体に対して行うテストを一気通貫テストという
- Jest は初期設定が不要
- Vite のプロジェクトでは Jest に代わり Vitest が使われる（Jest への移行は容易）
itとtestは同じ役割- Test Suites はファイルごとで、Tests は 1 つずつのテストを指す
- React での Jest を使ったテストでは、
testのコールバック関数内でコンポーネントを擬似的にレンダリングして、要素を取得してexpectを使ってテストを書く - テストで要素を取得する場合は機械的なタグではなく、実際にユーザーが使うアクセシビリティを使った情報や、テキストデータで取得する
- テストコードは Arrange（準備）、Act（実行）、Assertion（結果）の確認の順番で書く
- 更新前もテストすると厳密にテストできる
describeを使うことでテストをまとめてわかりやすくできるuseReducerを使うことで関数のテストを書けるuseStateだと、ユーザーの操作による状態の変化をテストする必要がある- オブジェクトを比較する場合は
toEqualを使う - プリミティブを比較する場合は
toBeを使う - ユーザーの操作をテストするときには
fireEventより忠実に画面の操作に合うように実装されているuserEventを使う - 外部 API は通信するたびに取得するデータが変わったり、API のサーバーがダウンしていると、テストが失敗するのでモック化する
- モック化では
jest.mock()を使う
21 章 TypeScript
- 基本的には関数内で使うオブジェクトは型推論を使い、外部から渡されるオブジェクトは型を定義すべき
- TypeScript では引数の個数が合わないとエラーになる
- 関数コンポーネントの型定義では
React.FCを使う childrenの型はReact.ReactNodeを指定する- TypeScript ではクラスのメンバーを定義する必要がある
- Event の型にはイベントの種類によって変わる
onClickなどに直接関数を記述した場合は自動で型が指定される- 型情報だけをインポートする時は
import typeを使える