React研修資料修正 #73

aDaisukeHirano · 2024-12-25T10:09:01Z

更新内容

React研修資料で改善した方が良さそうなところにコメントをしました。
間違っているコメントやもっとよい改善方法が見つかると思うので、レビューをいただいたあとに清書する予定です。

コメントの修正方針で良いか悪いかだけでも、コメントをお願いします。

--- 2025/03/13 追記 ---

1章〜7章までの範囲外でのコメントが大量に発生してしまったため、こちらは別途 PR を出して対応予定です。
そのため、本 PR では8章〜15章(08_state.md ~ 15_advanced.md)までの範囲を対象とします。

--- 2025/03/23 追記 ---

1章〜7章の修正を別のPRで出すことになっていたのですが、このPRにまとめることになりました。

注意事項

別PRでprettierの導入をしようと思っているので、フォーマットに関する指摘はしていただかなくて大丈夫です。(3/25 追記)

変更内容のまとめ (2025/03/24 追記)

1章 TSXを学ぶ

「TSX」を「JSX」に変更
コンポーネントについての説明を削除 (3章の冒頭に移動)
- 3章で説明しているため
その他、内容を大きく変えずにわかりやすい文章に改善

2章要素のレンダー

DOMの説明を追加
「リアルDOM」を「実DOM」に名称変更
仮想DOMの差分検出を表す図を差し替え
DOMの差分のみが反映されることを表すサンプルコードを「秒刻みで動く時計」から「掛け算の計算」に変更
- 「秒刻みで動く時計」のサンプルコードはコンポーネントを再マウントしており、全体が更新されるようになっていたため修正。

3章コンポーネントとprops

1章で書かれていたコンポーネントの説明を導入の説明に追加
コンポーネント名をUpperCamelCaseで書かないと動作しないことを追記
コンポーネント分割の方針として「Bulletproof React」を追加
その他の軽微な修正

4章イベント処理

内容を大きく変えずにわかりやすい文章に改善

5章

軽微な修正

6章リストとkey

mapのkeyの設定ミスによる不具合について追記
keyとして指定できる型を追記

7章 Reactのライフサイクル

「状態」という見出しを「ライフサイクル」と「段階」に分離
レンダーフェーズとコミットフェーズの説明を修正
useEffectとuseRefの説明を修正
useImperativeHandleとuseDebugValueの説明を削除
React19ではhooksが17個存在することを追記
その他の軽微な修正

8章 state

純粋関数に関する説明を削除
- 経緯はレビュー内スレッド参照
useStateは「インタラクティブに画面を更新する機能を実現するためにAPI」という説明とする。
[状態変数, 状態変更関数] = useState(状態変数の初期値)を[現在のstate, 状態更新関数] = useState(状態の初期値)に変更
hooksは関数コンポーネントのトップレベルでのみ宣言可能という説明を削除
- 10章で説明されるため
「stateにするのはprimitiveな値を推奨し、objectやarrayの場合はuseReducerを使うべき」という説明を削除
- objectやarrayをstateにするのは非推奨ではないため。むしろ、state 構造の選択で、関連するstateはobjectにまとめることが推奨されている。
stateが更新されてから画面が更新されるまでの流れを表す図を追加
- react/docs/content/toc/08_useState.png
setState(prevState => prevState + 1)のように、状態更新関数に関数を渡すこともできることを説明するための見出しを追加

9章 state の更新ロジックを抽出する

章のタイトルを「複数のstateをまとめる」から「stateの更新ロジックを抽出する」に変更
- useReducerの役割は、複数のstateをまとめることではなく、stateの更新ロジックをコンポーネントの外にreducer関数として切り出すことであるため。
章タイトルの変更と合わせて、useReducer導入の説明を修正。useReducerを使うタイミングは「更新ロジックが複雑な場合」として、その例として「stateの更新方法が複数あるケース」を挙げている。
useStateではなくuseReducerを使うことを考慮するケースを変更。
「reducer」の由来が、Array.protetype.reduce()であることを説明する見出しを追加。詳細までは説明せず、公式Documentに飛ばす形にしている。

10章 Hooksのルール

軽微な修正

11章値の同一性を理解する

useCallbackに関する「値の同一性を考慮していない実装の例」「useCallbackの導入」「値の同一性を考慮した実装の例」の見出しを削除
- useCallbackはReact.memoと合わせて説明した方がわかりやすいと思ったため14章に移動
「メモ化の不要の関数オブジェクト」については、14章で新しく追加した「(optional) 依存配列に設定するのは「リアクティブ」な値」の中で扱っている。

12章副作用を実行する

副作用の説明が非純粋関数の説明になっていたので、副作用の説明に修正
useStateが副作用であるという旨の記載を削除
副作用を「ユーザーのアクションがトリガーとなる副作用」と「画面表示がトリガーとなる副作用」に分類をした上で、前者はイベントハンドラ、後者を実装する際にuseEffectを使うという説明に変更
- この導入の流れは、エフェクトを使って同期を行うを参考にしている。
React公式に倣って「画面表示がトリガーとなる副作用」を「エフェクト」と名付け、このドキュメントで「エフェクト」の意味で使われている「副作用」の名称を「エフェクト」に変更。
「依存配列に入れる値を調整してエフェクトの実行タイミングをコントロールする」と捉えられる説明を削除。依存配列にはESlintに従って全ての依存値を設定するものであることを追記。
「クリーンナップを必要としない副作用」と「クリーンナップを必要とする副作用」という分類を削除。クリーンナップが必要である場合は記述するという説明に変更。
useEffectの実行タイミングを説明するライフサイクルの図を差し替え。セットアップとクリーンナップが実行されるタイミングを明確にする狙い。
課題12-1をuseEffectとSuspenseを使って実装する課題からuseStateとuseEffectを使って実装する課題に変更。
- 模範解答を見ると、Suspenseの課題というよりかはtoTask関数を実装する課題のようになっていて、身につけて欲しい内容ではないと思ったため。
- Suspense導入前の問題に戻す形になっており、模範解答はReact研修課題解答例 - 2023にあるため、課題内容変更によって模範解答を新規作成する必要はありません。
Suspenseの説明で挙げられていたサンプルコードが動作しなかったため、React.useを使うコードに修正。それに伴い、Suspenseの説明も修正
- サンプルコードが動作しなかったことについて、dataをuseRefで管理していたため、dataを更新しても再レンダリングがされず、promiseが解決しても何も表示されないままになっていました。では、useStateを使えば良さそうですがそれでも画面は更新されません。詳細は、「ReactのSuspense対応非同期処理を手書きするハンズオン」の「useStateを使ってみる（失敗例）」で説明されています。結論として、コンポーネントの外部にデータを持つ必要があります。
Promiseが「完了する」という表現を「解決する」に変更
「Suspense 対応のデータソース」の見出しを追加
課題12-2を追加。課題内容は、課題12-1をSuspenseとuseを使って書き直すこと。
- 解答例をcodepenを使って作成し、React研修課題解答例 - 2023に追加。

13章その他のHooks関数

useRefで宣言した値を画面表示で使ってはいけないという注意書きを追加
軽微な修正

14章描画パフォーマンスの最適化

React.memoの説明をuseCallbackとuseMemoの説明と同じ形式になるように修正
useCallbackの見出しを追加 (11章から移動)
- 公式Document useCallbackを参考にして、最低限の文法のみ説明。
「React.memo と useCallback を使ったパフォーマンス改善例」の見出しを追加
- サンプルコードも追加。レンダーが重いコンポーネントをmemo化し、その重いコンポーネントのpropsの関数をuseCallbackでメモ化して、パフォーマンスを改善している。
useMemoの見出しを追加
- もともとuseMemoは取り上げられていなかったが、React.memoとuseCallbackを取り上げるならuseMemoも取り上げるのが自然だと思ったため。
- 公式Document useMemoを参考にして、最低限の文法のみ説明。
- useMemoを使った改善のサンプルコードを追加
「React Compiler」の見出しを追加
「依存配列に設定するのは「リアクティブ」な値」の見出しを追加
- 「useEffect、useCallback、useMemoの第2引数は、第1引数の関数が依存する値を設定する」というのが正確性に欠ける説明であるため、補足説明。
- 11章で「関数コンポーネントのスコープ外で定義された関数はメモ化不要」という説明よりも、「関数コンポーネントのスコープ外で定義された関数はリアクティブでない」のほうがよいと思った。

why_need_react

Nextjsの説明を修正
- PagesRouterに限らずAppRouterにも当てはまる説明のため、「PagesRouter」という文言を削除。

その他

新しく作った課題12-2でReact19のuseが使う必要があったため、exerciseのReactのバージョンを19に更新。それに伴い、storybookのバージョンも更新。

aTomohiroIto · 2024-12-25T10:35:08Z

react/docs/content/toc/02_element_render.md


 計算が終わると、リアル DOM は実際に変更されたものだけが更新されます。

+// "実際に変更されたもの"という文言が少し気になるので


「算出した、『実際に変更のある部分』のみ、リアル DOM を更新します。」

という表現はどうでしょう。

aTomohiroIto · 2024-12-25T11:07:42Z

react/docs/content/toc/07_lifecycle.md

+// 「コンポーネント内のDOM要素の参照を取得する」は誤解を与えるため避けたいです。React公式Docには、「useRef は、レンダー時には不要な値を参照するための React フックです。」と書かれており、「レンダー時には不要な値を参照する」としたいです。
 | `useImperativeHandle` | **親** コンポーネント内のDOM要素の参照を取得する |
 | `useDebugValue` | React DevTools でカスタムフックのラベルを表示する |
+// useSyncExternalStoreやuseTransitionなど、React18,19で追加されたHooksを追加するか考えたいです。個人的には、初学者をターゲットとしているので追加しなくても良いかなと思いました。追加しないのであれば、使用頻度が低いuseImperativeHandleとuseDebugValueは削除して良いのかなと思いました。


初学者向けに内容を小さくまとめるなら、useCallback、useMemo も同様に外して良いのでは、と思いました。
いずれ自動最適化が働くことを見込んでいます。

useCallback, useMemo は実案件での使用頻度が高いので残した方が良いです。
useImperativeHandle や useDebugValue は僕は見たこと無いので削除して良いでしょう。
新しい hooks についてはどっちでも良いと思います。講師次第ですが、口頭で紹介するくらいがちょうどいいのかも？

useCallback, useMemoに関しては同じ理由で自分も残したいです。

SekiT · 2024-12-26T02:16:05Z

react/docs/content/toc/08_state.md

 一方、`state`は、コンポーネント自身が持つ情報で、かつ、書き換えができます。
+// レンダリング中は書き換えは出来ないですし、書き換えるにしてもmutableな変更は出来ないので、「書き換えができます」とは書きたくないです。

 関数型言語では、**純粋関数** と **不純関数** という用語があります。


（今回のPRのスコープ外ですが）「不純関数」ではなく「非純粋関数」ですね。

SekiT · 2024-12-26T02:36:47Z

react/docs/content/toc/08_state.md

+// stateは副作用ですが、immutableなので、ある意味「引数のようなもの」と考えることもできます。
+公式Docの[純粋性が重要である理由](https://ja.react.dev/reference/rules/components-and-hooks-must-be-pure#why-does-purity-matter) には、「コンポーネントの入力とは props と state とコンテクスト。フックの入力とはその引数。」ともあります。
+stateを副作用の代表として取り上げたくないです。


state を引数として解釈すれば確かにそうなりますが、「拡大解釈し過ぎでは？」とも思います。

普通に解釈すると、関数の引数である props のみが引数であり、引数が同じであれば結果が同じ（参照透過性）というのが純粋であるための必要条件なので、propsが同じでもstateが変わると返り値が変わるというのは純粋ではないです。

あまりこういったおかしな解釈を広めたくないという思いはありますが、Reactの公式ドキュメントと矛盾するのも良くないですね。純粋云々の記述自体削除してしまったほうが良いと思います。

そうですね

まるまる消してしまってもよいと思いますし、「useStateは副作用か」という見出しを作って、一般的な純粋関数の定義に沿った説明と、公式ドキュメントの説明を両方載せてもよいのかなと思いました。

ボリュームの関係で削除することにしました。

SekiT · 2024-12-26T02:39:20Z

react/docs/content/toc/08_state.md

+stateは、レンダリング間で値を保持したいもの、かつ、値が書き変わったときに際レンダリングしたい値を保持するもの
+refは、レンダリング間で値を保持したいもの、かつ、値が書き変わったときに際レンダリングしたくない値を保持するもの
+
+と説明したいです。


良い説明だと思います。

react/docs/content/toc/07_lifecycle.md

aDaisukeHirano · 2025-01-16T06:44:11Z

web_frontend定例で、webfrontend_specialistチーム全員をレビュアーにすることにしました。

お忙しいところ恐縮ですが、お時間ある方、レビューをよろしくお願いします。

aTomohiroIto · 2025-01-16T08:39:32Z

react/docs/content/toc/03_components_props.md

 基本的には、下記の命名規則を使うことになります。

 - コンポーネント名は、「**upper camel case**」（e.g. CamelCase）
+// 命名規則ではなくて、守らなければならないReactのルールということを書いておきたいです。[関数を定義する](https://ja.react.dev/learn/your-first-component#step-2-define-the-function)


規則を解説する章なので、規則であり必ず守る、と明示する立場をとりたいです。
開発案件のコーディングルール、原則的な命名規則、Reactのコンパイル仕様、について、いずれも守らなければ（それぞれ別種の）トラブルになるので、その序列は重要でないという考えです。

例文 :

開発案件はコーディングルールがあらかじめ決められているので、そのルールに従います。

Reactでは下記の命名規則を使います。

コンポーネント名は、「upper camel case」（e.g. CamelCase） ※落とし穴
...

判断に迷うときは、JS/TSの慣習に従ってください。

はい、補足説明の形で「落とし穴」のリンクを記載する形にしますね。

aDaisukeHirano · 2025-03-24T11:07:25Z

修正が完了したため、再度レビュー依頼をしました。
よろしくお願いします。

react/docs/content/toc/06_list_key.md

react/docs/content/toc/11_object_is.md

SekiT · 2025-03-25T02:05:17Z

react/docs/content/toc/11_object_is.md


 > const f2 = f0
 > Object.is(f0, f2)
 true


(optional) Object.is(NaN, NaN) の例があったほうが === との違いがわかって良いと思いますが、あまり細かいところに踏み込まないつもりであればこのままでも構いません。

面白い内容だと思ったのですが、この章で学んでほしいことではないと思ったので、取り入れないことにしました。

講義で余裕があったら話題に出してみようと思います。

react/docs/content/toc/11_object_is.md

react/docs/content/toc/14_performance.md

react/docs/content/toc/01_learning_jsx.md

aYumaIto · 2025-03-31T03:00:25Z

react/docs/content/toc/08_useState.png

08_multi_state.svg も透過されているので背景を白にしておいてください。

また、できれば画像の雰囲気を他のものと揃えたいですが、それは optional で良いです。

そもそも、この図がなくても十分複数のstateが扱えることがわかるので、削除した方がよいと思いました。
伊藤くんはどう思いますか？

もし差し替えるなら、こんな感じにしようと思っています。

代替案まで書いてくれてありがとうございます。
はい、なくても伝わるので削除して構わないと思います。

削除しました。

4403291

SekiT

僕からはOKです。

aFumihiroSaito

ご対応頂きありがとうございます。
コメント部分の対応はお任せ致します。

aFumihiroSaito · 2025-04-03T05:00:44Z

react/docs/content/toc/01_learning_jsx.md

- 任意の赤色の物の名前, 緑色の物の名前, 青色の物の名前を TSX 内に追加
-  - それぞれが赤色, 青色, 緑色となるようにスタイルを指定
+- 任意の赤色の物の名前、緑色の物の名前、青色の物の名前を JSX 内に追加
+  - それぞれが赤色、緑色、 青色となるようにスタイルを指定


Suggested change

- それぞれが赤色、緑色、青色となるようにスタイルを指定

- それぞれが赤色、緑色、青色となるようにスタイルを指定

format

こちらで修正しました。

aFumihiroSaito · 2025-04-03T05:36:27Z

react/docs/content/toc/07_lifecycle.md


-![Hooks Lifecycle](./07_hooks_lifecycle.svg)
+ここで紹介したもの以外にもさまざまな Hooks が用意されており、 React 19 では全部で17個存在します。
+なかでも利用頻度の高い API は、 `useState`、`useEffect`、`useReducer`、`useCallback` の4つです。


[Optional]
useEffect は極力使わないように、という点を考慮すると、利用頻度の高い対象から外しても良いかもですね。

他のhooksに比べると使用頻度が高いので、残すことにします。

「極力使わないようにする」というのは、「誤った使い方をしない」という意味で解釈しています。

aFumihiroSaito · 2025-04-03T05:43:02Z

react/docs/content/toc/14_performance.md

+
+# React.memo と useCallback を使ったパフォーマンス改善例
+
+レンダー中に重い計算をしている`Button` コンポーネントの再レンダリング回数を最小限にすることを目標とします。


Suggested change

レンダー中に重い計算をしている`Button` コンポーネントの再レンダリング回数を最小限にすることを目標とします。

レンダー中に重い計算をしている `Button` コンポーネントの再レンダリング回数を最小限にすることを目標とします。

format

こちらで修正しました。

aFumihiroSaito · 2025-04-03T05:44:53Z

react/exercise/C01/Q1/index.tsx

-//  * それぞれが赤色, 青色, 緑色となるようにスタイルを指定
-//  * 並びや位置関係、厳密に物の色が正しいかどうかは不問
+// * 任意の赤色の物の名前、緑色の物の名前、青色の物の名前を JSX 内に追加
+//   * それぞれが赤色、緑色、 青色となるようにスタイルを指定


Suggested change

// * それぞれが赤色、緑色、青色となるようにスタイルを指定

// * それぞれが赤色、緑色、青色となるようにスタイルを指定

format

こちらで修正しました。

aDaisukeHirano · 2025-04-04T01:25:59Z

たくさんのレビューありがとうございます。

マージします。

コメントを追加

b25b8b9

aDaisukeHirano force-pushed the hirano-comment branch from c0cbe13 to b25b8b9 Compare December 25, 2024 10:28

aTomohiroIto reviewed Dec 25, 2024

View reviewed changes

SekiT reviewed Dec 26, 2024

View reviewed changes

aDaisukeHirano commented Dec 27, 2024

View reviewed changes

react/docs/content/toc/07_lifecycle.md Outdated Show resolved Hide resolved

再描画というワードに関する修正

2c92870

aTomohiroIto reviewed Jan 16, 2025

View reviewed changes

aDaisukeHirano requested review from SekiT, aDaikiWatanabe, aFumihiroSaito, aTomohiroIto and aYumaIto March 24, 2025 10:46

背景が透過していない画像に差し替え

340f1c3

SekiT reviewed Mar 25, 2025

View reviewed changes

react/docs/content/toc/06_list_key.md Show resolved Hide resolved

SekiT reviewed Mar 25, 2025

View reviewed changes

react/docs/content/toc/11_object_is.md Outdated Show resolved Hide resolved

SekiT reviewed Mar 25, 2025

View reviewed changes

react/docs/content/toc/11_object_is.md Outdated Show resolved Hide resolved

SekiT reviewed Mar 25, 2025

View reviewed changes

react/docs/content/toc/14_performance.md Outdated Show resolved Hide resolved

aDaisukeHirano added 3 commits March 25, 2025 19:03

keyをnumberからstringに変換しないようにする

be77cbe

format

583ed92

リアクティブな値の説明文の改善

a195976

aDaisukeHirano requested a review from SekiT March 25, 2025 11:23

SekiT reviewed Mar 26, 2025

View reviewed changes

react/docs/content/toc/01_learning_jsx.md Outdated Show resolved Hide resolved

aYumaIto reviewed Mar 31, 2025

View reviewed changes

課題C01/Q1の文言を修正

3b882b3

aDaisukeHirano requested review from SekiT and aYumaIto March 31, 2025 10:54

08_multi_state.svgを削除

4403291

aYumaIto approved these changes Apr 3, 2025

View reviewed changes

SekiT approved these changes Apr 3, 2025

View reviewed changes

aFumihiroSaito approved these changes Apr 3, 2025

View reviewed changes

aDaisukeHirano added 2 commits April 3, 2025 18:36

format

0dcfc1d

format

b6604a9

aDaisukeHirano merged commit a120c2d into master Apr 4, 2025

aDaisukeHirano mentioned this pull request May 18, 2025

EX2のstorybookの記載形式をCSF2.0からCSF3.0に変更 #90

Merged


		計算が終わると、リアル DOM は実際に変更されたものだけが更新されます。

		// "実際に変更されたもの"という文言が少し気になるので

	- それぞれが赤色、緑色、青色となるようにスタイルを指定
	- それぞれが赤色、緑色、青色となるようにスタイルを指定


		# React.memo と useCallback を使ったパフォーマンス改善例

		レンダー中に重い計算をしている`Button` コンポーネントの再レンダリング回数を最小限にすることを目標とします。

	レンダー中に重い計算をしている`Button` コンポーネントの再レンダリング回数を最小限にすることを目標とします。
	レンダー中に重い計算をしている `Button` コンポーネントの再レンダリング回数を最小限にすることを目標とします。

	// * それぞれが赤色、緑色、青色となるようにスタイルを指定
	// * それぞれが赤色、緑色、青色となるようにスタイルを指定

React研修資料修正 #73

React研修資料修正 #73

Uh oh!

Conversation

aDaisukeHirano commented Dec 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

更新内容

注意事項

変更内容のまとめ (2025/03/24 追記)

1章 TSXを学ぶ

2章 要素のレンダー

3章 コンポーネントとprops

4章 イベント処理

5章

6章 リストとkey

7章 Reactのライフサイクル

8章 state

9章 state の更新ロジックを抽出する

10章 Hooksのルール

11章 値の同一性を理解する

12章 副作用を実行する

13章 その他のHooks関数

14章 描画パフォーマンスの最適化

why_need_react

その他

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aTomohiroIto Dec 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

aDaisukeHirano commented Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aTomohiroIto Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

例文 :

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aDaisukeHirano commented Mar 24, 2025

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SekiT left a comment

Choose a reason for hiding this comment

Uh oh!

aFumihiroSaito left a comment

aDaisukeHirano commented Dec 25, 2024 •

edited

Loading

2章要素のレンダー

3章コンポーネントとprops

4章イベント処理

6章リストとkey

11章値の同一性を理解する

12章副作用を実行する

13章その他のHooks関数

14章描画パフォーマンスの最適化

aTomohiroIto Dec 25, 2024 •

edited

Loading

aDaisukeHirano commented Jan 16, 2025 •

edited

Loading

aTomohiroIto Jan 16, 2025 •

edited

Loading