Expo WEB × Next.js は実用できるのか？

Transcript

1. Expo WEB × Next.js
   Expo WEB × Next.js
   ͸࣮༻Ͱ͖Δͷ͔ʁ
   write once, run anywhere
   

   View Slide

2. Satoshi Nitawaki
   Satoshi Nitawaki
   F a v o r i t e
   ɾNotion޷͖
   ɾPUBG / CODϞόΠϧ޷͖
   ɾि຤ʹݸਓΞϓϦ։ൃ͢Δͷ޷͖
   J o b
   ɾओྖҬ͸ΞϓϦʢReact Nativeʣ
   ɾ࠷ۙϚΠΫϩαʔϏε࡞ͬͨΓͯ͠·͢
   ※࠷ۙΞϓϦ͔Β཭Εͨ͜ͱ΍ͬͯΔͷͰ
   ௚ۙͷReact Nativeͷײ౓௿Ίɾɾɾ
   ςʔϚ͕࣌୅஗ΕͰͨ͠Β͢Έ·ͤΜɾɾɾ
   A b o u t
   F r o n t E n g i n e e r
   

   View Slide

3. ͖͔͚ͬ
   ͖͔͚ͬ
   

   View Slide

4. ক དྷ త ʹ Ξ ϓ Ϧ Λ ҙ ࣝ ͠ ͨ
   W E B α Π τ ࡞ Γ ͨ ͍
   ૬ ஊ ͞ Ε ͨ
   

   View Slide

5. ࠓ ͔ Β Ұ ਓ Ͱ
   W E B α Π τ Λ ࡞ Δ ͱ ͠ ͨ Β
   Կ ͕ ࠷ ڧ ͔ ͳ ʁ
   

   View Slide

6. R e a c t Ͱ ޮ ཰ = > N e x t . j s ʁ
   W E B α ʔ ό ͩ ͚ ͡ Ό ͳ ͘
   A P I ΋ N e x t . j s ্ Ͱ
   ߏ ங Ͱ ͖ Δ ͷ ͔
   

   View Slide

7. Ξ ϓ Ϧ Λ ҙ ࣝ ͠ ͨ
   W E B α Π τ ͔ ʔ
   

   View Slide

8. View Slide

9. ͦ ͏ ͍ ΍ E x p o ͬͯ
   W E B ର Ԡ ͠ ͯ ͨ Α Ͷ
   

   View Slide

10. E x p o W E B ͱ N e x t . j s ɾ ɾ ɾ
    

    View Slide

11. Expo WEB, Nex
    Expo WEB, Next.js
    E x p o W E B
    h t t p s : / / d o c s . e x p o . i o / g u i d e s / u s i n g - n e x t j s /
    ɾެࣜυΩϡϝϯτ͕ଘࡏͨ͠ʢϚδʁʣ
    ɾExperimentalʢ࣮ݧతʣͱͷ஫ҙॻ͖
    

    View Slide

12. Expo WEB, Nex
    Expo WEB, Next.js
    E x p o W E B
    ελʔτ·Ͱ͸ΊͪΌͪ͘Ό؆୯ʂ
    ͜Ε͚ͩʂ
    

    View Slide

13. Expo WEB, Nex
    Expo WEB, Next.js
    E x p o W E B
    jsͰηοτΞοϓ͞ΕΔͷͰ
    tsʹ͍ͨ͠ํ͸
    

    View Slide

14. View Slide

15. ڞ௨Խͷݒ೦
    ڞ௨Խͷݒ೦
    E x p o W E B
    E x p o W E B
    - Expo WEBͱNextjsͷߏங͸؆୯ʁ
    - ελΠϧͷӡ༻͸ʁ
    - ը໘ભҠ͸ڞ௨ͰߏஙͰ͖Δʁ
    - native module͸ָʹऔΓճͤΔʁ
    

    View Slide

16. M e d i a Q u e r y ͱ ͔
    Ͳ ͏ ͢ Μ ͷ ͔ ͳ
    

    View Slide

17. @expo/match-med
    @expo/match-media
    M e d i a Q u e r y
    ظ ଴ ߴ · Δ
    ɾ@expo/match-mediaΛinstall
    ɾimportͯ͠useMediaQueryΛ࢖༻͢Δ
    

    View Slide

18. D E M O
    

    View Slide

19. ͦ ͏ ͍ ΍
    ը ໘ ભ Ҡ ͬͯ ڞ ௨ Խ
    Ή Γ ͩ Α Ͷ ɾ ɾ ɾ
    

    View Slide

20. Expo WEB, Nex
    Expo WEB, Next.js
    E x p o W E B , N e x t . j s
    ͕ Μ ͹ ͬ ͯ Έ ͨ
    jsͰηοτΞοϓ͞ΕΔͷͰ
    tsʹ͍ͨ͠ํ͸
    

    View Slide

21. ϧʔςΟϯά
    ϧʔςΟϯά
    

    View Slide

22. expo-next-react-navigation
    expo-next-react-navigation
    ɾΞϓϦ͸react-nanavigationɺ

    ɹWEB͸next/routerΛ࢖༻͍ͯ͠·͢ɻ
    ɾreact-navigation͸ඪ४Ͱv4Λ࢖༻ɻ
    ※v5΋࢖༻Ͱ͖·͕͢v4ͷ΄͏͕͢ΜͳΓಈ͘ҹ
    ৅Ͱͨ͠ɻ
    ୳ ͤ ͹ ͋ Δ ΋ Μ ͩ
    I n s t a l l
    

    View Slide

23. expo-next-react-navigation
    expo-next-react-navigation
    ɾNextͷconfigΛมߋ͠·͢ɻ
    ୳ ͤ ͹ ͋ Δ ΋ Μ ͩ
    S e t u p
    E d i t n e x t . c o n f i g . j s
    

    View Slide

24. expo-next-react-navigation
    expo-next-react-navigation
    react-navigationͷrouteΛNext.js
    ͷσΟϨΫτϦ֊૚ͱಉҰʹ͢ΔͱrouteNameͷࢦఆΛڞ௨ԽͰ͖·͢
    ୳ ͤ ͹ ͋ Δ ΋ Μ ͩ
    

    View Slide

25. expo-next-react-navigation
    expo-next-react-navigation
    ఏڙ͞Ε͍ͯΔAPI͸͜Μͳײ͡Ͱ͢
    ୳ ͤ ͹ ͋ Δ ΋ Μ ͩ
    

    View Slide

26. D E M O
    

    View Slide

27. Native moduleपΓ
    Native moduleपΓ
    ɾ͢Έ·ͤΜɺௐ͖ࠪ͠Εͯͳ͍ͬ͢ɾɾɾɻ
    ɾnativeಈ࡞͚ͩΛmock͢Δ࢓૊ΈΛऔΓೖΕΔͷ͕ϕλʔͬΆ͍ɻ
    ɾExpoΛ࢖༻ͯ͠ΔͷͰɺwebରԠͯ͠ΔϥΠϒϥϦ΋๛෋ʹ͋Δʢͱ৴͍ͨ͡ʣʁ
    

    View Slide

28. ·ͱΊ
    ·ͱΊ
    E x p o W E B × N e x t . j s
    ɾExpo WEBͱNext.jsͷηοτΞοϓ͸؆୯ɻެࣜαϙʔτʢ࣮ݧతʣ
    ɾMedia Query͸ϥΠϒϥϦ͋Δ
    ɾϧʔςΟϯά΋ϥΠϒϥϦ͋Δ
    ʢɾnative module͸ͪΐͬͱݒ೦͋Δ͔΋ɾɾɾʁʣ
    ΞϓϦϑΥʔΧεͷWEBαΠτʹ͸બ୒ࢶͱͯ͠े෼͋Γɻ
    ӡ༻ίετ΋ࢥ͍ͬͯͨΑΓ΋ܰͦ͏ɻ
    ࢼݧಋೖͯ͠Կ͔͋Ε͹ଛ੾Γ͢ΔલఏͷಋೖΛ͍͖͍ͯͨ͠ɻ
    

    View Slide

29. ͦͷଞͷϧʔςΟϯά
    ͦͷଞͷϧʔςΟϯάํ๏
    W R I T E S O M E T H I N G
    ex: react-navigation only൛
    github.com/EvanBacon/Instagram ΑΓ
    ͓ · ͚
    

    View Slide

30. ύϑΥʔϚϯε
    ύϑΥʔϚϯε
    Ҿ༻ɿNicolas Gallagher - Twitter Lite, React Native, and Progressive Web Apps
    https://www.youtube.com/watch?reload=9&v=tFFn39lLO-U&feature=youtu.be
    W R I T E S O M E T H I N G
    ̎೥લͷಈըΛഈݟͨ͠ͷͰ
    ൺֱର৅͕ݹ͍Ͱ͕͢
    css performance΋ߴධՁ
    ͓ · ͚
    

    View Slide

31. ͜Μͳ͜ͱ΍ͬͯ·͢
    ͜Μͳ͜ͱ΍ͬͯ·͢
    ͓ · ͚
    

    View Slide

32. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide