Reactは何を提供するLibraryなのか？

Transcript

1. Reactは何を提供する Libraryなのか？ ﾌﾛﾝﾄｴﾝﾄﾞｴﾝｼﾞﾆｱLT * ﾋﾞｱﾊﾞｯｼｭ 2022.07.02(土)
2. 自己紹介 • taro( @taroro_tarotaro) • SHELFYで建設SaaSを作ってる(1年半くらい🐥) • React, SpringBoot, Django • 社外LT初挑戦🙂
3. はじめに 今までノリで使ってきたReactを基礎から学び直しています！
4. はじめに 今までノリで使ってきたReactを基礎から学び直しています！ ってことで、今回は改めて 「Reactは何を提供するLibraryなのか？」を話そうかと思います！ （つよつよエンジニアの方にとっては、全ての既知の内容かもしれません󰢙）
5. Reactの構造
6. Reactの構造 • Reactはモノレポ
7. Reactの構造 • Reactはモノレポ ここに色んなパッケージが 入ってる！
8. Reactの構造 • Reactはモノレポ
9. Reactの構造 • Reactはモノレポ • 重要なのはざっくり3つ
10. Reactの構造 • Reactはモノレポ • 重要なのはざっくり3つ ◦ Core
11. Core Component定義に必要なAPIを提供 • React.Component • FC • ReactNode • Hooks
12. Reactの構造 • Reactはモノレポ • 重要なのはざっくり3つ ◦ Core ◦ Renderer
13. Renderer Component Treeをプラットフォーム固有のHostに変換 • React DOM Renderer ◦ DOMに変換 • React Native Renderer ◦ NativeのViewに変換 ※Host: 各プラットフォームごとの描画する対象(DOM, Native View)
14. Reactの構造 • Reactはモノレポ • 重要なのはざっくり3つ ◦ Core ◦ Renderer ◦ Reconciler (リコンサイラー)
15. Reconciler 仮想DOMの管理・差分検出 • Renderer内から呼び出される • React Element TreeをJSのオブジェクトで保持 • 差分検出して、Rendererに再描画する対象を伝える • React Fiberが登場するのはここ
16. Reconciler 仮想DOMの管理・差分検出 • Renderer内から呼び出される • React Element TreeをJSのオブジェクトで保持 • 差分検出して、Rendererに再描画する対象を伝える • React Fiberが登場するのはここ(V16~) ちなみにReconcilerは直訳すると「調停者、平和をもたらす者」 差分を検出して同期するところからこの名前がついた…？
17. Reactの構造 • Core ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換 • Reconciler ◦ 仮想DOMの管理・差分検出
18. Reactの構造 • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換 • Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出
19. Reactの構造
20. Reactの構造 Renderer(プラットフォーム)が違っても、 CoreとReconcilerは共通！
21. Reactの構造 →他にもRendererが作れそう！
22. 色んなCustom Renderer React公式が提供しているRenderer • react-dom: DOMに変換 • react-native: Native Viewに変換 • react-test-renderer: JSONに変換 • react-art: Vector画像に変換 独自で作られたRenderer • react-three-fiber: 3Dコンテンツに変換 • proton-native: Desktop App Viewに変換 • react-pdf: PDFファイルに変換 • etc.
23. Reactの構造 • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換 • Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出
24. Reactの構造 • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換 • Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている
25. Reactが提供するもの • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換 • Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている →共通して使うのはCoreとReconcilerの2つ
26. Reactが提供するもの • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換 • Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出 【仮想DOM】 宣言的UIの構築におけるパフォーマンスの問題を解決するための技術
27. Reactが提供するもの • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換 • Reconciler→各Rendererで共通 ◦ （宣言的UIを構築するための）仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている →共通して使うのはCoreとReconcilerの2つ →Reactが提供するのはComponentベースな宣言的UIの構築のみ （プラットフォームには依存しない）
28. Reactが提供するもの • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換 • Reconciler→各Rendererで共通 ◦ （宣言的UIを構築するための）仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている →共通して使うのはCoreとReconcilerの2つ →Reactが提供するのはComponentベースな宣言的UIの構築のみ （プラットフォームには依存しない）→僕の勝手な推測…？
29. Reactが提供するもの https://ja.reactjs.org/docs/design-principles.html#beyond-the-dom
30. Reactが提供するもの https://reactjs.org/blog/2013/06/05/why-react.html
31. Reactは何を提供するLibraryなのか？ • Componentベース • 宣言的 • プラットフォーム共通の方法 でのUIの構築を提供するLibrary
32. Reactは何を提供するLibraryなのか？ • Componentベース ◦ JSX • 宣言的 ◦ JSX ◦ Flux Architecture (2014.5) ◦ Functional Component (2015.10) ◦ Hooks (2019.02) ◦ Suspense (2022.03) • プラットフォーム共通の方法 ◦ React Native (2015.03) ◦ Web用のコードがreact-domに移動(2015.10) でのUIの構築を提供するLibrary
33. Reactが提供するもの https://ja.reactjs.org/
34. ソフトウェア開発における Reactの役割
35. ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary • Componentベース • 宣言的 ◦ JSX ◦ Flux Architecture (2014.5) ◦ Functional Component (2015.10) ◦ Hooks (2019.02) ◦ Suspense (2022.03) • プラットフォームで共通 ◦ React Native (2015.03)
37. ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか？
38. ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか？ →どんなUIを提供するかは開発者が決める
39. ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか？ →どんなUIを提供するかは開発者が決める →Reactはそれをどうやって実現するか（構築するか）の責任を持つ https://ja.reactjs.org/blog/2022/03/29/react-v18.html
40. ソフトウェア開発におけるReactの役割
41. ソフトウェア開発におけるReactの役割 UIはユーザーがシステムを操作する窓口的なもの
42. ソフトウェア開発におけるReactの役割 • Why: 何のためのUIか？ • What: どんなUIか？ • How: どうやってUIを作るか？
43. ソフトウェア開発におけるReactの役割 • Why: 何のためのUIか？→開発者 • What: どんなUIか？→開発者 • How: どうやってUIを作るか？→React
44. ソフトウェア開発におけるReactの役割 • Why: 何のためのUIか？→開発者 • What: どんなUIか？→開発者 • How: どうやってUIを作るか？→React 宣言的に、 Componentベースで、 プラットフォーム共通な方法で、 高いUXのUIを作れる
45. さいごに
46. これから Reactが提供したいもの
47. ※個人的解釈が強いかも
48. スケジューリングされた 高いUXのUI構築
49. スケジューリングされた高いUXのUI構築 https://ja.reactjs.org/docs/design-principles.html
50. スケジューリングされた高いUXのUI構築 鍵はReact Fiber Reconciler(V16~ from 2017.09)
51. スケジューリングされた高いUXのUI構築 鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に！ • 優先度順に割り込み可 • 中断可 • 不要になった処理は破棄
52. スケジューリングされた高いUXのUI構築 鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に！ • 優先度順に割り込み可 • 中断可 • 不要になった処理は破棄 レンダリング中でも、 ユーザーの入力を優先して反映す るなどが可能に！
53. スケジューリングされた高いUXのUI構築 鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に！ • 優先度順に割り込み可 • 中断可 • 不要になった処理は破棄 • Concurrent Rendering(V18) • Automatic Batching(V18) • Suspence(V18) • Transition(V18) • etc.
54. スケジューリングされた高いUXのUI構築 https://ja.reactjs.org/docs/design-principles.html
55. まとめ
56. まとめ • ReactはComponentベースな宣言的UIの構築を提供するLibrary • プラットフォームを超えて共通の方法でUIの構築ができる！ • これから提供したいのは、Fiberによって実現したスケジューリングされた高いUXの UI構築 感想 • 大切なことは全部公式ドキュメントに書いてある • 思想を知るのは普段使っている技術への理解が深まるし、楽しい
57. ありがとうございました！