Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
740
GraphQLをServer Componentsで使いたい
taro28
8
2.7k
Sequenceを理解する
taro28
1
220
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.2k
状態ってなに?🙃
taro28
2
490
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
6.6k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.4k
T-falってすごい【社内LT】
taro28
1
270
Other Decks in Programming
See All in Programming
Java 23の概要とJava Web Frameworkの現状 / Java 23 and Java web framework
kishida
2
380
型のインスタンス化は非常に深く、無限である可能性があります。
kimitashoichi
0
130
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
750
Arm移行タイムアタック
qnighy
0
410
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
260
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
650
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
6
6.9k
Vue.js_好きに捧ぐ Nuxt Hub で簡単に始めるCloudflare
xiombatsg
1
120
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
390
Symfony Mapper Component
soyuka
2
480
14 Years of iOS: Lessons and Key Points
seyfoyun
1
600
Leveling Up Developer Tooling for the Modern Rails & Hotwire Era @ Ruby Türkiye, November 2024
marcoroth
0
160
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
YesSQL, Process and Tooling at Scale
rocio
169
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.1k
For a Future-Friendly Web
brad_frost
175
9.4k
Practical Orchestrator
shlominoach
186
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Automating Front-end Workflow
addyosmani
1366
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
How GitHub (no longer) Works
holman
310
140k
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構築 感想 •
大切なことは全部公式ドキュメントに書いてある • 思想を知るのは普段使っている技術への理解が深まるし、楽しい
ありがとうございました!