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
Atomic Design の課題とその現実的解決策/Atomic Design
sawa_zen
2
820
デザインガイドラインを作るWebサービスを作っている話 / React Native Meetup 8
sawa_zen
1
410
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.4k
Birthday Driven Development
sawa_zen
0
530
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
We Have a Design System, Now What?
morganepeng
52
7.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Unsuck your backbone
ammeep
671
58k
Agile that works and the tools we love
rasmusluckow
329
21k
Done Done
chrislema
184
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Site-Speed That Sticks
csswizardry
7
590
A Tale of Four Properties
chriscoyier
159
23k
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