Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

nitaking
August 05, 2020
720

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

nitaking

August 05, 2020
Tweet

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 α Π τ ͔ ʔ
  8. None
  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ʹ͍ͨ͠ํ͸
  14. None
  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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ