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

Slide 1

Slide 1 text

Reactは何を提供する Libraryなのか？ﾌﾛﾝﾄｴﾝﾄﾞｴﾝｼﾞﾆｱLT * ﾋﾞｱﾊﾞｯｼｭ 2022.07.02(土)

Slide 2

Slide 2 text

自己紹介 ● taro( @taroro_tarotaro) ● SHELFYで建設SaaSを作ってる(1年半くらい🐥) ● React, SpringBoot, Django ● 社外LT初挑戦🙂

Slide 3

Slide 3 text

はじめに今までノリで使ってきたReactを基礎から学び直しています！

Slide 4

Slide 4 text

はじめに今までノリで使ってきたReactを基礎から学び直しています！ってことで、今回は改めて「Reactは何を提供するLibraryなのか？」を話そうかと思います！（つよつよエンジニアの方にとっては、全ての既知の内容かもしれません󰢙）

Slide 5

Slide 5 text

Reactの構造

Slide 6

Slide 6 text

Reactの構造 ● Reactはモノレポ

Slide 7

Slide 7 text

Reactの構造 ● Reactはモノレポここに色んなパッケージが入ってる！

Slide 8

Slide 8 text

Reactの構造 ● Reactはモノレポ

Slide 9

Slide 9 text

Reactの構造 ● Reactはモノレポ ● 重要なのはざっくり3つ

Slide 10

Slide 10 text

Reactの構造 ● Reactはモノレポ ● 重要なのはざっくり3つ ○ Core

Slide 11

Slide 11 text

Core Component定義に必要なAPIを提供 ● React.Component ● FC ● ReactNode ● Hooks

Slide 12

Slide 12 text

Reactの構造 ● Reactはモノレポ ● 重要なのはざっくり3つ ○ Core ○ Renderer

Slide 13

Slide 13 text

Renderer Component Treeをプラットフォーム固有のHostに変換 ● React DOM Renderer ○ DOMに変換 ● React Native Renderer ○ NativeのViewに変換 ※Host: 各プラットフォームごとの描画する対象(DOM, Native View)

Slide 14

Slide 14 text

Reactの構造 ● Reactはモノレポ ● 重要なのはざっくり3つ ○ Core ○ Renderer ○ Reconciler (リコンサイラー)

Slide 15

Slide 15 text

Reconciler 仮想DOMの管理・差分検出 ● Renderer内から呼び出される ● React Element TreeをJSのオブジェクトで保持 ● 差分検出して、Rendererに再描画する対象を伝える ● React Fiberが登場するのはここ

Slide 16

Slide 16 text

Reconciler 仮想DOMの管理・差分検出 ● Renderer内から呼び出される ● React Element TreeをJSのオブジェクトで保持 ● 差分検出して、Rendererに再描画する対象を伝える ● React Fiberが登場するのはここ(V16~) ちなみにReconcilerは直訳すると「調停者、平和をもたらす者」差分を検出して同期するところからこの名前がついた…？

Slide 17

Slide 17 text

Reactの構造 ● Core ○ Component定義に必要なAPI ● Renderer ○ Component Treeをプラットフォーム固有のHostに変換 ● Reconciler ○ 仮想DOMの管理・差分検出

Slide 18

Slide 18 text

Reactの構造 ● Core→各Rendererで共通 ○ Component定義に必要なAPI ● Renderer ○ Component Treeをプラットフォーム固有のHostに変換 ● Reconciler→各Rendererで共通 ○ 仮想DOMの管理・差分検出

Slide 19

Slide 19 text

Reactの構造

Slide 20

Slide 20 text

Reactの構造 Renderer(プラットフォーム)が違っても、 CoreとReconcilerは共通！

Slide 21

Slide 21 text

Reactの構造 →他にもRendererが作れそう！

Slide 22

Slide 22 text

色んな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.

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Reactの構造 ● Core→各Rendererで共通 ○ Component定義に必要なAPI ● Renderer ○ Component Treeをプラットフォーム固有のHostに変換 ● Reconciler→各Rendererで共通 ○ 仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている

Slide 25

Slide 25 text

Reactが提供するもの ● Core→各Rendererで共通 ○ Component定義に必要なAPI ● Renderer ○ Component Treeをプラットフォーム固有のHostに変換 ● Reconciler→各Rendererで共通 ○ 仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている →共通して使うのはCoreとReconcilerの2つ

Slide 26

Slide 26 text

Reactが提供するもの ● Core→各Rendererで共通 ○ Component定義に必要なAPI ● Renderer ○ Component Treeをプラットフォーム固有のHostに変換 ● Reconciler→各Rendererで共通 ○ 仮想DOMの管理・差分検出【仮想DOM】宣言的UIの構築におけるパフォーマンスの問題を解決するための技術

Slide 27

Slide 27 text

Reactが提供するもの ● Core→各Rendererで共通 ○ Component定義に必要なAPI ● Renderer ○ Component Treeをプラットフォーム固有のHostに変換 ● Reconciler→各Rendererで共通 ○ （宣言的UIを構築するための）仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている →共通して使うのはCoreとReconcilerの2つ →Reactが提供するのはComponentベースな宣言的UIの構築のみ（プラットフォームには依存しない）

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Reactが提供するもの https://ja.reactjs.org/docs/design-principles.html#beyond-the-dom

Slide 30

Slide 30 text

Reactが提供するもの https://reactjs.org/blog/2013/06/05/why-react.html

Slide 31

Slide 31 text

Reactは何を提供するLibraryなのか？ ● Componentベース ● 宣言的 ● プラットフォーム共通の方法でのUIの構築を提供するLibrary

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Reactが提供するもの https://ja.reactjs.org/

Slide 34

Slide 34 text

ソフトウェア開発における Reactの役割

Slide 35

Slide 35 text

ソフトウェア開発における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)

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか？

Slide 38

Slide 38 text

ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか？ →どんなUIを提供するかは開発者が決める

Slide 39

Slide 39 text

ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか？ →どんなUIを提供するかは開発者が決める →Reactはそれをどうやって実現するか（構築するか）の責任を持つ https://ja.reactjs.org/blog/2022/03/29/react-v18.html

Slide 40

Slide 40 text

ソフトウェア開発におけるReactの役割

Slide 41

Slide 41 text

ソフトウェア開発におけるReactの役割 UIはユーザーがシステムを操作する窓口的なもの

Slide 42

Slide 42 text

ソフトウェア開発におけるReactの役割 ● Why: 何のためのUIか？ ● What: どんなUIか？ ● How: どうやってUIを作るか？

Slide 43

Slide 43 text

ソフトウェア開発におけるReactの役割 ● Why: 何のためのUIか？→開発者 ● What: どんなUIか？→開発者 ● How: どうやってUIを作るか？→React

Slide 44

Slide 44 text

ソフトウェア開発におけるReactの役割 ● Why: 何のためのUIか？→開発者 ● What: どんなUIか？→開発者 ● How: どうやってUIを作るか？→React 宣言的に、 Componentベースで、プラットフォーム共通な方法で、高いUXのUIを作れる

Slide 45

Slide 45 text

さいごに

Slide 46

Slide 46 text

これから Reactが提供したいもの

Slide 47

Slide 47 text

※個人的解釈が強いかも

Slide 48

Slide 48 text

スケジューリングされた高いUXのUI構築

Slide 49

Slide 49 text

スケジューリングされた高いUXのUI構築 https://ja.reactjs.org/docs/design-principles.html

Slide 50

Slide 50 text

スケジューリングされた高いUXのUI構築鍵はReact Fiber Reconciler(V16~ from 2017.09)

Slide 51

Slide 51 text

スケジューリングされた高いUXのUI構築鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に！ ● 優先度順に割り込み可 ● 中断可 ● 不要になった処理は破棄

Slide 52

Slide 52 text

スケジューリングされた高いUXのUI構築鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に！ ● 優先度順に割り込み可 ● 中断可 ● 不要になった処理は破棄レンダリング中でも、ユーザーの入力を優先して反映するなどが可能に！

Slide 53

Slide 53 text

スケジューリングされた高いUXのUI構築鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に！ ● 優先度順に割り込み可 ● 中断可 ● 不要になった処理は破棄 ● Concurrent Rendering(V18) ● Automatic Batching(V18) ● Suspence(V18) ● Transition(V18) ● etc.

Slide 54

Slide 54 text

スケジューリングされた高いUXのUI構築 https://ja.reactjs.org/docs/design-principles.html

Slide 55

Slide 55 text

まとめ

Slide 56

Slide 56 text

まとめ ● ReactはComponentベースな宣言的UIの構築を提供するLibrary ● プラットフォームを超えて共通の方法でUIの構築ができる！ ● これから提供したいのは、Fiberによって実現したスケジューリングされた高いUXの UI構築感想 ● 大切なことは全部公式ドキュメントに書いてある ● 思想を知るのは普段使っている技術への理解が深まるし、楽しい

Slide 57

Slide 57 text

ありがとうございました！