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
VitestのIn-Source Testingが便利
taro28
9
2.5k
ローコードサービスの進化のためのモノレポ移行
taro28
1
380
ローコードSaaSのUXを向上させるためのTypeScript
taro28
2
960
GraphQLをServer Componentsで使いたい
taro28
8
3k
Sequenceを理解する
taro28
1
250
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.6k
状態ってなに?🙃
taro28
2
540
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
7k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.5k
Other Decks in Programming
See All in Programming
Global Azure 2025 @ Kansai / Hyperlight
kosmosebi
0
160
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
150
知識0からカンファレンスやってみたらこうなった!
syossan27
5
290
The New Developer Workflow: How AI Transforms Ideas into Code
danielsogl
0
140
ComposeでのPicture in Picture
takathemax
0
140
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
5
1.2k
GitHub Copilot for Azureを使い倒したい
ymd65536
1
340
開発者フレンドリーで顧客も満足?Platformの秘密
algoartis
0
230
状態と共に暮らす:ステートフルへの挑戦
ypresto
3
1.3k
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
hayaokimura
5
1.2k
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
270
In geheimer Mission: AI Agents entwickeln
joergneumann
0
120
Featured
See All Featured
Music & Morning Musume
bryan
47
6.5k
Scaling GitHub
holman
459
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Practical Orchestrator
shlominoach
187
11k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Six Lessons from altMBA
skipperchong
28
3.8k
Building an army of robots
kneath
305
45k
Documentation Writing (for coders)
carmenintech
71
4.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
580
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
How to Ace a Technical Interview
jacobian
276
23k
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構築 感想 •
大切なことは全部公式ドキュメントに書いてある • 思想を知るのは普段使っている技術への理解が深まるし、楽しい
ありがとうございました!