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
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
610
GraphQLをServer Componentsで使いたい
taro28
8
2.7k
Sequenceを理解する
taro28
1
220
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.1k
状態ってなに?🙃
taro28
2
480
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
6.5k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.4k
T-falってすごい【社内LT】
taro28
1
270
Other Decks in Programming
See All in Programming
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
220
Click-free releases & the making of a CLI app
oheyadam
2
110
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
as(型アサーション)を書く前にできること
marokanatani
10
2.6k
CSC509 Lecture 09
javiergs
PRO
0
140
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
cmp.Or に感動した
otakakot
2
140
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Faster Mobile Websites
deanohume
305
30k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
BBQ
matthewcrist
85
9.3k
Teambox: Starting and Learning
jrom
133
8.8k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Happy Clients
brianwarren
98
6.7k
Docker and Python
trallard
40
3.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Being A Developer After 40
akosma
86
590k
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構築 感想 •
大切なことは全部公式ドキュメントに書いてある • 思想を知るのは普段使っている技術への理解が深まるし、楽しい
ありがとうございました!