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

Transcript

1. Expo WEB × Next.js Expo WEB × Next.js ͸࣮༻Ͱ͖Δͷ͔ʁ write once, run anywhere
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
3. ͖͔͚ͬ ͖͔͚ͬ
4. ক དྷ త ʹ Ξ ϓ Ϧ Λ ҙ ࣝ ͠ ͨ W E B α Π τ ࡞ Γ ͨ ͍ ૬ ஊ ͞ Ε ͨ
5. ࠓ ͔ Β Ұ ਓ Ͱ W E B α Π τ Λ ࡞ Δ ͱ ͠ ͨ Β Կ ͕ ࠷ ڧ ͔ ͳ ʁ
6. R e a c t Ͱ ޮ ཰ = > N e x t . j s ʁ W E B α ʔ ό ͩ ͚ ͡ Ό ͳ ͘ A P I ΋ N e x t . j s ্ Ͱ ߏ ங Ͱ ͖ Δ ͷ ͔
7. Ξ ϓ Ϧ Λ ҙ ࣝ ͠ ͨ W E B α Π τ ͔ ʔ
9. ͦ ͏ ͍ ΍ E x p o ͬͯ W E B ର Ԡ ͠ ͯ ͨ Α Ͷ
10. E x p o W E B ͱ N e x t . j s ɾ ɾ ɾ
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ʢ࣮ݧతʣͱͷ஫ҙॻ͖
12. Expo WEB, Nex Expo WEB, Next.js E x p o W E B ελʔτ·Ͱ͸ΊͪΌͪ͘Ό؆୯ʂ ͜Ε͚ͩʂ
13. Expo WEB, Nex Expo WEB, Next.js E x p o W E B jsͰηοτΞοϓ͞ΕΔͷͰ tsʹ͍ͨ͠ํ͸
15. ڞ௨Խͷݒ೦ ڞ௨Խͷݒ೦ E x p o W E B E x p o W E B - Expo WEBͱNextjsͷߏங͸؆୯ʁ - ελΠϧͷӡ༻͸ʁ - ը໘ભҠ͸ڞ௨ͰߏஙͰ͖Δʁ - native module͸ָʹऔΓճͤΔʁ
16. M e d i a Q u e r y ͱ ͔ Ͳ ͏ ͢ Μ ͷ ͔ ͳ
17. @expo/match-med @expo/match-media M e d i a Q u e r y ظ ଴ ߴ · Δ ɾ@expo/match-mediaΛinstall ɾimportͯ͠useMediaQueryΛ࢖༻͢Δ
18. D E M O
19. ͦ ͏ ͍ ΍ ը ໘ ભ Ҡ ͬͯ ڞ ௨ Խ Ή Γ ͩ Α Ͷ ɾ ɾ ɾ
20. Expo WEB, Nex Expo WEB, Next.js E x p o W E B , N e x t . j s ͕ Μ ͹ ͬ ͯ Έ ͨ jsͰηοτΞοϓ͞ΕΔͷͰ tsʹ͍ͨ͠ํ͸
21. ϧʔςΟϯά ϧʔςΟϯά
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
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
24. expo-next-react-navigation expo-next-react-navigation react-navigationͷrouteΛNext.js ͷσΟϨΫτϦ֊૚ͱಉҰʹ͢ΔͱrouteNameͷࢦఆΛڞ௨ԽͰ͖·͢ ୳ ͤ ͹ ͋ Δ ΋ Μ ͩ
25. expo-next-react-navigation expo-next-react-navigation ఏڙ͞Ε͍ͯΔAPI͸͜Μͳײ͡Ͱ͢ ୳ ͤ ͹ ͋ Δ ΋ Μ ͩ
26. D E M O
27. Native moduleपΓ Native moduleपΓ ɾ͢Έ·ͤΜɺௐ͖ࠪ͠Εͯͳ͍ͬ͢ɾɾɾɻ ɾnativeಈ࡞͚ͩΛmock͢Δ࢓૊ΈΛऔΓೖΕΔͷ͕ϕλʔͬΆ͍ɻ ɾExpoΛ࢖༻ͯ͠ΔͷͰɺwebରԠͯ͠ΔϥΠϒϥϦ΋๛෋ʹ͋Δʢͱ৴͍ͨ͡ʣʁ
28. ·ͱΊ ·ͱΊ E x p o W E B × N e x t . j s ɾExpo WEBͱNext.jsͷηοτΞοϓ͸؆୯ɻެࣜαϙʔτʢ࣮ݧతʣ ɾMedia Query͸ϥΠϒϥϦ͋Δ ɾϧʔςΟϯά΋ϥΠϒϥϦ͋Δ ʢɾnative module͸ͪΐͬͱݒ೦͋Δ͔΋ɾɾɾʁʣ ΞϓϦϑΥʔΧεͷWEBαΠτʹ͸બ୒ࢶͱͯ͠े෼͋Γɻ ӡ༻ίετ΋ࢥ͍ͬͯͨΑΓ΋ܰͦ͏ɻ ࢼݧಋೖͯ͠Կ͔͋Ε͹ଛ੾Γ͢ΔલఏͷಋೖΛ͍͖͍ͯͨ͠ɻ
29. ͦͷଞͷϧʔςΟϯά ͦͷଞͷϧʔςΟϯάํ๏ W R I T E S O M E T H I N G ex: react-navigation only൛ github.com/EvanBacon/Instagram ΑΓ ͓ · ͚
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΋ߴධՁ ͓ · ͚
31. ͜Μͳ͜ͱ΍ͬͯ·͢ ͜Μͳ͜ͱ΍ͬͯ·͢ ͓ · ͚
32. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ