Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

͖͔͚ͬ ͖͔͚ͬ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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ʢ࣮ݧతʣͱͷ஫ҙॻ͖

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

D E M O

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ϧʔςΟϯά ϧʔςΟϯά

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

D E M O

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ύϑΥʔϚϯε ύϑΥʔϚϯε Ҿ༻ɿ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΋ߴධՁ ͓ · ͚

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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