react-native-unimodulesのススメ

expoが開発しているreact-native-unimodules(bare workflow)についてのスライドです。
素のreact-nativeを使っている人でも使えるのでぜひ使ってほしいです。

Transcript

1. 2019/09/03 Θͨͳ΂Ώ͏ REACT-NATIVE-UNIMODULESͷεεϝ
2. ▸ ͸͡Ίʹ ▸ ࣗݾ঺հ ▸ લఏ৚݅ͱͯ͠ͷExpoʹ͍ͭͯ ▸ react-native-unimodulesʹ͍ͭͯ ▸ react-native-unimodules͕αϙʔτ͍ͯ͠ΔAPI ▸ ͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ ▸ Ͳ͏͍͏ਓʹΦεεϝΛ͍͔ͨ͠ʁ ▸ ·ͱΊ ֓ཁ
3. ͸͡Ίʹ react-native-camera࢖ͬͯ·͔͢ʁ (Χϝϥίϯϙʔωϯτ) react-native-sensors࢖ͬͯ·͔͢ʁ (Ճ଎౓ͱ͔δϟΠϩͱ͔ͷηϯαʔ) react-native-permissions࢖ͬͯ·͔͢ʁ (ΧϝϥͳͲͷݖݶऔಘ) react-native-location࢖ͬͯ·͔͢ʁ (Ґஔ৘ใऔಘ) react-native-video࢖ͬͯ·͔͢ʁ (ϏσΦίϯϙʔωϯτ) react-native-audio࢖ͬͯ·͔͢ʁ (Ի࠶ੜίϯϙʔωϯτ) react-native-unimodulesʹશ෦ೖ͍ͬͯ·͢ react-native-unimodules࢖͍·͠ΐ͏ react-native-sqlite-storage࢖ͬͯ·͔͢ʁ (SQLiteΛѻ͏ύοέʔδ)
4. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ٕज़ॻయ
   ϓογϡ௨஌αʔόຊ
5. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 4໊(ΤϯδχΞ͸2ਓʹͳͬͨ)Ͱฏۉ೥ྸ30൒͹ͷձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸ ࠷ۙফͨ͠ࣄۀ -> Weddy Weddy ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢ۂͰགྷͬͯಈըΛΞοϓ ▸ ࠓ࡞͍ͬͯΔࣄۀ ▸ μϯεͷΦϯϥΠϯϨοεϯΞϓϦ ▸ react-native + firebase + TypeScript + NextJS
6. REACT-NATIVE-UNIMODULESͷεεϝ લఏ৚݅ͱͯ͠ͷExpoʹ͍ͭͯ
7. લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(1) ʙEXPOͷಛ௃ʙ ▸ Xcode΍Android Studio͕ෆཁ ▸ JavaScriptͷΈͰReact NativeΞϓϦ͕࡞੒Մೳ ▸ ศརͳωΠςΟϒAPIΛExpo SDKͱͯ͠แׅͯ͠ϝϯςφϯε ▸ ΫϥΠΞϯτΞϓϦΛ࢖͏͜ͱͰ؆୯ʹ࣮ػ֬ೝ ▸ OTAͳͲศརͳػೳ΋౥ࡌ
8. લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(2) ʙEXPOͷσϝϦοτʙ ▸ ωΠςΟϒػೳ͕͞ΘΕͳ͍ ▸ VideoϓϨΠϠʔΛΧελϚΠζ͍ͨ͠ ▸ Bluetoothʹؔ͢ΔΞϓϦΛ࡞Γ͍ͨ ▸ Repro΍AdjustͳͲ֎෦SDKΛಋೖͰ͖ͳ͍ ▸ firebaseͷϑϧػೳʹରԠ͍ͯ͠ͳ͍ͳͲͳͲ ▸ όϯυϧαΠζ͕େ͖͘ͳΓ͕ͪ ▸ react-nativeͷόʔδϣϯ௥ै͕ͪΐͬͱ஗͘ͳΓ͕ͪ ϝϦοτ΋σϝϦοτ΋͋Γ ࡞Γ͍ͨΞϓϦʹΑͬͯExpoΛ࢖͏͔Ͳ͏͔Λ൑அ Ejectͯ͠ExpoKitͰӡ༻͢Δ͜ͱͰ͜ΕΒ΋ଟগղܾʁ
9. લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(3) ʙEXPOKITʹ͍ͭͯʙ ▸ Eject(Detach)Λͯ͠ExpoKitͱͯ͠ӡ༻͢Δͱʁ ▸ ωΠςΟϒػೳΛ৮Δ͜ͱ͕Մೳ ▸ podΛ͍͡ΔͳͲͯ͠όϯυϧαΠζ͸ଟগԼ͛ΕΔͳͲͳͲ ▸ όϯυϧαΠζΛେ෯ʹখ͘͢͞Δ͜ͱ͸ݫ͍͠ ▸ react-nativeͷόʔδϣϯ͸Expo SDKͷ·· ▸ ಺෦తʹෳࡶͰ͋ΔͷͰɺॊೈʹมߋ͢Δ͜ͱ͕ݫ͍͠ ▸ ӡ༻ίετ͕ߴ͍ͷͰExpoKitͰ͋Δඞཁ΋ͳ͍ͷͰ͸ͳ͍͔ʁ ϞϊϦγοΫͳͨΊʹ৭ʑͱ੍໿͕ग़ͯ͠·͏ Ϟδϡʔϧʹ෼཭ͯ͠औͬͨΓ෇͚ͨΓͰ͖ΔΑ͏ʹ͠Α͏ -> react-native-unimodulesͷొ৔ ࢀߟɿIUUQTCMPHFYQPJPFYQPLJUFDCG
10. REACT-NATIVE-UNIMODULESͷεεϝ react-native-unimodulesʹ͍ͭͯ
11. REACT-NATIVE-UNIMODULESʹ͍ͭͯ(1) ▸ ExpoνʔϜ͕։ൃ͍ͯ͠ΔExpoͷ࠷௿ݶͷίΞ෦෼ ▸ react-native-unimodulesΛ࢖༻ͨ͠workflow͸Bare workflowͱݴ͏ ▸ react-native-unimodulesΛ௨ͯ͠ɺExpoͷAPI͕࢖༻Մೳʹ ▸ expo-cameraͳͲ෼཭͍ͯ͠ΔύοέʔδΛΠϯϙʔτͯ͠࢖༻ ▸ ύοέʔδ͕෼཭͞Ε͍ͯΔͷͰݸʑͰόʔδϣϯΞοϓ͕ߦΘΕΔ ▸ ૉͷreact-nativeͱಉ༷ʹXcode΍Android StudioΛ࢖͏ https://tech.kitchhike.com/entry/react-native-expo-session-01
12. REACT-NATIVE-UNIMODULESʹ͍ͭͯ(2) ʙEXPOKITͱԿ͕ҧ͏ͷ͔ʁʙ ▸ Expo SDKʹґଘ͠ͳ͍ͷͰreact-nativeͷόʔδϣϯΛࣗ༝ʹมߋՄೳ ▸ ඞཁͳύοέʔδͷΈΛΠϯετʔϧͯ͠࢖༻Մೳ ▸ ૉͷreact-nativeϓϩδΣΫτʹ΋ޙ͔Β؆୯ʹಋೖՄೳ ▸ OTAΞοϓσʔτͳͲҰ෦࢖༻Ͱ͖ͳ͍API͋Γ(ޙεϥΠυʹهड़) https://tech.kitchhike.com/entry/react-native-expo-session-01 expo init —template bare-minimumͰ؆୯ʹ࢖͑Δ
13. REACT-NATIVE-UNIMODULESʹ͍ͭͯ(3) ʙେ͖ͳಛ௃ʙ ▸ v0.5.0͔ΒExpoΫϥΠΞϯτͰ΋࣮ߦ͕Մೳʹ ▸ ݟͨ໨ͷ֬ೝ΍શମΛݟΔͷ͕ͱͯ΋؆୯ʹ ▸ ͨͩ͠ɺExpo SDKʹؚ·Ε͍ͯͳ͍ωΠςΟϒػೳ͸࢖͑ͳ͍ ▸ firebaseͷϑϧػೳ / Repro / Adjust / ͳͲͳͲ ▸ JavaScript͚ͩΛExpoΫϥΠΞϯτͰ࣮ߦͯ͘͠ΕΔ .expo.jsͳͲʹมߋ͢Δ͜ͱͰผಡΈࠐΈՄೳ ৄ͍͠ྫ -> https://www.youtube.com/watch?v=FlZFsMnYuWg
14. REACT-NATIVE-UNIMODULESʹ͍ͭͯ(4) ʙ௨ৗϏϧυͰͷ࣮ߦʙ
15. REACT-NATIVE-UNIMODULESʹ͍ͭͯ(5) ʙผϑΝΠϧΛ࡞੒ʙ
16. REACT-NATIVE-UNIMODULESʹ͍ͭͯ(6) ʙEXPO CLIENTͰͷ࣮ߦʙ
17. REACT-NATIVE-UNIMODULESͷεεϝ react-native-unimodules͕αϙʔτ͍ͯ͠ΔAPI
18. REACT-NATIVE-UNIMODULES͕αϙʔτ͍ͯ͠ΔAPI(1) ʙରԠࡁΈAPIʙ ▸ https://docs.expo.io/versions/v34.0.0/bare/unimodules-full-list/ ▸ ExpoͰ࢖༻Ͱ͖ΔAPI͓Αͼίϯϙʔωϯτ͕΄΅΄΅࢖༻Մೳ ▸ Expo͕؅ཧ͍ͯ͠ΔͷͰߋ৽΋ৗʹߦΘΕ͍ͯΔ ▸ طଘͷύοέʔδΛforkͯ͠؅ཧͯ͠Δ৔߹΋͋Δ(ΧϝϥͳͲ) Accelerometer 
 Admob 
 Amplitude 
 AppAuth 
 Asset 
 Audio 
 AV 
 BarCodeScanner 
 Barometer 
 Brightness 
 BlurView 
 Calendar 
 Camera 
 Constants 
 Contacts 
 Crypto
 DeviceMotion 
 DocumentPicker 
 Facebook 
 FaceDetector 
 FileSystem 
 Font 
 GLView 
 GoogleSignIn 
 Gyroscope 
 Haptics 
 ImageManipulator 
 ImagePicker 
 IntentLauncher 
 KeepAwake 
 LinearGradient 
 LocalAuthentication 
 Localization 
 Location 
 Magnetometer 
 MailComposer 
 MediaLibrary 
 Pedometer 
 Permissions 
 Print 
 Random 
 SecureStore 
 Segment 
 Sharing 
 SMS 
 SQLite 
 Video 
 VideoThumbnails 
 WebBrowser InAppPurchases react-native-unimodulesͷΈ InAppPurchases͕࢖༻Մೳ
19. REACT-NATIVE-UNIMODULES͕αϙʔτ͍ͯ͠ΔAPI(2) ʙඇରԠAPIʙ AR AppLoading AuthSession BackgroundFetch ErrorRecovery Linking Notifications ScreenOrientation SplashScreen StoreReview TaskManager Updates ▸ ॱ൪͸ܾ·͍ͬͯͳ͍͕ͦΕͧΕରԠ༧ఆ ▸ ࢖͑ͳ͍ػೳ͸ଞͷnpmΛಡΈࠐΉͳͲͰରॲ Updates(OTAΞοϓσʔτ)ͷରԠ׬ྃޙʹ v1.0.0ͱͯ͠ਖ਼ࣜʹϦϦʔε༧ఆ
20. REACT-NATIVE-UNIMODULESͷεεϝ ͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ
21. ͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ(1) ʙΞϓϦ಺WEBϒϥ΢βʙ ▸ ϦϯΫΛ։͍ͨࡍʹWebViewΛදࣔ ▸ ϖʔδཤྺͳͲෳࡶͳػೳ͕ඞཁ ▸ ։ൃ͢Δίετ͕͔ͳΓߴ͍ ΞϓϦ಺Webϒϥ΢β ▸ npmύοέʔδΛ࢖༻ ▸ ྆ରԠͰཁ݅Λຬͨ͢ύοέʔδ͕ͳ͍ ▸ iOS/AndroidͰ2ͭύοέʔδ͕ඞཁ ▸ ύοέʔδ؅ཧίετ͕ߴ͍ expo-web-browserͰ؆୯࣮૷
22. ͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ(2) ʙΞϓϦ಺WEBϒϥ΢βʙ ΞϓϦ಺Webϒϥ΢β
23. ͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ(3) ʙΠϝʔδϐοΧʔʙ ը૾Λબ୒ͯ͠Ϋϩοϓ
24. REACT-NATIVE-UNIMODULESͷεεϝ Ͳ͏͍͏ਓʹΦεεϝΛ͍͔ͨ͠ʁ
25. Ͳ͏͍͏ਓʹΦεεϝΛ͍͔ͨ͠ʁ ▸ ExpoΛ࢖͍ͬͯΔ͕ɺͲ͏ͯ͠΋EjectΛ͠ͳ͍ͱ͍͚ͳ͘ͳͬͨਓ ▸ Χϝϥػೳ͚ͩվ଄͍ͨ͠৔߹ ▸ Repro΍AdjustͳͲΛೖΕͳ͍ͱ͍͚ͳ͍৔߹ ▸ ૉͷreact-nativeΛ࢖͍ͬͯΔਓ ▸ ߋ৽͞Εͳ͍ύοέʔδ΋͋ͬͯ؅ཧ͕େม ▸ InAppPurchaseΛ࢖͍͍ͨ৔߹ ▸ ͍͖ͳΓExpoԽ͡Όͳͯ͘ஈ֊తʹߦ͍͖͍ͬͯͨ৔߹ ͱΓ͋͑ͣศརͳAPI/ίϯϙʔωϯτ܈ͩͱࢥͬͯ࢖ͬͯ΄͍͠
26. ·ͱΊ ▸ react-native-unimodules͸ExpoͷAPI/ίϯϙʔωϯτΛ
 ૉͷreact-nativeͰ΋࢖͑ΔΑ͏ʹ͢ΔͨΊͷ΋ͷ ▸ ExpoKitͱҧͬͯ͋ͱ͔Βಋೖ͢Δͷ΋؆୯ ▸ Expo͕ύοέʔδ෼ׂΛͯ͠؅ཧ͍ͯ͠ΔͷͰؾ࣋ͪతʹ҆৺ ▸ কདྷతʹ͸OTAΞοϓσʔτͳͲ΋ରԠ ▸ ExpoࣗମίϛϡχςΟ͕׆ൃͳͷͰunimodulesରԠ΋׆ൃ ▸ ·ͣ͸ศརͳAPI/ίϯϙʔωϯτ܈ͱࢥͬͯ࢖͏΂͖
27. ͓ΘΓ