Tweet
Tweet

Slide 1

Slide 1 text

React NativeͰ͸͡ΊΔ ϋΠύϑΥʔϚϯε εϚϗΞϓϦ։ൃ Head fi rst high-performance mobile app development with React Native. LT 2024.10.22 Tsubasa SEKIGUCHI

Slide 2

Slide 2 text

TinyKitten Freelance frontend engineer

Slide 3

Slide 3 text

Tsubasa SEKIGUCHI ౎಺Λڌ఺ͱ͢Δ܈അݝલڮࢢग़਎ ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ ͖ͬͨΜͱݺ͹Ε͍ͯ·͢

Slide 4

Slide 4 text

೥ͿΓʹ໊ࢗͷσβΠϯΛߋ৽͠·ͨ͠

Slide 5

Slide 5 text

NFCλά͕͋Γ·͢ ࠓண༻͍ͯ͠Δ໊ࡳͷ֓Ͷதԝ෦෼ʹNFCλάΛຒΊࠐΜͰ͍·͢ɻ ձ৔ࢀՃͷํ͸NFCରԠεϚϗͰੋඇ͓ࢼ͍ͩ͘͠͞ɻ

Slide 6

Slide 6 text

TrainLCD ೔ຊશࠃͷమಓ࿏ઢͰ࢖͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ

Slide 7

Slide 7 text

Smart StackରԠ ޷ධ഑৴த

Slide 8

Slide 8 text

JavaScriptɺ޷͖Ͱ͔͢ʁ ͸͡Ίʹ

Slide 9

Slide 9 text

ͱʹ͔͘JavaScript͕޷͖ʜ ͦΜͳ͋ͳͨ JavaScriptͰεϚϗΞϓϦΛ࡞Γ·ͤΜ͔ʁ ͸͡Ίʹ

Slide 10

Slide 10 text

Ͱ΋ɺͲ͏΍ͬͯʁ ͸͡Ίʹ

Slide 11

Slide 11 text

͸͡Ίʹ React Native

Slide 12

Slide 12 text

͸͡Ίʹ React Native ࠓճ͸React(Native)ͷ ࣮຿ܦݧΛ೥΄ͲੵΜͩ ஌ݟΛڞ༗͍ͨ͠ͱࢥ͍·͢

Slide 13

Slide 13 text

3FBDU/BUJWFͬͯԿʁ React Native ͬͯԿʁ

Slide 14

Slide 14 text

React NativeͬͯԿʁ React Native ฏͨ͘ݴ͏ͱʜ UIߏஙͷͨΊͷ+4ϥΠϒϥϦ ʮReact.jsʯΛiOS/Android ౳ͷωΠςΟϒػೳͱڞʹ ։ൃͰ͖ΔΑ͏ʹͨ͠΋ͷ

Slide 15

Slide 15 text

React Native ͞Βʹݴ͏ͱʜ iOS/Android͚ͩͰͳ͘ Web։ൃ΋Ͱ͖ͨΓ͢Δ ͱ͸͍͑React Native for Web͸ ೥݄ݱࡏ҆ఆͯ͠࢖͑ΔΠϝʔδ͸ͳ͍Ͱ͕͢ʜ React NativeͬͯԿʁ

Slide 16

Slide 16 text

React NativeΛ࢖͏ͱԿ͕خ͍͔͠ ૣ଎ Pros.

Slide 17

Slide 17 text

React.jsͷ͍͍ͱ͜Ζʜ React.jsͷ஌ࣝͰ ͍͍ͩͨͷ։ൃ͕Ͱ͖ΔͷͰ ֶशίετΛͳΔ΂͘෷Θͣʹ ։ൃΛ࢝ΊΒΕΔ React NativeΛ࢖͏ͱԿ͕خ͍͔͠

Slide 18

Slide 18 text

Cordovaͱҧͬͯʜ ࣮ߦʹWebViewΛ࢖༻ͤͣʹ JSX͕ωΠςΟϒ6*ʹม׵͞ΕΔͷͰ ҰൠతʹCordovaΑΓύϑΥʔϚϯε͕ྑ͍ React NativeΛ࢖͏ͱԿ͕خ͍͔͠

Slide 19

Slide 19 text

ͪ͜Β͸CordovaͱͦΕ΄ͲมΘΒͳ͍Ͱ͕͢ʜ JavaScript͚ͩͰ࣮ݱͰ͖ͳ͍ॲཧ͸ Objective-C, Swift, JavaͰ࣮૷Մೳ React NativeΛ࢖͏ͱԿ͕خ͍͔͠

Slide 20

Slide 20 text

લͷεϥΠυͱ͔ͿΓ·͕͢ React NativeʹରԠ͍ͯ͠ͳ͍ ωΠςΟϒػೳ΋ϒϦοδ͢Ε͹ ։ൃͰ͖Δ e.g. Apple WatchΞϓϦ΢ΟδΣοτͳͲʜ TrainLCDͷ"QQMF8BUDIରԠ React NativeΛ࢖͏ͱԿ͕خ͍͔͠

Slide 21

Slide 21 text

΍ͬͺΓ͋Γ·͢ Cons. React Native͸ۜͷ஄ؙͰ͸ͳ͍

Slide 22

Slide 22 text

౰ͨΓલ͚ͩͲͪΐͬͱ௧͍ʜ ΍͸ΓJavaScriptͳͷͰ Swift΍Javaͱൺ΂Δͱݴޠ࢓༷͕ශऑ Ϛγʹ͢ΔͨΊʹ͸TypeScript࢖͍͖ͬͯ·͠ΐ͏ React Native͸ۜͷ஄ؙͰ͸ͳ͍

Slide 23

Slide 23 text

͍͍ͩͨExpo(ޙड़ Ͱे෼։ൃͰ͖·͕͢ طଘϥΠϒϥϦ͕ෆे෼ͩͬͨΓ ͦ΋ͦ΋ଘࡏ͠ͳ͍ͱ͖͸ ωΠςΟϒಠ࣮ࣗ૷͕ඞཁ SwiftΛReact NativeͷωΠςΟϒϞδϡʔϧʹ࢖͏ͱ͖͸ Objective-C͔ΒϒϦοδ͢Δඞཁ͕͋Δ React Native͸ۜͷ஄ؙͰ͸ͳ͍

Slide 24

Slide 24 text

جຊతʹ৺഑͢Δඞཁ͸ͳ͍ͱࢥ͍·͕͢ ωΠςΟϒ(Swift, KotlinͳͲ)Ͱ։ൃͨ͠৔߹ͱൺ΂ͯ ύϑΥʔϚϯε͕ѱ͔ͬͨΓ ΞϓϦͷDLαΠζ͕େ͖͘ͳΔ͜ͱ͕͋Δ React Native͸ۜͷ஄ؙͰ͸ͳ͍

Slide 25

Slide 25 text

৐͔ͬΔ΂͖ΤίγεςϜ React.js༝དྷͷॆ࣮ͨ͠ ΤίγεςϜ

Slide 26

Slide 26 text

৐͔ͬΔ΂͖ΤίγεςϜ Expo ͍͍͓ͩͨੈ࿩ʹͳΓ·͢ ৭ʑͳReact Native޲͚ϥΠϒϥϦΛOSSͰ։ൃɾެ։ ϫʔΫϑϩʔʹΑͬͯ͸ɺQRίʔυͰ։ൃͨ͠ΞϓϦΛ ىಈͰ͖·͢

Slide 27

Slide 27 text

৐͔ͬΔ΂͖ΤίγεςϜ React Navigation ϧʔςΟϯάͱφϏήʔγϣϯͷϥΠϒϥϦ ͍͍ͩͨ͜Ε͕React NativeͰͷσϑΝΫτελϯμʔυ React NativeͰͷReact RouterͷΑ͏ͳଘࡏ

Slide 28

Slide 28 text

৐͔ͬΔ΂͖ΤίγεςϜ Fastlane React.js΍React NativeʹݶͬͨOSSͰ͸ͳ͍Ͱ͢ ΞϓϦͷϏϧυ΍TestFlight/Google Play/App DistributionͳͲ΁ͷ σϓϩΠΛࣗಈԽͰ͖·͢🚀

Slide 29

Slide 29 text

ྨࣅϑϨʔϜϫʔΫ React NativeҎ֎ͷ ྨࣅϑϨʔϜϫʔΫ

Slide 30

Slide 30 text

ྨࣅϑϨʔϜϫʔΫ Flutter Dartͱ͍͏Java/C#ϥΠΫͷݴޠΛ࢖ͬͯهड़ Flutter΋WebViewͳ͠Ͱಈ͖·͢ JavaܥͷΩϟϦΞΛੵΜͰ͍ΔਓͳΒ React NativeΑΓFlutterͷ΄͏͕ͱ͖ͬͭ΍͍͔͢΋

Slide 31

Slide 31 text

·ͱΊ - React.jsͰωΠςΟϒΞϓϦΛ։ൃͰ͖Δ - ͦͷଞωΠςΟϒݴޠͰ֦ுՄೳ - React NativeҎ֎ͷબ୒ࢶ΋͋Δ

Slide 32

Slide 32 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! LT 2024.10.22 Tsubasa SEKIGUCHI