React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)

base: https://speakerdeck.com/tinykitten/react-nativedehazimeru-haipahuomansu-sumahoapurikai-fa

Transcript

1. React NativeͰ͸͡ΊΔ ϋΠύϑΥʔϚϯε εϚϗΞϓϦ։ൃ Head fi rst high-performance mobile app development with React Native. LT 2024.10.22 Tsubasa SEKIGUCHI
2. TinyKitten Freelance frontend engineer
3. Tsubasa SEKIGUCHI ౎಺Λڌ఺ͱ͢Δ܈അݝલڮࢢग़਎
   ϑϦʔϥϯεϑϩϯτΤϯυΤϯδχΞ
   ͖ͬͨΜͱݺ͹Ε͍ͯ·͢
4. ೥ͿΓʹ໊ࢗͷσβΠϯΛߋ৽͠·ͨ͠
5. NFCλά͕͋Γ·͢
   ࠓண༻͍ͯ͠Δ໊ࡳͷ֓Ͷதԝ෦෼ʹNFCλάΛຒΊࠐΜͰ͍·͢ɻ
   ձ৔ࢀՃͷํ͸NFCରԠεϚϗͰੋඇ͓ࢼ͍ͩ͘͠͞ɻ
6. TrainLCD ೔ຊશࠃͷమಓ࿏ઢͰ࢖͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ
7. Smart StackରԠ
   ޷ධ഑৴த
8. JavaScriptɺ޷͖Ͱ͔͢ʁ ͸͡Ίʹ
9. ͱʹ͔͘JavaScript͕޷͖ʜ
   ͦΜͳ͋ͳͨ
   JavaScriptͰεϚϗΞϓϦΛ࡞Γ·ͤΜ͔ʁ ͸͡Ίʹ
10. Ͱ΋ɺͲ͏΍ͬͯʁ ͸͡Ίʹ
11. ͸͡Ίʹ React Native
12. ͸͡Ίʹ React Native ࠓճ͸React(Native)ͷ
    ࣮຿ܦݧΛ೥΄ͲੵΜͩ
    ஌ݟΛڞ༗͍ͨ͠ͱࢥ͍·͢
13. 3FBDU
    /BUJWFͬͯԿʁ React Native ͬͯԿʁ
14. React NativeͬͯԿʁ React Native ฏͨ͘ݴ͏ͱʜ
    UIߏஙͷͨΊͷ+4ϥΠϒϥϦ
    ʮReact.jsʯΛiOS/Android
    ౳ͷωΠςΟϒػೳͱڞʹ
    ։ൃͰ͖ΔΑ͏ʹͨ͠΋ͷ
15. React Native ͞Βʹݴ͏ͱʜ
    iOS/Android͚ͩͰͳ͘
    Web։ൃ΋Ͱ͖ͨΓ͢Δ
    ͱ͸͍͑React Native for Web͸
    ೥݄ݱࡏ҆ఆͯ͠࢖͑ΔΠϝʔδ͸ͳ͍Ͱ͕͢ʜ React NativeͬͯԿʁ
16. React NativeΛ࢖͏ͱԿ͕خ͍͔͠ ૣ଎
    Pros.
17. React.jsͷ͍͍ͱ͜Ζʜ
    React.jsͷ஌ࣝͰ
    ͍͍ͩͨͷ։ൃ͕Ͱ͖ΔͷͰ
    ֶशίετΛͳΔ΂͘෷Θͣʹ
    ։ൃΛ࢝ΊΒΕΔ React NativeΛ࢖͏ͱԿ͕خ͍͔͠
18. Cordovaͱҧͬͯʜ
    ࣮ߦʹWebViewΛ࢖༻ͤͣʹ
    JSX͕ωΠςΟϒ6*ʹม׵͞ΕΔͷͰ
    ҰൠతʹCordovaΑΓύϑΥʔϚϯε͕ྑ͍ React NativeΛ࢖͏ͱԿ͕خ͍͔͠
19. ͪ͜Β͸CordovaͱͦΕ΄ͲมΘΒͳ͍Ͱ͕͢ʜ
    JavaScript͚ͩͰ࣮ݱͰ͖ͳ͍ॲཧ͸
    Objective-C, Swift, JavaͰ࣮૷Մೳ React NativeΛ࢖͏ͱԿ͕خ͍͔͠
20. લͷεϥΠυͱ͔ͿΓ·͕͢
    React NativeʹରԠ͍ͯ͠ͳ͍
    ωΠςΟϒػೳ΋ϒϦοδ͢Ε͹
    ։ൃͰ͖Δ
    e.g. Apple WatchΞϓϦ΢ΟδΣοτͳͲʜ
    TrainLCDͷ"QQMF
    8BUDIରԠ React NativeΛ࢖͏ͱԿ͕خ͍͔͠
21. ΍ͬͺΓ͋Γ·͢
    Cons. React Native͸ۜͷ஄ؙͰ͸ͳ͍
22. ౰ͨΓલ͚ͩͲͪΐͬͱ௧͍ʜ
    ΍͸ΓJavaScriptͳͷͰ
    Swift΍Javaͱൺ΂Δͱݴޠ࢓༷͕ශऑ
    Ϛγʹ͢ΔͨΊʹ͸TypeScript࢖͍͖ͬͯ·͠ΐ͏ React Native͸ۜͷ஄ؙͰ͸ͳ͍
23. ͍͍ͩͨExpo(ޙड़ Ͱे෼։ൃͰ͖·͕͢
    طଘϥΠϒϥϦ͕ෆे෼ͩͬͨΓ
    ͦ΋ͦ΋ଘࡏ͠ͳ͍ͱ͖͸
    ωΠςΟϒಠ࣮ࣗ૷͕ඞཁ
    SwiftΛReact NativeͷωΠςΟϒϞδϡʔϧʹ࢖͏ͱ͖͸
    Objective-C͔ΒϒϦοδ͢Δඞཁ͕͋Δ React Native͸ۜͷ஄ؙͰ͸ͳ͍
24. جຊతʹ৺഑͢Δඞཁ͸ͳ͍ͱࢥ͍·͕͢
    ωΠςΟϒ(Swift, KotlinͳͲ)Ͱ։ൃͨ͠৔߹ͱൺ΂ͯ
    ύϑΥʔϚϯε͕ѱ͔ͬͨΓ
    ΞϓϦͷDLαΠζ͕େ͖͘ͳΔ͜ͱ͕͋Δ React Native͸ۜͷ஄ؙͰ͸ͳ͍
25. ৐͔ͬΔ΂͖ΤίγεςϜ React.js༝དྷͷॆ࣮ͨ͠
    ΤίγεςϜ
26. ৐͔ͬΔ΂͖ΤίγεςϜ Expo ͍͍͓ͩͨੈ࿩ʹͳΓ·͢
    ৭ʑͳReact Native޲͚ϥΠϒϥϦΛOSSͰ։ൃɾެ։
    ϫʔΫϑϩʔʹΑͬͯ͸ɺQRίʔυͰ։ൃͨ͠ΞϓϦΛ
    ىಈͰ͖·͢
27. ৐͔ͬΔ΂͖ΤίγεςϜ React Navigation ϧʔςΟϯάͱφϏήʔγϣϯͷϥΠϒϥϦ
    ͍͍ͩͨ͜Ε͕React NativeͰͷσϑΝΫτελϯμʔυ
    React NativeͰͷReact RouterͷΑ͏ͳଘࡏ
28. ৐͔ͬΔ΂͖ΤίγεςϜ Fastlane React.js΍React NativeʹݶͬͨOSSͰ͸ͳ͍Ͱ͢
    ΞϓϦͷϏϧυ΍TestFlight/Google Play/App DistributionͳͲ΁ͷ
    σϓϩΠΛࣗಈԽͰ͖·͢🚀
29. ྨࣅϑϨʔϜϫʔΫ React NativeҎ֎ͷ
    ྨࣅϑϨʔϜϫʔΫ
30. ྨࣅϑϨʔϜϫʔΫ Flutter Dartͱ͍͏Java/C#ϥΠΫͷݴޠΛ࢖ͬͯهड़
    Flutter΋WebViewͳ͠Ͱಈ͖·͢
    JavaܥͷΩϟϦΞΛੵΜͰ͍ΔਓͳΒ
    React NativeΑΓFlutterͷ΄͏͕ͱ͖ͬͭ΍͍͔͢΋
31. ·ͱΊ - React.jsͰωΠςΟϒΞϓϦΛ։ൃͰ͖Δ
    - ͦͷଞωΠςΟϒݴޠͰ֦ுՄೳ
    - React NativeҎ֎ͷબ୒ࢶ΋͋Δ
32. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! LT 2024.10.22 Tsubasa SEKIGUCHI