Reactを極めよう

Transcript

1. Reactを極めよう Github: @sor4chi 𝕏 Twitter: @monica18_pr
2. 今日の目標 Reactのコアな機能を理解して使いこなせるせるようになる Reactのパフォーマンスを意識したコーディングができるよ うになる
3. Reactの知識：初級編
4. Reactとは Facebookが開発したWebフレームワーク 仮想DOMを用いて、快適な開発体験や可読性を実現 コンポーネント指向の開発が可能 SSRやネイティブアプリへの派生も可能 JSXによるTypeScriptのネイティブサポート
5. Reactの派生
6. React Native (ネイティブアプリ開発) Next.js (SSR, SSG) Gatsby (SSG) Remix (SSR)
7. Reactのできること
8. 例えば というHTMLを作りたいとします。
9. Vanilla JSで書くと
10. Reactで書くと
11. JSX
12. JSXはJavaScriptの拡張構文で、Reactのコンポーネントを記 述する用途で利用されています。 JSXの機能自体はReactに依存していないため、他のフレーム ワークでも利用することができます。 JSXは言ってしまえば、ただの関数です。型で説明すると こんな感じです
13. 例えばCounterコンポーネントを呼び出す時、 と書きますが、
14. JSXはただの関数なので、これは と書いたのと同じです。 実態は「 関数 」ということを忘れないようにしましょう。
15. Component
16. コンポーネントとは、再利用可能なUIの部品 コンポーネントを組み合わせて、複雑なUIを作ることができ る
17. 例えば、こういうものを考えましょう
19. ネストが深く、可読性が悪いです。 そこで分割します。
20. こういうデータ配列を作っておいて
22. こういう風に分割します。 こうすればそれぞれの要素が共通化されて読みすくなります し、メンテナンスもしやすくなります。
23. Props
24. コンポーネントに渡すデータ コンポーネントの外側（呼び出し側）から子コンポーネント に渡すことができる
25. 先ほどのListItemコンポーネントは、 item という名前の Propsを受け取っています。
26. これはobjectの分割代入という構文を使っているので少し抵抗 があるかもしれませんが、これは
27. と書いたのと同じです。
28. 呼び出し側では このような形で変数を渡すことができますが、
29. これもただの関数ということを覚えていれば と書いたのと同じであることがわかると思います。
30. 結局Propsの実態はただの引数です。 ちなみにTypeScriptではPropsの型を定義することができま す。
32. Hooks
33. React 16で追加された機能 状態 を管理しやすくなる
34. 例えば、ボタンを押したか押していないか、テキストボックス に入力された文字列などの、 リロードなしでも変化するデータ を 状態 と呼びます。
35. 状態を管理するには、 useState というHooksを使います。
36. [ 状態, 状態を更新する関数] という形で useState は値 を返します。
37. 例えばカウンタが作りたいなら ボタンを押すとカウントが増えるようになります。
38. また、 useState は複数の状態を管理することもできます。
39. それぞれ、状態はそのコンポーネントのスコープ内で管理され ます。 そのため、それぞれの状態はサイト内で共有されず、他のコン ポーネントに影響を与えることはありません。
40. なので と書くと、それぞれのカウンタは独立して動作します。
41. useEffect
42. これは状態を監視して、状態が変化したときに何か処理をする ためのHooksです。
43. 変更監視
44. 例えば、カウンタの値が変化したときに、タイトルを変更した いとします。
45. このように書くと、タイトルはカウンタの値に連動して変化し ます。
46. useEffect は useEffect(() => { 何かしたい処理 }, [ 状態]) という形で書きます。 [ 状態] は 依存配列 と呼ばれ、ここに指定した状態が変化し たときに、 useEffect の中身が実行されます。 useEffect は、コンポーネントが描画されたとき + 依存配 列の状態が変化したときに実行されます。
47. マウント時のみ実行
48. コンポーネントが描画されたときに実行したい処理は、依存配 列を空にすることで実現できます。
49. このように書くと、コンポーネントが描画された最初の一回だ けConsoleに 呼ばれたよ と表示されます。 (正確にはReactStrictModeを使っていると、二回呼ばれます が、ビルド後だと一回です)
50. クリーンアップ
51. useEffect の中で、関数を返すことで、コンポーネントが アンマウントされたときに実行される処理を書くことができま す。 アンマウントは「コンポーネントが描画されている状態から、 描画されていない状態になること」を指します。
53. このように書くと、コンポーネントがアンマウントされたとき にConsoleに アンマウントされたよ と表示されます。
54. Reactの知識：中級編
55. エコシステム
56. バンドラ
57. Reactは、JavaScriptのコードをブラウザで実行できるよう に、JavaScriptのコードをブラウザで実行できるように、変換 する必要があります。 この変換を行うツールを バンドラ と呼びます。
58. バンドラは、JavaScriptのコードをブラウザで実行できるよう に変換するだけでなく、 ・複数のファイルを一つにまとめる ・最適化する ・コードを圧縮する などの機能を持っています。
59. Reactに対応しているバンドラは、 webpack と Vite , Parcel , Snowpack などがあります。 最近のフロント界隈ではもっぱら Vite が使われています が、数年前までは webpack が主流でした。 最近は未だNext.jsが内部バンドラとして webpack を使って いたりするので、完全なリプレイスとはならなさそうです。
60. スタイリングシステム
61. Reactには色々なスタイリングシステム(CSSの適応方法)があ ります。
62. CSS in JS CSS in JSは、JavaScriptのコードの中にCSSを書く方法で す。 Reactのコンポーネントの中にCSSを書くことができます。 パフォーマンスの観点からは、CSS in JSはあまり良くないと 言われていますが、その分スタイルをコンポーネントにコンポ ーズして提供できるため、柔軟性やメンテナンス性は高いで す。
63. 代表的なCSS in JSのライブラリには、 styled- components や emotion があります。
65. CSS Modules CSS Modulesは、CSSのクラス名をユニークなものに変換す ることで、CSSのクラス名の衝突を防ぐ方法です。
66. CSS Modulesは、 *.module.css という拡張子のファイル にCSSを書くことで、CSS Modulesを使うことができます。
67. 別moduleの同じクラスは別のものとして扱われるため、クラ ス名衝突を防ぐことができます。
68. Zero runtime CSS in JS Zero runtime CSS in JSは、CSS in JSの一種です。 しかし、 Zero runtime という名前の通り、バンドラのプラグ インとして提供され、ビルド時にCSSを抽出して生成し、静的 ファイルとして提供することから、CSS in JSのパフォーマン ス問題を解決しつつ、CSS in JSのような柔軟性を保っていま す。
69. Zero runtime CSS in JSの代表的なライブラリには、 linaria や stitches , Vanilla Extract などがあり ます。
71. Vanilla Extractはいいぞ
72. フレームワーク
73. Next.js
74. Next.jsは、ReactのSSR/SSGフレームワークです。 Vercel社が開発していて、Reactのコンポーネントをページと して扱うことができます。 Vercelのベンダーロックインがあるので、Vercel以外で使うの はあまりおすすめできません。 Vercelを運用していくと決まれば、ISRやApp Routerという超 モダンなフロントエンド開発を推進していけるので、汎用性よ りも最先端を追いたい人にはおすすめです。
75. Gatsby
76. Gatsbyは、ReactのSSGフレームワークです。 Reactのコンポーネントをページとして扱うことができます。 Next.jsと比べると、汎用性が高く、Vercel以外でも使うことが できます。 しかし、SSRはできないので、ドキュメントサイトやブログな ど、SSRが必要ない場合に使うことが多いです。
77. Remix
78. Remixは、ReactのSSRフレームワークです。 マルチランタイムが特徴でEdge上でのレンダリングをサポート していたり、モダンなフロントエンド開発を推進しているフレ ームワークです。 一方でキャッシュ機構がないため、SSGと比べるとパフォーマ ンスが劣ることが多いです。 そこら辺はうまくミドルウェアなどでカバーしていく必要があ ります。
79. データの取り扱い
80. Reactでは、データをコンポーネント間で共有する方法として Props と Context API が提供されています。
81. Propsは簡単な一方で、コンポーネントの階層が深くなると、 Propsを渡すのが大変になってしまいます。 そこで、ポータルのような、コンポーネントの階層を無視して 親要素から直接子要素以下にデータを渡す方法があれば便利で す。 その需要を満たすのが、Context APIです。
82. Context API
83. Context APIは、Reactのコンポーネントの階層を無視して、 親要素から直接子要素以下にデータを渡す方法です。 Context APIは、 createContext という関数を使って、コ ンテキストを作成します。 そして、 useContext というフックを使って、コンテキスト を参照します。
85. はい、完全にpropsは何も渡してないですが、 John と表示さ れます。 createContext の引数には、デフォルトの値を渡すことが できます。 これがないともし親が UserContext.Provider を使ってい なかった場合に対応できなくなります。 そして、 UserContext.Provider の value には、コンテ キストの値を渡します。 すると、 useContext でコンテキストの値を参照することが できます。
86. React Router
87. React Routerは、Reactに複数のページを持たせるためのライ ブラリです。 Reactは基本SPA(Single Page Application)なので、URLを複 数持つことができません。 そこで、JavaScriptを使って無理やりURLを変更して、SPAで も複数のページを持てるようにしています。 （これをちゃんと運用するには、SPA Fallbackという設定をす る必要があります。）
89. BrowserRouter は、React Routerのコンテキストを作成し ます。 Switch は、 Route の中から、一番最初にマッチしたもの だけを表示します。 Route は、 path にマッチした場合に、 children を表 示します。 こうすることで、擬似的に複数のページを持つことができまし た。
90. Custom Hooks
91. Reactでは、コンポーネントのロジックを再利用するために、 Custom Hooksという仕組みがあります。 複数の状態を持つフックなど、複雑な状態管理をコンポーネン トのように切り出して共通化・再利用することができます。 ページネーションを例に見てみましょう
93. こうやって状態 + それを操作する関数や付随する値を返す状態 のパッケージ化を行うことができます。 使う側では、 usePagination を呼び出して、返ってきた値 を使うだけです。
95. Reactの知識：上級編
96. パフォーマンス
97. リレンダリング
98. Reactでは、コンポーネントの状態が変更された場合に、その コンポーネントを再レンダリングします。 再レンダリングとは、コンポーネントの描画をやり直すことで す。 このとき、コンポーネントの再レンダリングは、そのコンポー ネントの子コンポーネントの再レンダリングを引き起こしま す。
99. リレンダリングの条件は、コンポーネントの状態が変更された 場合です。 つまり、 useState 等の内部状態変化、 useContext 等の 擬似的な内部状態変化、 props の変更です。
100. Memo化
101. Reactでは、コンポーネントの再レンダリングを防ぐために、 memo という関数が用意されています。
103. memo は、コンポーネントをラップして、そのコンポーネン トの props が変更された場合にのみ再レンダリングするよう にします。 memo がないと、親のコンポーネントが再レンダリングされ た場合に、子のコンポーネントも再レンダリングされてしまい ます。 高い位置にあるコンポーネントが再レンダリングされると、そ の下のコンポーネントも再レンダリングされるので、とても効 率が悪くなってしまうといったことが起こります。 それを防ぐために、 memo を使います。
104. useCallback
105. useCallback は、関数をメモ化するフックです。 useMemo と似ていますが、 useMemo は値をメモ化するの に対して、 useCallback は関数をメモ化します。 どういうときに使うかというと、 props に渡す関数をメモ化 したいときです。
107. useCallback を使わないと、 onClick が変更されるたび に、 MyComponent が再レンダリングされてしまいます。 onClick はコールバック化されていない状態ですと、 MyComponent が再レンダリングされるたびに、新しい関数 が生成されてしまうのですが、 useCallback を使うこと で、関数をメモ化することができます。 useEffect と同じようにメモ化の依存配列があります。
108. useMemo
109. useMemo は、値をメモ化するフックです。 ある状態の変化を検知して、その状態に応じて値を生成すると きに使います。
111. doubleCount は、 count の値に応じて変化するので、 count を依存配列に指定しています。 count が変更された場合に、 doubleCount が再計算され ます。
112. useReducer
113. useReducer は、 useState の代替として使えるフックで す。
115. こうやって、状態 + その操作をまとめて扱うことができます。 reducer と Context の組み合わせはかなり強力で、よく 利用されます。
116. Dynamic Import
117. Dynamic ImportはJS実行時に動的にモジュールを読み込むこ とができる機能です。 これをReactで使うと、コードスプリッティングを行うことが できます。 すぐには必要ないけど、後から必要になるようなコンポーネン トを、別のファイルに分けて、後からネットワーク経由で取得 するみたいな用途で使えます。
119. ご清聴ありがとうございました 質問などあれば気軽にどうぞ！