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

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