Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web

React Native Matsuri 2021 で登壇した資料です
https://reactnative-matsuri.com/ja

Transcript

1. WebΦϯϦʔͷϓϩμΫτͰ΋ React Na*ve for Web ͸ً͘ גࣜձࣾ Topotal CDO @sawa-zen @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 1
2. @sawa-zen ॴଐɿגࣜձࣾ Topotal ৬छɿCDO • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲౰ • UIσβΠϯ΍σβΠϯγεςϜ͕େ޷ ෺ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 2
3. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 3
4. React Na(ve for Web ࢖ͬͯ·͔͢ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 4
5. ࢲ͸ΊͪΌͪ͘Ό࢖ͬͯ·͢ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 5
6. ਖ਼௚͋·Γฉ͔ͳ͍Ͱ͢ΑͶʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 6
7. ༗໊Ͳ͜Ζ͕࢖ͬͯ͸͍Δ͕ࣄྫ͕গͳ͍ Twi$er Uber Eats Orders @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 7
8. ͳͥ࢖ΘΕͳ͍ͷ͔ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 8
9. ∵ React Na(ve ͱ Web ͷ ίʔυڞ௨Խπʔϧͱޡղ͞Ε͍ͯΔͨΊ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 9
10. ޡղ͔Βੜ·ΕΔωΨςΟϒͳҹ৅ • ͏ͪ͸ΞϓϦҰຊ͔ͩΒͳ͊... • iOS ͱ Android ͷڞ௨Խ͚ͩͰ΋େมͳͷʹ... ∴ ݟ޲͖΋͞Εͳ͍ ! @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 10
11. ࢥ͍ग़ͯ͠ཉ͍͠ ⛔ Write once, run anywhere ✅ Learn Once, Write Anywhere @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 11
12. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 12
13. web-only Ͱ΋ྑ͍ΜͰ͢ʂ ! ! @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 13
14. Ͱ͸ݟํΛม͑ͯΈΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 14
15. React Na(ve for Web Λ ७ਮͳ Web ͷ UI ϥΠϒϥϦͱͯ͠ ݟΔͱͲ͏͔ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 15
16. Good points ϑϩϯτΤϯυࢹ఺Ͱݟͨྑ͔ͬͨ఺ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 16
17. Good points ① ϛχϚϧͰચ࿅͞Εͨઃܭ • View, Text Ͱ UI ΛߏஙͰ͖Δγϯϓϧ͞ • div, span, pͳͲͰॻ͘ΑΓ΋௚ײత • ίϯϙʔωϯτ͕ҙঊΛ൐Θͳ͍ • ಠࣗʹελΠϧΛ౰ͯΔ͔ଞͷϥΠϒϥϦʹ৐Δ͔બ΂Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 17
18. Good points ② ௚ײతͳ Accessibility ؔ࿈ͷهड़ܗࣜ • role Λઃఆ͢Ε͹ద੾ͳ DOM ʹม׵ͯ͘͠ΕΔ • View, Text ͰҰ୴ελΠϦϯά͚͔ͩͯ͠Β accessibility* prop Λޙ෇͚ͰରԠͰ͖Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 18
19. Good points ③ ॏෳͨ͠ CSS ͷ࠷దԽ • ҎԼͷ৚݅Λຬͨͨ͠ style ͷ CSS ͸࢖͍ճ͞ΕΔ 1. StyleSheet.create Λ࢖ͬͯهड़͞Ε͍ͯΔ͜ͱ 2. ಉ͡ͷ key ͱ value ͷϖΞ͕ଞͰ࢖ΘΕ͍ͯΔ͜ͱ • Tailwind ͱ͍ۙײ֮ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 19
20. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 20
21. Good points ④ style ͷ্ॻ͖ͷ͠΍͢͞ • ഑ྻͰࢦఆͨ͠ޙऀ͕উͭͱ͍͏γϯϓϧ͞ • className Ͱಉ༷ʹॻ͜͏ͱ͢ΔͱϥΠϒϥϦ͕ඞཁ • clsx • classnames @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 21
22. ফ໣ points ϑϩϯτΤϯυࢹ఺ͰݟͨΊΜͲ͏ͩͬͨ఺ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 22
23. ফ໣ points ① media query ͕ RN ʹແ͍ • react-responsive ͳͲΛ࢖͑͹͍ۙ͜ͱ͸Ͱ͖Δ • SSR ΍ SSG ͷॳճඳըͰ͸ը໘෯͕Θ͔Βͳ͍ • ϥΠϯλΠϜ࣌ʹॲཧ͞ΕϨΠΞ΢τγϑτ͕ى͜Δ • LP ΍ ίʔϙϨʔταΠτʹ͸޲͍͍ͯͳ͍ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 23
24. ফ໣ points ② ٙࣅΫϥε͕ RN ʹແ͍ • CSS ͷ :hover, :focus ͳͲ͕࢖͑ͳ͍ • ϒϥ΢β͸Ϛ΢εૢ࡞ɺΩʔϘʔυૢ࡞͕લఏͳͷͰΫϦςΟ Χϧ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 24
25. ফ໣ points ② ͷղܾࡦ: ϋϯυϥΛ࢖͏ • ࣮͸ RN for Web ͕ಠࣗϋϯυϥΛ௥Ճͯ͘͠Ε͍ͯΔ • onHoverIn, onHoverOut • onFocus, onBlur • ͨͩܕʹ͸ແ͍ͷͰ֦ு͢Δඞཁ͋Γ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 25
26. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 26
27. ফ໣ points ③ position: fixed; ͕ RN ʹແ͍ • ܕΤϥʔʹͳΔ • any ΍ as Ͱಀ͛ͨ͘ͳΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 27
28. ফ໣ points ③ ͷղܾࡦ1: ઃܭΛݟ௚͢ ͜Εʹૺ۰ͨ͠৔߹͸ҎԼͷ֬ೝΛͨ͠ํ͕ྑͦ͞͏ 1. absolute ͡ΌͩΊͳͷ͔? 2. Modal ίϯϙʔωϯτͰղܾ͠ͳ͍͔? 3. ReactDOM ͷ portal Λղܾ͠ͳ͍͔? @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 28
29. ফ໣ 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
30. ফ໣ points ④ linear-gradient ͕ RN ʹແ͍ • ҰൠతʹݟΔҎԼॻ͖ํΛͯ͠΋൓ө͞Εͳ͍ • background: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 30
31. ফ໣ points ④ ͷղܾࡦ: backgroundImage Λ࢖͏ • linear-gradient() ͸ͦ΋ͦ΋ը૾σʔλܕΒ͍͠ • url() ͱಉ༷ backgroundImage: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 31
32. etc... @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 32
33. ফ໣ points ͸ࠓޙղফ͞ΕΔ͔΋ • React GUIͷొ৔Ͱঢ়گ͕มΘΓͦ͏ • ফ໣ point ͸΄΅ղܾ͞Εͦ͏งғؾ • RN ʹ࢓༷͕౷߹͞ΕΔ or React GUI ͕ಠཱͯ͠ϦϦʔε͞ ΕΔະདྷ͕͍͔ͭ͘Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 33
34. RN ͱͷڞ௨ԽͷͨΊͷ෍ੴ React GUI ΁ͷ෍ੴ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 34
35. ·ͱΊ • React Na(ve for Web ͸ web-only Ͱ΋ OK • Web ༻ UI ϥΠϒϥϦͱͯ͠༏लͰ͋Δ • ଟগͷফ໣͸൐͏͕ͳΜͱ͔ͳΓͦ͏ • React GUI ʹظ଴ " @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 35