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
390
React Sketch.appでデザインガイドラインを作ってみた
sawa_zen
7
2.3k
Birthday Driven Development
sawa_zen
0
520
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
A better future with KSS
kneath
238
17k
Unsuck your backbone
ammeep
669
57k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
RailsConf 2023
tenderlove
29
1k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Docker and Python
trallard
44
3.3k
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