Reactの公式Doc「react.dev」 を読んでの要点まとめ

2023/09/13 に社内の勉強会で発表した資料です
最後の「スクラップ」の部分には時間の都合で省略したものが含まれています。

発表にあたってメモしていた内容
→ https://zenn.dev/uenishi_com/scraps/0e1c677875613f

Transcript

1. Reactの公式Doc「react.dev」 を読んでの要点まとめ
2. Reactの新しいDocが 2023 3/17に正式リリースされました 日本語訳もかなり進んでいるようで、ほとんどの部分は日本語で読むことができます。 URL → https://ja.react.dev/ 2
3. Learn Reactの部分を読んでみたので、 読んでの気づきや知ったことをいろいろ 語っていこうかと思います。 3
4. 1. 2. 3. 4. おしながき 根本的な思想とか useState, useRefについて useEffectは基本的に使わない RSC (React Server Component) とは
5. 1. 根本的な思想とか Reactは「純粋関数」の概念に基づいて 設計されている。 5 「純粋関数」とは、同じ入力が与えられた場合、同じ結果を返す関数 1 + 1 は必ず 2 が返るし、計算式が同じである限りずっと 2 が返る。
6. 6 参照 : UIの記述 / コンポーネントを純粋に保つ
7. 7 参照 : UIの記述 / コンポーネントを純粋に保つ let guest = 0; function Cup() { // Bad: changing a preexisting variable! guest = guest + 1; return <h2>Tea cup for guest #{guest}</h2>; } export default function TeaSet() { return ( <> <Cup /> <Cup /> <Cup /> </> ); } 例えば、左のようなコードの場合 普通にCupコンポーネントを呼び出しているだけなのに 結果が以下のようにそれぞれで変わります
8. 8 この「純粋じゃないコンポーネント」を検出するために、 Reactでは Strict Modeという機能が提供されている。 StrictModeは純粋ではない関数を検出するためのもの。 開発環境でのみレンダリングが2回走る = 2回のレンダリングで別々の出力がされる関数を炙り出す。 useEffectなどの「副作用」は最後の手段。 コンポーネントは可能な限りとにかく純粋関数で！ と結構口酸っぱく記述されている。
9. 1. 根本的な思想とか JSX = Reactってこと？ 9 答えは「No」 - JSXはJavaScriptの拡張 (言語の拡張、正式名称は JavaScript Syntax Extention) - ReactはJavaScriptのライブラリ つまり、Reactを使わないまま、JSXだけで使うことも可能
10. 10 JSX記法はなんで親のタグで囲むのか <> <h1>Hedy Lamarr's Todos</h1> <img src="https://i.imgur.com/yXOvdOSs.j pg" alt="Hedy Lamarr" class="photo" > <ul> ... </ul> </> React書き始めたら最初にハマるポイント 厳密にはReactのエラーではなく、JSXのエラー Returnの中身は1つのタグにラップされている状態で なければいけない 理由としては、内部でプレーンな JavaScriptオブジェクトに変 換されているため。 複数のオブジェクトを関数の戻り値として返したい場合、配列 にラップするなどして返すのと同じ。 ひとつの親要素 = ひとつの戻り値
11. 2. useState, useRefについて state = 変数？ 11 答えは「No」 ・通常の変数は関数が終了したら消えてしまう ・stateはその特定のレンダリングに対する「スナップショット」である
12. 12 具体的にいうと？ import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3</button> </> ) } ボタンをクリックしたら値がいくつ増えるでしょう？
13. 13 具体的にいうと？ import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3</button> </> ) } 正解は「1増えるだけ」 これは書き換えると、以下のような形になる <button onClick={() => { setNumber(0 + 1); setNumber(0 + 1); setNumber(0 + 1); }}>+3</button> setNumberが実行され、stateの中身が変わらなければ numberはずっと0のまま
14. 14 State (のオブジェクト) を書き換えることは、実際は可能 でもそれだけではレンダリングが実行されない ので、画面表示は何も変わらない Set関数を使うことで、次のレンダリングの「スナップショット」を作成する stateとして格納する全てのJavaScriptオブジェクトは読み取り専用として扱う必要があるともいえる 以下のようなコードで、stateのオブジェクトは技術的に変更することができるが、やるべきではない どうしても必要な場合、Immerというライブラリを使用することで書き換える。Proxyという特殊なタイプのオブジェクト が作成され、何を行なったのかを「記録」してくれる
15. 2. useState, useRefについて useRefってどんな時に使う？ 15 「避難ハッチ」という項目にある。頻繁に必要としない想定 ・currentという単一のプロパティを持つプレーンなJavaScriptオブジェクト ・stateと違い、refのcurrentを書き換えても再レンダリングはトリガーされない ・宣言的であるReactで手続き的にDOM操作を行いたい場合に用いられる
16. 16 refの使い方アンチパターン import { useState, useRef } from 'react'; export default function Counter() { const [show, setShow] = useState(true); const ref = useRef(null); return ( <div> <button onClick={() => { setShow(!show); }}> Toggle with setState </button> <button onClick={() => { ref.current.remove(); }}> Remove from the DOM </button> {show && <p ref={ref}>Hello world</p>} </div> ); } 左のコードでは、refを使ってDOMを直接操作（削除） しています。 「Remove from the DOM」ボタンを押すと、下の Hello Worldの表示は消えてしまいます。 この状態で、「Toggle with setState」ボタンを押すと どうなる？
17. 17 Crash！ Reactが管理するDOMノードは、refから直接変更しない 変更する場合はフォーカスやスクロールなどの「非破壊的なアクション」にとどめる
18. 3. useEffectは基本的に使わない 例えば、以下のようなコード 18
19. 19 絶対こう書いた方がシンプルですね 既存のpropsやstateから計算できるものは、stateに入れずレンダリング中に計算する。 Propsが変更された際にstateをリセットしたい、一部のstateを調整したい、といったシーンでも、 基本的にはuseEffectを使用せずレンダー中の計算を念頭におくとシンプルになる。
20. 4. RSC (React Server Component) とは 最近のReactについて 20 - RSC (React Server Component) という概念の登場 - RSCの世界観ではReactのコンポーネントはデフォルトでサーバーサイドでレンダリングされます - つまりこれまでのuseStateやらuseEffectやらは使えません - もちろん完全に使えなくなるわけではなく、従来通りのクライアントサイドコンポーネントとして扱いたい場合は、 モジュールに対して ’use client’ という記述をします - コンポーネントが直接dbにデータを取りに行く、ようなことも可能（今までReact触ってきた人から見ると結構衝 撃） - コンポーネントをサーバーサイドでレンダリングすることで、どんなメリットがあるの？ - クライアントでのJavaScriptのバンドルサイズが減る = パフォーマンスの向上 = UXの向上 - バンドルとは変換のこと。ReactやNext.js, TypeScriptなどは最終的にJavaScriptになる。このバン ドルされたJavaScriptが大きくなるとページロードなどの時間が長くなる。
21. 4. RSC (React Server Component) とは 最近のReactについて 21 これまでReactでアプリケーション開発をする時は、データアクセスの方法やデータをどこに保存するのかを決めるこ とが悩みのタネになっていた。 → 大量にあるサードパーティーライブラリを要件に沿って最適なものを選択しなければいけない このデータのアクセス・管理周りをReactで標準化する React Server Componentが成熟した先には、かなり面白い世界観になっていそう 変化が早すぎてついていくのはかなり大変。世の中のスーパーエンジニア等の記事を読んだり、公式追っかけて日々 知識を入れていかないといけない。
22. Thanks! 22
24. 以下スクラップ 24 調査足りてないものもあるので参考までに …
25. 25 useEffectが2回実行される？ Docより、以下のように依存配列が”[]”の場合 useEffect内の関数が2度実行されている例が記載されています。 ※ 依存配列 = useEffectの第2引数の配列。[] の場合は画面に初めて表示される時のみ、実行される
26. 26 Reactの開発用機能（React18以降） ・前述したStrictModeに新規追加された機能。初回レンダリング時に1度コンポーネントのマウントとアンマウントを行 う ・この挙動は開発モード時のみ。本番用にビルドしたものは影響がない ・クリーンアップ関数がちゃんと実装されているか？ ということを確認するために追加されている ※ マウントとは？ コンポーネント (DOMノードが作成) され、DOMに出力されるプロセス
27. 4. その他「へぇ〜」となったこと コンポーネントがコンポーネントをネストする 27 ・明確に「定義をネストしないでください」と書かれていた ・現場でちょいちょい見て「これええんか？」となってたのでスッキリ ・全てのコンポーネントはトップレベルで定義するのが吉のよう
28. 4. その他「へぇ〜」となったこと オブジェクトは実際にはネストされない 28 ・ネストされているように見えるオブジェクトは、実際にはいろんなオブジェクトの集合体 ・実態はプロパティでお互いを「参照」している
29. 4. RSC (React Server Component) とは 最近のReactについて 29 - RSC (React Server Component) という概念の登場 - RSCの世界観ではReactのコンポーネントはデフォルトでサーバーサイドでレンダリングされます - つまりこれまでのuseStateやらuseEffectやらは使えません - もちろん完全に使えなくなるわけではなく、従来通りのクライアントサイドコンポーネントとして扱いたい場合は、 モジュールに対して ’use client’ という記述をします - コンポーネントが直接dbにデータを取りに行く、ようなことも可能（今までReact触ってきた人から見ると結構衝 撃） - コンポーネントをサーバーサイドでレンダリングすることで、どんなメリットがあるの？ - JavaScriptのバンドルサイズが減る = パフォーマンスの向上 = UXの向上 - たとえばブログのコードブロックはいろんな言語に合わせてシンタックスハイライトを行うので、JSのバン ドルサイズは大きくなりがち - RSCを使えばJSのバンドルサイズは (その分) ゼロになる！（Brightというパッケージが出ているよう）
30. メモ RSC 30
31. メモ RSC 31
32. メモ RSC 32
33. メモ RSC 33