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
   

   View Slide

2. @sawa-zen
   ॴଐɿגࣜձࣾ Topotal
   ৬छɿCDO
   • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲౰
   • UIσβΠϯ΍σβΠϯγεςϜ͕େ޷
   ෺
   @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 2
   

   View Slide

3. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 3
   

   View Slide

4. React Na(ve for Web
   ࢖ͬͯ·͔͢ʁ
   @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 4
   

   View Slide

5. ࢲ͸ΊͪΌͪ͘Ό࢖ͬͯ·͢
   @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 5
   

   View Slide

6. ਖ਼௚͋·Γฉ͔ͳ͍Ͱ͢ΑͶʁ
   @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 6
   

   View Slide

7. ༗໊Ͳ͜Ζ͕࢖ͬͯ͸͍Δ͕ࣄྫ͕গͳ͍
   Twi$er Uber Eats Orders
   @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 7
   

   View Slide

8. ͳͥ࢖ΘΕͳ͍ͷ͔ʁ
   @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 8
   

   View Slide

9. ∵ React Na(ve ͱ Web ͷ
   ίʔυڞ௨Խπʔϧͱޡղ͞Ε͍ͯΔͨΊ
   @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 9
   

   View Slide

10. ޡղ͔Βੜ·ΕΔωΨςΟϒͳҹ৅
    • ͏ͪ͸ΞϓϦҰຊ͔ͩΒͳ͊...
    • iOS ͱ Android ͷڞ௨Խ͚ͩͰ΋େมͳͷʹ...
    ∴ ݟ޲͖΋͞Εͳ͍
    !
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 10
    

    View Slide

11. ࢥ͍ग़ͯ͠ཉ͍͠
    ⛔
    Write once, run anywhere
    ✅
    Learn Once, Write Anywhere
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 11
    

    View Slide

12. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 12
    

    View Slide

13. web-only Ͱ΋ྑ͍ΜͰ͢ʂ
    ! !
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 13
    

    View Slide

14. Ͱ͸ݟํΛม͑ͯΈΔ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 14
    

    View Slide

15. React Na(ve for Web Λ
    ७ਮͳ Web ͷ UI ϥΠϒϥϦͱͯ͠
    ݟΔͱͲ͏͔ʁ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 15
    

    View Slide

16. Good points
    ϑϩϯτΤϯυࢹ఺Ͱݟͨྑ͔ͬͨ఺
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 16
    

    View Slide

17. Good points
    ① ϛχϚϧͰચ࿅͞Εͨઃܭ
    • View, Text Ͱ UI ΛߏஙͰ͖Δγϯϓϧ͞
    • div, span, pͳͲͰॻ͘ΑΓ΋௚ײత
    • ίϯϙʔωϯτ͕ҙঊΛ൐Θͳ͍
    • ಠࣗʹελΠϧΛ౰ͯΔ͔ଞͷϥΠϒϥϦʹ৐Δ͔બ΂Δ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 17
    

    View Slide

18. Good points
    ② ௚ײతͳ Accessibility ؔ࿈ͷهड़ܗࣜ
    • role Λઃఆ͢Ε͹ద੾ͳ DOM ʹม׵ͯ͘͠ΕΔ
    • View, Text ͰҰ୴ελΠϦϯά͚͔ͩͯ͠Β accessibility* prop
    Λޙ෇͚ͰରԠͰ͖Δ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 18
    

    View Slide

19. Good points
    ③ ॏෳͨ͠ CSS ͷ࠷దԽ
    • ҎԼͷ৚݅Λຬͨͨ͠ style ͷ CSS ͸࢖͍ճ͞ΕΔ
    1. StyleSheet.create Λ࢖ͬͯهड़͞Ε͍ͯΔ͜ͱ
    2. ಉ͡ͷ key ͱ value ͷϖΞ͕ଞͰ࢖ΘΕ͍ͯΔ͜ͱ
    • Tailwind ͱ͍ۙײ֮
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 19
    

    View Slide

20. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 20
    

    View Slide

21. Good points
    ④ style ͷ্ॻ͖ͷ͠΍͢͞
    • ഑ྻͰࢦఆͨ͠ޙऀ͕উͭͱ͍͏γϯϓϧ͞
    • className Ͱಉ༷ʹॻ͜͏ͱ͢ΔͱϥΠϒϥϦ͕ඞཁ
    • clsx
    • classnames
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 21
    

    View Slide

22. ফ໣ points
    ϑϩϯτΤϯυࢹ఺ͰݟͨΊΜͲ͏ͩͬͨ఺
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 22
    

    View Slide

23. ফ໣ points
    ① media query ͕ RN ʹແ͍
    • react-responsive ͳͲΛ࢖͑͹͍ۙ͜ͱ͸Ͱ͖Δ
    • SSR ΍ SSG ͷॳճඳըͰ͸ը໘෯͕Θ͔Βͳ͍
    • ϥΠϯλΠϜ࣌ʹॲཧ͞ΕϨΠΞ΢τγϑτ͕ى͜Δ
    • LP ΍ ίʔϙϨʔταΠτʹ͸޲͍͍ͯͳ͍
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 23
    

    View Slide

24. ফ໣ points
    ② ٙࣅΫϥε͕ RN ʹແ͍
    • CSS ͷ :hover, :focus ͳͲ͕࢖͑ͳ͍
    • ϒϥ΢β͸Ϛ΢εૢ࡞ɺΩʔϘʔυૢ࡞͕લఏͳͷͰΫϦςΟ
    Χϧ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 24
    

    View Slide

25. ফ໣ points
    ② ͷղܾࡦ: ϋϯυϥΛ࢖͏
    • ࣮͸ RN for Web ͕ಠࣗϋϯυϥΛ௥Ճͯ͘͠Ε͍ͯΔ
    • onHoverIn, onHoverOut
    • onFocus, onBlur
    • ͨͩܕʹ͸ແ͍ͷͰ֦ு͢Δඞཁ͋Γ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 25
    

    View Slide

26. @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 26
    

    View Slide

27. ফ໣ points
    ③ position: fixed; ͕ RN ʹແ͍
    • ܕΤϥʔʹͳΔ
    • any ΍ as Ͱಀ͛ͨ͘ͳΔ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 27
    

    View Slide

28. ফ໣ points
    ③ ͷղܾࡦ1: ઃܭΛݟ௚͢
    ͜Εʹૺ۰ͨ͠৔߹͸ҎԼͷ֬ೝΛͨ͠ํ͕ྑͦ͞͏
    1. absolute ͡ΌͩΊͳͷ͔?
    2. Modal ίϯϙʔωϯτͰղܾ͠ͳ͍͔?
    3. ReactDOM ͷ portal Λղܾ͠ͳ͍͔?
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 28
    

    View Slide

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
    

    View Slide

30. ফ໣ points
    ④ linear-gradient ͕ RN ʹແ͍
    • ҰൠతʹݟΔҎԼॻ͖ํΛͯ͠΋൓ө͞Εͳ͍
    • background: 'linear-gradient(#00F, #F00)'
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 30
    

    View Slide

31. ফ໣ points
    ④ ͷղܾࡦ: backgroundImage Λ࢖͏
    • linear-gradient() ͸ͦ΋ͦ΋ը૾σʔλܕΒ͍͠
    • url() ͱಉ༷
    backgroundImage: 'linear-gradient(#00F, #F00)'
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 31
    

    View Slide

32. etc...
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 32
    

    View Slide

33. ফ໣ points ͸ࠓޙղফ͞ΕΔ͔΋
    • React GUIͷొ৔Ͱঢ়گ͕มΘΓͦ͏
    • ফ໣ point ͸΄΅ղܾ͞Εͦ͏งғؾ
    • RN ʹ࢓༷͕౷߹͞ΕΔ or React GUI ͕ಠཱͯ͠ϦϦʔε͞
    ΕΔະདྷ͕͍͔ͭ͘Δ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 33
    

    View Slide

34. RN ͱͷڞ௨ԽͷͨΊͷ෍ੴ
    React GUI ΁ͷ෍ੴ
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 34
    

    View Slide

35. ·ͱΊ
    • React Na(ve for Web ͸ web-only Ͱ΋ OK
    • Web ༻ UI ϥΠϒϥϦͱͯ͠༏लͰ͋Δ
    • ଟগͷফ໣͸൐͏͕ͳΜͱ͔ͳΓͦ͏
    • React GUI ʹظ଴
    "
    @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 35
    

    View Slide