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.6k
Reactは何を提供するLibraryなのか?
taro
July 02, 2022
Tweet
Share
More Decks by taro
See All by taro
VitestのIn-Source Testingが便利
taro28
10
3k
ローコードサービスの進化のためのモノレポ移行
taro28
2
480
ローコードSaaSのUXを向上させるためのTypeScript
taro28
2
1.1k
GraphQLをServer Componentsで使いたい
taro28
8
3.1k
Sequenceを理解する
taro28
1
280
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
12
4.8k
状態ってなに?🙃
taro28
2
560
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
7.2k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.5k
Other Decks in Programming
See All in Programming
Cache Me If You Can
ryunen344
2
1.4k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
280
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
860
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
1.7k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
160
AIでLINEスタンプを作ってみた
eycjur
1
230
Testing Trophyは叫ばない
toms74209200
0
880
Featured
See All Featured
Docker and Python
trallard
45
3.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
A Tale of Four Properties
chriscoyier
160
23k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
GitHub's CSS Performance
jonrohan
1032
460k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
How GitHub (no longer) Works
holman
315
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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構築 感想 •
大切なことは全部公式ドキュメントに書いてある • 思想を知るのは普段使っている技術への理解が深まるし、楽しい
ありがとうございました!