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
Web オンリーのプロダクトでも React Native for Web は輝く/react...
Search
sawa-zen
October 02, 2021
5
1.6k
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
React Native Matsuri 2021 で登壇した資料です
https://reactnative-matsuri.com/ja
sawa-zen
October 02, 2021
Tweet
Share
More Decks by sawa-zen
See All by sawa-zen
Atomic Design の課題とその現実的解決策/Atomic Design
sawa_zen
2
810
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
380
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.3k
Birthday Driven Development
sawa_zen
0
510
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Cult of Friendly URLs
andyhume
78
6.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A better future with KSS
kneath
238
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Automating Front-end Workflow
addyosmani
1368
200k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How GitHub (no longer) Works
holman
314
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Adopting Sorbet at Scale
ufuk
74
9.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Transcript
WebΦϯϦʔͷϓϩμΫτͰ React Na*ve for Web ً͘ גࣜձࣾ Topotal CDO @sawa-zen
@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 1
@sawa-zen ॴଐɿגࣜձࣾ Topotal ৬छɿCDO • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲ • UIσβΠϯσβΠϯγεςϜ͕େ @sawa-zen
(2021/10/2) React Na4ve Matsuri 2021 2
@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 3
React Na(ve for Web ͬͯ·͔͢ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri
2021 4
ࢲΊͪΌͪ͘Όͬͯ·͢ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 5
ਖ਼͋·Γฉ͔ͳ͍Ͱ͢ΑͶʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 6
༗໊Ͳ͜Ζ͕͍ͬͯΔ͕ࣄྫ͕গͳ͍ Twi$er Uber Eats Orders @sawa-zen (2021/10/2) React Na4ve Matsuri
2021 7
ͳͥΘΕͳ͍ͷ͔ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 8
∵ React Na(ve ͱ Web ͷ ίʔυڞ௨Խπʔϧͱޡղ͞Ε͍ͯΔͨΊ @sawa-zen (2021/10/2) React
Na4ve Matsuri 2021 9
ޡղ͔Βੜ·ΕΔωΨςΟϒͳҹ • ͏ͪΞϓϦҰຊ͔ͩΒͳ͊... • iOS ͱ Android ͷڞ௨Խ͚ͩͰେมͳͷʹ... ∴ ݟ͖͞Εͳ͍
! @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 10
ࢥ͍ग़ͯ͠ཉ͍͠ ⛔ Write once, run anywhere ✅ Learn Once, Write
Anywhere @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 11
@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 12
web-only Ͱྑ͍ΜͰ͢ʂ ! ! @sawa-zen (2021/10/2) React Na4ve Matsuri 2021
13
ͰݟํΛม͑ͯΈΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 14
React Na(ve for Web Λ ७ਮͳ Web ͷ UI ϥΠϒϥϦͱͯ͠
ݟΔͱͲ͏͔ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 15
Good points ϑϩϯτΤϯυࢹͰݟͨྑ͔ͬͨ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 16
Good points ① ϛχϚϧͰચ࿅͞Εͨઃܭ • View, Text Ͱ UI ΛߏஙͰ͖Δγϯϓϧ͞
• div, span, pͳͲͰॻ͘ΑΓײత • ίϯϙʔωϯτ͕ҙঊΛΘͳ͍ • ಠࣗʹελΠϧΛͯΔ͔ଞͷϥΠϒϥϦʹΔ͔બΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 17
Good points ② ײతͳ Accessibility ؔ࿈ͷهड़ܗࣜ • role Λઃఆ͢Εదͳ DOM
ʹมͯ͘͠ΕΔ • View, Text ͰҰ୴ελΠϦϯά͚͔ͩͯ͠Β accessibility* prop Λޙ͚ͰରԠͰ͖Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 18
Good points ③ ॏෳͨ͠ CSS ͷ࠷దԽ • ҎԼͷ݅Λຬͨͨ͠ style ͷ
CSS ͍ճ͞ΕΔ 1. StyleSheet.create Λͬͯهड़͞Ε͍ͯΔ͜ͱ 2. ಉ͡ͷ key ͱ value ͷϖΞ͕ଞͰΘΕ͍ͯΔ͜ͱ • Tailwind ͱ͍ۙײ֮ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 19
@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 20
Good points ④ style ͷ্ॻ͖ͷ͢͠͞ • ྻͰࢦఆͨ͠ޙऀ͕উͭͱ͍͏γϯϓϧ͞ • className Ͱಉ༷ʹॻ͜͏ͱ͢ΔͱϥΠϒϥϦ͕ඞཁ
• clsx • classnames @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 21
ফ points ϑϩϯτΤϯυࢹͰݟͨΊΜͲ͏ͩͬͨ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 22
ফ points ① media query ͕ RN ʹແ͍ • react-responsive
ͳͲΛ͍͑ۙ͜ͱͰ͖Δ • SSR SSG ͷॳճඳըͰը໘෯͕Θ͔Βͳ͍ • ϥΠϯλΠϜ࣌ʹॲཧ͞ΕϨΠΞτγϑτ͕ى͜Δ • LP ίʔϙϨʔταΠτʹ͍͍ͯͳ͍ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 23
ফ points ② ٙࣅΫϥε͕ RN ʹແ͍ • CSS ͷ :hover,
:focus ͳͲ͕͑ͳ͍ • ϒϥβϚεૢ࡞ɺΩʔϘʔυૢ࡞͕લఏͳͷͰΫϦςΟ Χϧ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 24
ফ points ② ͷղܾࡦ: ϋϯυϥΛ͏ • ࣮ RN for Web
͕ಠࣗϋϯυϥΛՃͯ͘͠Ε͍ͯΔ • onHoverIn, onHoverOut • onFocus, onBlur • ͨͩܕʹແ͍ͷͰ֦ு͢Δඞཁ͋Γ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 25
@sawa-zen (2021/10/2) React Na4ve Matsuri 2021 26
ফ points ③ position: fixed; ͕ RN ʹແ͍ • ܕΤϥʔʹͳΔ
• any as Ͱಀ͛ͨ͘ͳΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 27
ফ points ③ ͷղܾࡦ1: ઃܭΛݟ͢ ͜Εʹૺ۰ͨ͠߹ҎԼͷ֬ೝΛͨ͠ํ͕ྑͦ͞͏ 1. absolute ͡ΌͩΊͳͷ͔? 2.
Modal ίϯϙʔωϯτͰղܾ͠ͳ͍͔? 3. ReactDOM ͷ portal Λղܾ͠ͳ͍͔? @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 28
ফ points ③ ͷղܾࡦ2: ܕͷΦʔόʔϥΠυ import 'react-native' declare module 'react-native'
{ interface ViewStyle { position: 'relative' | 'absolute' | 'fixed' } } @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 29
ফ points ④ linear-gradient ͕ RN ʹແ͍ • ҰൠతʹݟΔҎԼॻ͖ํΛͯ͠ө͞Εͳ͍ •
background: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 30
ফ points ④ ͷղܾࡦ: backgroundImage Λ͏ • linear-gradient() ͦͦը૾σʔλܕΒ͍͠ •
url() ͱಉ༷ backgroundImage: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 31
etc... @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 32
ফ points ࠓޙղফ͞ΕΔ͔ • React GUIͷొͰঢ়گ͕มΘΓͦ͏ • ফ point ΄΅ղܾ͞Εͦ͏งғؾ
• RN ʹ༷͕౷߹͞ΕΔ or React GUI ͕ಠཱͯ͠ϦϦʔε͞ ΕΔະདྷ͕͍͔ͭ͘Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 33
RN ͱͷڞ௨ԽͷͨΊͷੴ React GUI ͷੴ @sawa-zen (2021/10/2) React Na4ve Matsuri
2021 34
·ͱΊ • React Na(ve for Web web-only Ͱ OK
• Web ༻ UI ϥΠϒϥϦͱͯ͠༏लͰ͋Δ • ଟগͷফ͏͕ͳΜͱ͔ͳΓͦ͏ • React GUI ʹظ " @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 35