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.7k
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
MCPを活用してVRChatと現実の境界を滑らかにする
sawa_zen
0
29
Atomic Design の課題とその現実的解決策/Atomic Design
sawa_zen
2
820
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
430
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.4k
Birthday Driven Development
sawa_zen
0
550
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Statistics for Hackers
jakevdp
799
220k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How GitHub (no longer) Works
holman
314
140k
Bash Introduction
62gerente
614
210k
Become a Pro
speakerdeck
PRO
29
5.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Docker and Python
trallard
45
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Faster Mobile Websites
deanohume
309
31k
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