地方IT企業の戦略を広げる 技術選択としてのReact Native

地方IT企業の戦略を広げる 技術選択としてのReact Native

MOBILE CREW NIIGATA 2019で喋りました https://www.mobilecrew.jp/

9a6e4623f9314c5e1fc99635ac9617ed?s=128

Yukiya Nakagawa

October 11, 2019
Tweet

Transcript

  1. 2.

    ࣗݾ঺հ • த઒ ޾࠸ / Nkzn / ͳ͔͟Μ • ্ӽࢢग़਎

    • ϞόΠϧΤϯδχΞ ʢReact Native, Android, PWAʣ • ೋࣇͷ෕Ͱ࠺ͷ෉
  2. 3.

    ຊ͕޷ධͰ͢ • ͨͬͨ1೔Ͱجຊ͕਎ʹ෇͘ʂ AndroidΞϓϦ։ൃ௒ೖ໳ • ٕज़ධ࿦ࣾ • 224ϖʔδ / 2,280ԁʴ੫

    • https://gihyo.jp/book/ 2018/978-4-297-10004-9 ࠓճɺAndroidΤϯδχΞΒ͍͠࿩͸͚ͩ͜͜
  3. 10.

    ։ൃϓϩδΣΫτͷʮྑ͍ʯͱ͸ • ૣ͘։ൃͰ͖Δ͜ͱ • ݎ࿚Ͱ͋Δ͜ͱ • কདྷͷϝϯςφϯείετ͕௿͍͜ͱ • ਫ਼ີʹ޻਺͕ݟੵ΋ΕΔ͜ͱ •

    গͳ͍ਓ਺Ͱ΋ଟ͘ͷ։ൃ͕Ͱ͖Δ͜ͱ • ଟ͘ͷਓ਺Ͱ։ൃͯ͠΋ഁ୼͠ͳ͍͜ͱ • ֶशίετ͕௿͘ɺ৽نϝϯόʔΛऔΓೖΕ΍͍͢͜ͱ
  4. 17.

    ϞόΠϧνʔϜͷ؅ཧԼʹ͋ΔΞϓϦ 2019 • ΞάϦϊʔτ • ๭ࣾ޲͚࠿ഓ؅ཧΞϓ Ϧ • ๭ࣾ޲͚೶ༀ࢖༻ཤྺ ΞϓϦ

    • ๭ࣾ޲͚Πνΰग़ՙ؅ ཧΞϓϦ • ਫ໳؅ཧ • ໘ੵܭࢉ • ڑ཭ܭࢉ • ೶ༀݕࡧ AndroidΞϓϦ iOSΞϓϦ WebΞϓϦ/PWA
  5. 47.

    import React from 'react'; import { View, Text, StyleSheet }

    from 'react-native'; // HTMLͷΑ͏ͳϚʔΫΞοϓͰϨΠΞ΢τͷߏ଄Λఆٛ͢Δ const App = (props) => ( <View style={styles.container}> <Text>Hello, React Native!</Text> </View> ); export default App; // CSSϥΠΫͳࢦఆͰελΠϧΛఆٛ͢Δ const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, });
  6. 48.
  7. 54.

    React Nativeͷ2ͭͷϨΠϠʔ • UIϥΠϒϥϦ૚ • ReactϥΠϒϥϦ޲͚ͷλάΛఏڙ͢ΔJavaScriptϥΠϒϥϦ • ϛυϧ΢ΣΞ૚ • JavaScriptͷ࣮ߦ؀ڥΛ༻ҙ

    • JavaScriptଆͰUIϥΠϒϥϦ͕ར༻͞Εͨࡍʹɺ֤ϓϥοτ ϑΥʔϜͷUIʹ຋༁͢ΔɺC++ͱʢJava | Objective-CʣͰ࡞Β Εͨϛυϧ΢ΣΞ
  8. 55.

    ϛυϧ΢ΣΞ૚ͷࠩ͠ସ͑Ͱ޿͕Δੈք • iOSʢofficialʣ • Androidʢofficialʣ • for Windowsʢthird party /

    Microsoftʣ • for Webʢthird party, ͨͩ͠࡞ऀ͸ReactνʔϜೖΓʣ • for macOSʢthird partyʣ
  9. 56.

    ಋೖࣄྫ΋ଓʑ • InstagramʢFBͳͷͰʣ • DiscordʢiOS onlyʣ • Office 365ʢ΄Μͱ͔ʁʣ •

    Twitter for WebʢReact Native for Webʣ https://blog.nkzn.info/entry/2019/04/16/163743 ΄ΜͱΒ͍͠Αʁ
  10. 58.

    ୅දతͳίϯϙʔωϯτ 7JFX ϨΠΞ΢τͷجຊ୯Ґ 5FYU ςΩετΛදࣔɾ૷০͢Δ "DUJWJUZ*OEJDBUPS ॲཧ଴ͪΛද͢Πϯδέʔλʔ 'MBU-JTU ഑ྻσʔλΛলϝϞϦͰදࣔ 4DSPMM7JFX

    ಺ଆͷίϯςϯπ͕ը໘Λ͸Έग़ͨΒ εΫϩʔϧͤ͞Δ 3FGSFTI$POUSPM 4DSPMM7JFXʹʮҾͬுͬͯߋ৽ʯΛ෇༩͢Δ 5PVDIBCMF0QBDJUZ ͋ΒΏΔϏϡʔʹλοϓΠϕϯτͱϑΟʔυό οΫΛ࣋ͨͤΔ
  11. 59.

    ΄ͲΑཻ͍౓ • GUIΞϓϦέʔγϣϯͷߏ੒ཁૉͱͯ͠ྑ͍ • ͜ΕΛϒϥ΢βͰ࢖͍ͨͯ͘ React Native for Web͕ੜ·Εͨ •

    ϒϩάʹ·ͱΊͨͷͰಡΜͰ • React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ https://blog.nkzn.info/entry/2018/05/29/210030
  12. 62.

    JavaScriptΞϓϦ։ൃͷ؍఺ • ϥϯλΠϜ͕WebKitͷJavaScriptCore • JS to JSίϯύΠϥͷBabel͕૊Έࠐ·Ε͓ͯΓɺϞμϯͳ JavaScriptจ๏Λ࢖༻Ͱ͖Δ • TypeScriptͰܕΛ෇͚Ε͹େن໛։ൃʹ΋ରԠͰ͖Δ

    • FlexboxΛ࢖ͬͯϨΠΞ΢τ͕૊ΊΔ • جఈίϯϙʔωϯτʹ͸༨ܭͳελΠϧ͕͍͍ͭͯͳ͍ͷͰɺಠ ࣗσβΠϯΛ࡞Γ͍ͨͱ͖ʹ૊Έཱͯ΍͍͢
  13. 67.

    import React from 'react'; import { View, Text, StyleSheet }

    from 'react-native'; // HTMLͷΑ͏ͳϚʔΫΞοϓͰϨΠΞ΢τͷߏ଄Λఆٛ͢Δ const App = (props) => ( <View style={styles.container}> <Text>Hello, React Native!</Text> </View> ); export default App; // CSSϥΠΫͳࢦఆͰελΠϧΛఆٛ͢Δ const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); ←͜Ε
  14. 69.
  15. 70.

    ࣮ࡍʹ͋ͬͨྫ • This app has been build with an incorrect

    configuration. Please configure your build for VectorDrawableCompat. • ελοΫτϨʔεతʹ͸ˣ͕ݪҼ • ReactSwitchManager.java • SwitchCompat.java • Android 4.4ͰVectorDrawableΛಈ͔ͦ͏ͱͯ͠ࢮΜͩΒ͍͠ • ͳ͓ػछґଘόάͩͬͨ໛༷ʢCompat͸έΞ͞ΕͯΔ͸ͣͰ͢͠Ͷ https://qiita.com/Nkzn/items/79477933c1d8762961be
  16. 71.

    ϦϦʔεͷඞཁ஌ࣝྔ͕΍͹͍ • ϦϦʔεϏϧυΛߦ͏ʹ͸3ͭͷจԽݍͷʮ;ͭ͏ʯΛ ஌͍ͬͯΔඞཁ͕͋Δ • NPM / Babel • Android

    Studio / Gradle • Xcode / CocoaPods • ͦΕͧΕͰݟͨΒಛघͳ஌ࣝͱ͍͏΄ͲͰ͸ͳ͍ͷ͕ٹ͍
  17. 78.

    import React from 'react'; import MapView, { Marker } from

    'react-native-maps'; export function MyMapView(props) { return ( <MapView region={props.region} onRegionChange={props.onRegionChange} > {props.markers.map(marker => ( <Marker coordinate={marker.latlng} title={marker.title} description={marker.description} /> ))} </MapView> ); }; Ґஔ৘ใͷArrayΛmapͰMarkerʹม׵
  18. 82.

    React NativeΛѻ͏νʔϜʹ ඞཁͳϩʔϧ • JavaScript/TypeScript + ReactʹΑΔΞϓϦ։ൃʹࢀՃͰ͖Δϑ ϩϯτΤϯυΤϯδχΞʢͨ͘͞Μʣ • NPMʹΑΔΞϓϦͷӡ༻͕Ͱ͖ΔΤϯδχΞʢ࠷௿1໊ʣ

    • Xcode + CocoaPodsʹΑΔiOSΞϓϦͷӡ༻͕Ͱ͖ΔiOSΤϯδ χΞʢ࠷௿1໊ʣ • GradleʹΑΔAndroidΞϓϦͷӡ༻͕Ͱ͖ΔAndroidΤϯδχΞ ʢ࠷௿1໊ʣ
  19. 87.
  20. 94.
  21. 98.

    ࢀߟจݙ • ͳͥɺ૊৫ͷͭ͘Γͱιϑτ΢ΣΞΞʔΩςΫνϟ͸ࣅͯ͠·͏ͷ͔ - Qiita https://qiita.com/hirokidaichi/items/d12fcce80ee593bcf34d • Android 4.4ҎԼͰReact NativeͷSwitch͕ಈ͔ͳ͍৔߹ͷରॲ

    - Qiita https://qiita.com/Nkzn/items/79477933c1d8762961be • React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ - φΧβϯυοτωοτ https://blog.nkzn.info/entry/2018/05/29/210030 • React Nativeͱ͸Կ͔ʁ جຊͷ࢓૊Έͱ࢖͍Ͳ͜ΖΛཧղ͢Δ - CodeZine https://codezine.jp/article/detail/11295 • ʮωΠςΟϒΞϓϦ։ൃऀ͸ઈ໓ةዧछͳͷ͔ʁʯ΁ͷײ૝จ - φΧβϯυοτωοτ https://blog.nkzn.info/entry/2019/04/16/163743