[社内LT]初見から実務でReact−NativeやったAndroidエンジニアの所感とRN概要

Transcript

1. ॳݟ͔Β࣮຿Ͱ React-Native΍ͬͨ AndroidΤϯδχΞͷ ॴײͱRN֓ཁ @kirimin

2. ࠓճͷ಺༰ • React−NativeͰͷ։ൃ֓ཁ • AndroidΤϯδχΞ͕React-NativeͰ͕ͬͭΓ Ҋ݅ͰReact-NativeΛ΍ͬͯײͨ͜͡ͱ • ݸਓͷײ૝ʴ·ͩ·ͩRNॳ৺ऀͳͷͰɹɹɹ ࢀߟఔ౓ʹ

3. લఏ • ࣗ෼ʹ͍ͭͯ • Android։ൃྺ6೥͘Β͍ • ϑϩϯτΤϯυ͸झຯͰগ͠ᴩͬͨ͘Β͍ • ࣮຿Ͱ͸ϑϩϯτ։ൃܦݧͳ͠ •

   JavaScript΋࣮຿Ͱ͸΄΅ະܦݧ • React-Native͸׬શʹॳݟ • React΋ॳΊͯ • Redux΋ॳΊͯ

4. લఏ • Ҋ݅ʹ͍ͭͯ • iOSΤϯδχΞ2ਓʴAndroidΤϯδχΞ1ਓ+֎෦ͷํͷ̐ਓମ੍ • ࠷ॳ͸গ͠஌ࣝͷ͋Δ֎෦ͷํʹج൫෦෼ͷ࣮૷Λ΍ͬͯ΋Βͬͨ • ଞ3ਓ͸RNॳݟͰɺUIܥIssueͳͲ͔ΒঃʑʹҊ݅ʹίϛοτ •

   ΞϓϦͷن໛͸ͦͦ͜͜େ͖͍+σβΠϯཁٻ΋ߴΊ • UI͸جຊϚςϦΞϧσβΠϯϕʔε + OSඪ४ • FlowʴReduxߏ੒

5. React-NativeͰͷ։ൃ ֓ཁ

6. React-NativeͰͷ։ൃ֓ཁ • جຊ͸ϑϩϯτΤϯυͷٕज़ • JavaScript + CSS + React

7. JavaScriptʹ͍ͭͯ • ࠷৽ͷJavaScriptͷγϯλοΫε͕࢖͑Δ • Promise, async/await, constʹΑΔείʔϓ੍ޚ, Ξϩʔؔ਺… • ࢥͬͨΑΓ͸շదɻܕ·ΘΓҎ֎͸ͦΜͳʹετϨεΛײ͡ͳ

   ͍ • ͨͩ͠ඪ४ؔ਺ͷශऑ͞͸JVMҭͪʹ͸ΧϧνϟʔγϣοΫ • ࠷৽ͷJS͸ֶशίετ΋ͦΕ΄Ͳߴ͘ͳ͍

8. Flowʹ͍ͭͯ • JSʹܕࢦఆΛ௥Ճग़དྷΔ • ؔ਺ͷҾ਺΍໭Γ஋ʹܕΛ໌ࣔग़དྷΔͷ͸༗Γ೉͍ • nullableܕ΋ࢦఆͰ͖Δ • ͨͩ͠unwrapͳͲѻ͍͕ෆศͳͷͰ͋·Γ࢖͍ͨ͘ͳ͍ҹ৅ •

   ಠࣗܕఆٛ͸classͰ͸ͳ͘Object΁ͷtype alias • ίʔυิ׬͕ޮ͘Α͏ʹͳΔͷͰศར • ෼͔Γ͖͍ͬͯΔnullνΣοΫ΍৑௕ͳܕఆٛͳͲશྗͰFlowʹ४ڌ͠Α͏ͱ ͢ΔͱΘΓͱμϧ͍

9. Reactʹ͍ͭͯ • JS্ͰHTMLͱAndroidͷViewͷதؒͷΑ͏ͳʮComponentʯΛ ૊Έ߹ΘͤͯUIΛߏங͢Δ(JSX) • AndroidͰݴ͑͹layoutͷxml಺ʹJSίʔυΛॻ͘Α͏ͳΠϝʔ δ • ௚ײతͩ͠ૉૣ࣮͘૷ग़དྷͯྑ͍ •

   ͨͩ͠ViewͱUIϩδοΫ͕ີ݁߹͕ͪ͠(ޙड़͠·͢) • Reactࣗମͷֶशίετ͸௿͍ɻॳݟͰ΋งғؾͰॻ͚Δ

10. Redux • σʔλϑϩʔͷ͋ΓํΛఆٛͨ͠ύλʔϯɺٴͼͦͷϑϨʔϜϫʔΫ • ׬શʹॳݟࡴ͠ • ղઆͳ͠ʹίʔυΛಡΜ͚ͩͩͰ͸Կ͕ى͍ͬͯ͜Δͷ͔શ͘෼͔Βͳ͍ • ͨ͘͞Μͷղઆهࣄ͕͋Δ͕ಡΜͰ΋͙͢ʹ͸ཧղͰ͖ͳ͍ •

    େྔʹղઆهࣄΛಡΈړ࣮ͬͯࡍʹ৮ͬͯΑ͏΍͘ཧղͰ͖Δͱ͍͏ײ͡ • ෼͔Ε͹·͊ͳΔ΄Ͳͱ͍͏ײ͡ • ͨͩ͠େྔͷϘΠϥʔςϯϓϨʔτ

11. React-NativeͰͷUI࣮૷

12. React-NativeͰͷUI࣮૷ • React-NativeͰͷUI࣮૷͸Componentͱͷઓ͍ • ໎ͬͨΒެࣜDocsΛݟʹߦ͘ • ͨͩ͠஌Γ͍ͨࣄ͕ॻ͍ͯ͋Δͱ͸ݴ͍ͬͯͳ͍ • ඪ४Ͱఏڙ͞Ε͍ͯΔComponent͸࠷খݶͳͷͰOSSϥΠ ϒϥϦΛେ͍ʹ׆༻͢Δඞཁ͕͋Δ

    • OSS Componentͷ͓ؾ࣋ͪΛߟ͑Δ͓࢓ࣄ

13. React-NativeͰͷUI࣮૷ • ϨΠΞ΢τࣗମ͸CSSͰstyleΛఆٛ͢Δ • flexboxϕʔεͰॻ͚Δ • CSSͷ஌͕ࣝ͋Ε͹ϨΠΞ΢τߏங͸εϜʔζ • ٯʹCSS͕෼͔Βͳ͍ͱຖճάάΔ͜ͱʹͳΔ •

    OSࠩ෼͸ComponentͰٵऩ͞ΕΔ΋ͷ΋͋Δ͕ɺͦ͏Ͱͳ͍΋ͷ͸෼ذରԠ marginLeft: Platform.OS === 'ios' ? -8 : -6,

14. React-NativeͰͷUI࣮૷ import React, { Component } from 'react'; import {

    Text, View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( <View> <Text> If you like React on the web, you'll like React Native. </Text> <Text> You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. </Text> </View> ); } } ←ComponentΫϥεఆٛ ←render()ؔ਺ͰϨΠΞ΢τΛߏஙͯ͠ฦ͢ ←Component(View)Λྻڍͯ͠UIߏங

15. React-NativeͰͷUI࣮૷ import React, { Component } from 'react'; import {

    AppRegistry, StyleSheet, Text, View } from 'react-native'; export default class LotsOfStyles extends Component { render() { return ( <View> <Text style={styles.red}>just red</Text> <Text style={styles.bigblue}>just bigblue</Text> <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text> </View> ); } } const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); ←Styleఆٛ(CSS)

16. React-NativeͰͷUI࣮૷ • ؤுΕ͹Nativeʹ͍ۙUIΛ࣮ݱग़དྷΔ…͕ • ʮNative։ൃͱݟ෼͚͕෇͔ͳ͍UIΛ؆୯ʹ࣮ݱͰ͖Δʯ ͱ͍͏Θ͚Ͱ͸ͳ͍ • AppBarͳͲڞ௨ͷ෦෼΍߆Γ͍ͨ෦෼͸ؤுͬͯNativeʹ دͤɺଞͷ෦෼͸ਵ࣌ଥڠͷ൑அΛ͠ͳ͕ΒਐΊͨํ͕ί εύ͸ߴ͍ͱࢥ͏

    • جຊతʹ͸CSSͰωΠςΟϒͬΆ͍UIΛߏங͢ΔΠϝʔδ

17. React-NativeͰͷUIϩδοΫ • શͯͷUI͸Componentͱ͍͏୯ҐͰߟ͑Δ • ը໘શମ΋ComponentɺUIύʔπ΋Component • PropsͱStateͱ͍͏ಛผͳঢ়ଶΛ࣋ͭ • Props͸Componentੜ੒࣌ʹ֎෦͔Β౉͞ΕΔύϥϝʔλɺ౉ ͞Εͨޙ͸มߋ͠ͳ͍

    • State͸Component಺෦ʹӅṭ͞ΕͨύϥϝʔλɺComponent ಺෦͔Β͔͠มߋ͠ͳ͍

18. React-NativeͰͷUIϩδοΫ • શͯͷUI͸Componentඳը࣌ʹݺ͹ΕΔrender()ؔ਺Ͱߏங ͢Δ • AndroidͳͲͷΑ͏ʹ௚઀ଞͷComponentͷΠϯελϯε Λऔಘͯ͠஋Λૢ࡞ͨ͠Γ͸͠ͳ͍ • ͡Ό͋Ͳ͏΍ͬͯUIΛߋ৽͢Δͷʁ •

    State͕มߋ͞ΕΔ౓ʹrender()͕ݺ͹ΕComponent͕࠶ ඳը͞ΕΔ

19. React-NativeͰͷUIϩδοΫ • ྫɿϘλϯΛԡͨ͠ΒςΩετΛදࣔ͢Δ type State = { isPressed: boolean }

    class WhyReactNativeIsSoGreat extends Component<State>{ constructor (props: Props) { super(props) this.state = { isPressed: false } } render() { const pressedTextView = this.state.isPressed ? (<Text>pressed</Text>) : null return ( <View> <Button onPress={() => { setState({isPressed: true}) }} /> {pressedTextView} </View> ); } } ←Stateఆٛ(Flow) ←StateॳظԽ(Flow) ↓Stateͷ஋ʹΑͬͯඳըΛม͑Δ ←ϘλϯԡԼ࣌ʹsetStateͰঢ়ଶΛมߋ render()ؔ਺͕࠶౓ݺ͹ΕΔ

20. React-NativeͰͷUIϩδοΫ • جຊతʹશͯͷඳըॲཧ͕render()ʹू໿͞ΕΔͷͰUIϩδοΫ, Viewͷ ঢ়ଶΛ௥͍΍͍͢ • render()ؔ਺͸ංେԽ͕ͪ͠ • ϨΠΞ΢τͱUIϩδοΫ/υϝΠϯϩδοΫ͕ີ݁߹ʹͳΓ͕ͪ •

    ComponentઃܭͱϞσϧઃܭΛͪΌΜͱ΍Βͳ͍ͱਏͦ͏ • ڞ௨෦඼ͷComponentԽ͸ਖ਼͍͕͠ɺ্ख͘΍Βͳ͍ͱ͔͑ͬͯσ βΠϯมߋ΍ը໘ʹΑΔඍົͳࠩ෼ͳͲͷϏδωεཁ݅ʹऑ͘ͳΔ

21. RN + Reduxͷ৔߹ • ΞϓϦͷશͯͷঢ়ଶ͸Storeͱ͍͏ΦϒδΣΫτʹอ࣋͞ΕΔ(γϯάϧτϯ) • ReduxΛ࢖͏৔߹͸setState()ͰStateΛߋ৽͢ΔมΘΓʹStoreͷঢ়ଶΛߋ৽ ͢ΔࣄͰComponentΛߋ৽͢Δ • Actionͱ͍͏ΠϕϯτʹΑͬͯStore΁ͷߋ৽ϦΫΤετΛૹΔˠStoreͷߋ

    ৽ʹΑ֤ͬͯComponentͷ࠶ඳը͕ߦΘΔˠStoreͷঢ়ଶΛݩʹUIΛඳը͢ ΔͨΊը໘͕ߋ৽͞ΕΔ • ReduxͰͷStoreͷߋ৽࣌ʹݺ͹ΕComponentͷPropsʹม׵͢Δͷ͕ mapStateToPropsؔ਺ɹ(͕͜͜ॳݟͰ͸ࠇຐज़ͬΆ͘ݟ͑Δ)

22. RN + Reduxͷ৔߹ • ྫ • API /events͔ΒΠϕϯτ৘ใΛऔಘ͠ɺStoreʹอଘ͢ΔActionʮfetchEventsʯ͕͋Δ • Ұཡը໘Ͱ͸Componentੜ੒࣌ʹfetchEventsΛݺͿ

    • APIϦΫΤετʹ੒ޭ͠Store͕ߋ৽͞ΕͨΒҰཡը໘ͷrender()͕ݺͼ௚͞ΕΠϕϯτ৘ ใ͕දࣔ͞ΕΔ • ৄࡉը໘Ͱ͸ΠϕϯτฤूޙʹfetchEventsΛݺͼΠϕϯτ৘ใΛߋ৽͢Δ • Storeͷߋ৽ʹΑΓৄࡉը໘ɺҰཡը໘ͦΕͧΕͰrender()͕ݺͼ௚͞ΕComponent͕ߋ৽ ͞ΕΔ • ը໘಺ʹStoreΛࢀর͢ΔComponent͕͍ͭ͋ͬͯ͘΋ಉ͡Α͏ʹ࠶ඳը͞ΕΔͨΊৗʹ Componetͱσʔλ͕ಉظ͞ΕΔ

23. RN + Reduxॴײ • ReduxͰ͸σʔλͷϑϩʔΛఆ͍ٛͯ͠Δ͚ͩͳͷͰɺViewϨΠ Ϡʔ΍υϝΠϯϨΠϠʔͷ੹຿෼͚ͳͲ͸ఆٛ͞Ε͍ͯͳ͍ • ʮReduxΛ࠾༻͢Δʯͱ͍͏ࣄ͚ͩΛܾΊͯ։ൃΛਐΊͯ͠·ͬ ͨ݁ՌɺStore͔ΒσʔλΛऔಘͨ͠ޙͷUIϩδοΫ΍υϝΠϯ ϩδοΫͷઃܭʹҰ؏ੑ͕ͳ͘ΧΦεԽͯ͠͠·ͬͨ

    • ReduxΛ࢖͏͚ͩͰ͸ʮFat Activityʯ໰୊͸ղܾ͠ͳ͍ • ReduxΛ࢖͏৔߹Ͱ΋AndroidͰͷCleanArchitectureͷΑ͏ͳϨ ΠϠʔυΞʔΩςΫνϟΛ࠾༻ͨ͠ํ͕Αͦ͞͏

24. ։ൃ؀ڥ • Atom, Visual Studio Code, WebStorm(IntelliJ)ͳͲ • ࠷ॳ͸VS CodeͰ࣮૷్͍͕ͯͨ͠த͔ΒIntelliJʹҠߦͨ͠

    • IntelliJͷIDEαϙʔτ͸ѹ౗తʹศར • ڧྗͳίʔυิ׬ɺimportิ׬ͳͲɺࢀরݕࡧɺrename ͳͲ • ωΠςΟϒ։ൃग़਎ऀͱͯ͠͸IntelliJ͸ඞਢͱ͍͏ҹ৅

25. AndroidΤϯδχΞతͳRNײ૝ • ϚϧνϓϥοτϑΥʔϜϑϨʔϜϫʔΫ͸ਖ਼௚͋·Γ৴༻͠ ͍ͯͳ͔͕ͬͨɺ૝૾Ҏ্ʹΑ͘ग़དྷ͍ͯΔ • JSɺReactͰͷ࣮૷͸ࢥͬͨΑΓ΋ਏ͘ͳ͍ • جຊϑϩϯτٕज़ελοΫͳͷͰɺRNΛֶश͢Δ͜ͱͰ Web։ൃεΩϧͷΩϟονΞοϓʹ΋ͳΔ •

    ֶशίετ΋௿Ίɻଟ෼AndroidΤϯδχΞ͕iOSΛֶͿΑΓ ΋RNΛֶͿํ͕࣮຿ϨϕϧʹͳΔ·Ͱͷϋʔυϧ͸௿͍

26. ͓·͚ • RNͷͨΊʹϞμϯͳJavaScriptΛΩϟον Ξοϓ͍ͨ͠ਓʹΦεεϝͷຊ