Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactは何を提供するLibraryなのか?
Search
taro
July 02, 2022
Programming
7
1.5k
Reactは何を提供するLibraryなのか?
taro
July 02, 2022
Tweet
Share
More Decks by taro
See All by taro
ローコードサービスの進化のためのモノレポ移行
taro28
1
360
ローコードSaaSのUXを向上させるためのTypeScript
taro28
2
930
GraphQLをServer Componentsで使いたい
taro28
8
2.9k
Sequenceを理解する
taro28
1
250
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.6k
状態ってなに?🙃
taro28
2
530
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
6.9k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.5k
T-falってすごい【社内LT】
taro28
1
290
Other Decks in Programming
See All in Programming
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
100
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
190
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
110
Ruby's Line Breaks
yui_knk
2
760
Java 24まとめ / Java 24 summary
kishida
3
500
Unlock the Potential of Swift Code Generation
rockname
0
250
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.7k
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
900
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
2.1k
国漢文混用体からHolloまで
minhee
1
180
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
750
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
150
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
76
9.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Agile that works and the tools we love
rasmusluckow
328
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Practical Orchestrator
shlominoach
186
10k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Facilitating Awesome Meetings
lara
54
6.3k
Rails Girls Zürich Keynote
gr2m
94
13k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Transcript
Reactは何を提供する Libraryなのか? フロントエンドエンジニアLT * ビアバッシュ 2022.07.02(土)
自己紹介 • taro( @taroro_tarotaro) • SHELFYで建設SaaSを作ってる(1年半くらい🐥) • React, SpringBoot, Django
• 社外LT初挑戦🙂
はじめに 今までノリで使ってきたReactを基礎から学び直しています!
はじめに 今までノリで使ってきたReactを基礎から学び直しています! ってことで、今回は改めて 「Reactは何を提供するLibraryなのか?」を話そうかと思います! (つよつよエンジニアの方にとっては、全ての既知の内容かもしれません)
Reactの構造
Reactの構造 • Reactはモノレポ
Reactの構造 • Reactはモノレポ ここに色んなパッケージが 入ってる!
Reactの構造 • Reactはモノレポ
Reactの構造 • Reactはモノレポ • 重要なのはざっくり3つ
Reactの構造 • Reactはモノレポ • 重要なのはざっくり3つ ◦ Core
Core Component定義に必要なAPIを提供 • React.Component • FC • ReactNode • Hooks
Reactの構造 • Reactはモノレポ • 重要なのはざっくり3つ ◦ Core ◦ Renderer
Renderer Component Treeをプラットフォーム固有のHostに変換 • React DOM Renderer ◦ DOMに変換 •
React Native Renderer ◦ NativeのViewに変換 ※Host: 各プラットフォームごとの描画する対象(DOM, Native View)
Reactの構造 • Reactはモノレポ • 重要なのはざっくり3つ ◦ Core ◦ Renderer ◦
Reconciler (リコンサイラー)
Reconciler 仮想DOMの管理・差分検出 • Renderer内から呼び出される • React Element TreeをJSのオブジェクトで保持 • 差分検出して、Rendererに再描画する対象を伝える
• React Fiberが登場するのはここ
Reconciler 仮想DOMの管理・差分検出 • Renderer内から呼び出される • React Element TreeをJSのオブジェクトで保持 • 差分検出して、Rendererに再描画する対象を伝える
• React Fiberが登場するのはここ(V16~) ちなみにReconcilerは直訳すると「調停者、平和をもたらす者」 差分を検出して同期するところからこの名前がついた…?
Reactの構造 • Core ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換
• Reconciler ◦ 仮想DOMの管理・差分検出
Reactの構造 • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換
• Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出
Reactの構造
Reactの構造 Renderer(プラットフォーム)が違っても、 CoreとReconcilerは共通!
Reactの構造 →他にもRendererが作れそう!
色んな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.
Reactの構造 • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換
• Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出
Reactの構造 • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換
• Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている
Reactが提供するもの • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換
• Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている →共通して使うのはCoreとReconcilerの2つ
Reactが提供するもの • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換
• Reconciler→各Rendererで共通 ◦ 仮想DOMの管理・差分検出 【仮想DOM】 宣言的UIの構築におけるパフォーマンスの問題を解決するための技術
Reactが提供するもの • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換
• Reconciler→各Rendererで共通 ◦ (宣言的UIを構築するための)仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている →共通して使うのはCoreとReconcilerの2つ →Reactが提供するのはComponentベースな宣言的UIの構築のみ (プラットフォームには依存しない)
Reactが提供するもの • Core→各Rendererで共通 ◦ Component定義に必要なAPI • Renderer ◦ Component Treeをプラットフォーム固有のHostに変換
• Reconciler→各Rendererで共通 ◦ (宣言的UIを構築するための)仮想DOMの管理・差分検出 →Rendererは各プラットフォームごとのLibraryとして切り出されている →共通して使うのはCoreとReconcilerの2つ →Reactが提供するのはComponentベースな宣言的UIの構築のみ (プラットフォームには依存しない)→僕の勝手な推測…?
Reactが提供するもの https://ja.reactjs.org/docs/design-principles.html#beyond-the-dom
Reactが提供するもの https://reactjs.org/blog/2013/06/05/why-react.html
Reactは何を提供するLibraryなのか? • Componentベース • 宣言的 • プラットフォーム共通の方法 でのUIの構築を提供するLibrary
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
Reactが提供するもの https://ja.reactjs.org/
ソフトウェア開発における Reactの役割
ソフトウェア開発における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)
None
ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか?
ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか? →どんなUIを提供するかは開発者が決める
ソフトウェア開発におけるReactの役割 ReactはComponentベースな宣言的UIの構築を提供するLibrary →なぜ「UI」ではなく「UIの構築」なのか? →どんなUIを提供するかは開発者が決める →Reactはそれをどうやって実現するか(構築するか)の責任を持つ https://ja.reactjs.org/blog/2022/03/29/react-v18.html
ソフトウェア開発におけるReactの役割
ソフトウェア開発におけるReactの役割 UIはユーザーがシステムを操作する窓口的なもの
ソフトウェア開発におけるReactの役割 • Why: 何のためのUIか? • What: どんなUIか? • How: どうやってUIを作るか?
ソフトウェア開発におけるReactの役割 • Why: 何のためのUIか?→開発者 • What: どんなUIか?→開発者 • How: どうやってUIを作るか?→React
ソフトウェア開発におけるReactの役割 • Why: 何のためのUIか?→開発者 • What: どんなUIか?→開発者 • How: どうやってUIを作るか?→React
宣言的に、 Componentベースで、 プラットフォーム共通な方法で、 高いUXのUIを作れる
さいごに
これから Reactが提供したいもの
※個人的解釈が強いかも
スケジューリングされた 高いUXのUI構築
スケジューリングされた高いUXのUI構築 https://ja.reactjs.org/docs/design-principles.html
スケジューリングされた高いUXのUI構築 鍵はReact Fiber Reconciler(V16~ from 2017.09)
スケジューリングされた高いUXのUI構築 鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に! • 優先度順に割り込み可
• 中断可 • 不要になった処理は破棄
スケジューリングされた高いUXのUI構築 鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に! • 優先度順に割り込み可
• 中断可 • 不要になった処理は破棄 レンダリング中でも、 ユーザーの入力を優先して反映す るなどが可能に!
スケジューリングされた高いUXのUI構築 鍵はReact Fiber Reconciler(V16~ from 2017.09) 同期的だった差分検出処理が、 Fiberという作業単位に分割され非同期処理が可能に! • 優先度順に割り込み可
• 中断可 • 不要になった処理は破棄 • Concurrent Rendering(V18) • Automatic Batching(V18) • Suspence(V18) • Transition(V18) • etc.
スケジューリングされた高いUXのUI構築 https://ja.reactjs.org/docs/design-principles.html
まとめ
まとめ • ReactはComponentベースな宣言的UIの構築を提供するLibrary • プラットフォームを超えて共通の方法でUIの構築ができる! • これから提供したいのは、Fiberによって実現したスケジューリングされた高いUXの UI構築 感想 •
大切なことは全部公式ドキュメントに書いてある • 思想を知るのは普段使っている技術への理解が深まるし、楽しい
ありがとうございました!