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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Reactの構造
   

   View Slide

6. Reactの構造
   ● Reactはモノレポ
   

   View Slide

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

   View Slide

8. Reactの構造
   ● Reactはモノレポ
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Reactの構造
    

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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)
    

    View Slide

36. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. さいごに
    

    View Slide

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

    View Slide

47. ※個人的解釈が強いかも
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. まとめ
    

    View Slide

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

    View Slide

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

    View Slide