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

Transcript

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

   View Slide

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

   View Slide

3. લఏ
   • ࣗ෼ʹ͍ͭͯ
   • Android։ൃྺ6೥͘Β͍
   • ϑϩϯτΤϯυ͸झຯͰগ͠ᴩͬͨ͘Β͍
   • ࣮຿Ͱ͸ϑϩϯτ։ൃܦݧͳ͠
   • JavaScript΋࣮຿Ͱ͸΄΅ະܦݧ
   • React-Native͸׬શʹॳݟ
   • React΋ॳΊͯ
   • Redux΋ॳΊͯ
   

   View Slide

4. લఏ
   • Ҋ݅ʹ͍ͭͯ
   • iOSΤϯδχΞ2ਓʴAndroidΤϯδχΞ1ਓ+֎෦ͷํͷ̐ਓମ੍
   • ࠷ॳ͸গ͠஌ࣝͷ͋Δ֎෦ͷํʹج൫෦෼ͷ࣮૷Λ΍ͬͯ΋Βͬͨ
   • ଞ3ਓ͸RNॳݟͰɺUIܥIssueͳͲ͔ΒঃʑʹҊ݅ʹίϛοτ
   • ΞϓϦͷن໛͸ͦͦ͜͜େ͖͍+σβΠϯཁٻ΋ߴΊ
   • UI͸جຊϚςϦΞϧσβΠϯϕʔε + OSඪ४
   • FlowʴReduxߏ੒
   

   View Slide

5. React-NativeͰͷ։ൃ
   ֓ཁ
   

   View Slide

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

   View Slide

7. JavaScriptʹ͍ͭͯ
   • ࠷৽ͷJavaScriptͷγϯλοΫε͕࢖͑Δ
   • Promise, async/await, constʹΑΔείʔϓ੍ޚ, Ξϩʔؔ਺…
   • ࢥͬͨΑΓ͸շదɻܕ·ΘΓҎ֎͸ͦΜͳʹετϨεΛײ͡ͳ
   ͍
   • ͨͩ͠ඪ४ؔ਺ͷශऑ͞͸JVMҭͪʹ͸ΧϧνϟʔγϣοΫ
   • ࠷৽ͷJS͸ֶशίετ΋ͦΕ΄Ͳߴ͘ͳ͍
   

   View Slide

8. Flowʹ͍ͭͯ
   • JSʹܕࢦఆΛ௥Ճग़དྷΔ
   • ؔ਺ͷҾ਺΍໭Γ஋ʹܕΛ໌ࣔग़དྷΔͷ͸༗Γ೉͍
   • nullableܕ΋ࢦఆͰ͖Δ
   • ͨͩ͠unwrapͳͲѻ͍͕ෆศͳͷͰ͋·Γ࢖͍ͨ͘ͳ͍ҹ৅
   • ಠࣗܕఆٛ͸classͰ͸ͳ͘Object΁ͷtype alias
   • ίʔυิ׬͕ޮ͘Α͏ʹͳΔͷͰศར
   • ෼͔Γ͖͍ͬͯΔnullνΣοΫ΍৑௕ͳܕఆٛͳͲશྗͰFlowʹ४ڌ͠Α͏ͱ
   ͢ΔͱΘΓͱμϧ͍
   

   View Slide

9. Reactʹ͍ͭͯ
   • JS্ͰHTMLͱAndroidͷViewͷதؒͷΑ͏ͳʮComponentʯΛ
   ૊Έ߹ΘͤͯUIΛߏங͢Δ(JSX)
   • AndroidͰݴ͑͹layoutͷxml಺ʹJSίʔυΛॻ͘Α͏ͳΠϝʔ
   δ
   • ௚ײతͩ͠ૉૣ࣮͘૷ग़དྷͯྑ͍
   • ͨͩ͠ViewͱUIϩδοΫ͕ີ݁߹͕ͪ͠(ޙड़͠·͢)
   • Reactࣗମͷֶशίετ͸௿͍ɻॳݟͰ΋งғؾͰॻ͚Δ
   

   View Slide

10. Redux
    • σʔλϑϩʔͷ͋ΓํΛఆٛͨ͠ύλʔϯɺٴͼͦͷϑϨʔϜϫʔΫ
    • ׬શʹॳݟࡴ͠
    • ղઆͳ͠ʹίʔυΛಡΜ͚ͩͩͰ͸Կ͕ى͍ͬͯ͜Δͷ͔શ͘෼͔Βͳ͍
    • ͨ͘͞Μͷղઆهࣄ͕͋Δ͕ಡΜͰ΋͙͢ʹ͸ཧղͰ͖ͳ͍
    • େྔʹղઆهࣄΛಡΈړ࣮ͬͯࡍʹ৮ͬͯΑ͏΍͘ཧղͰ͖Δͱ͍͏ײ͡
    • ෼͔Ε͹·͊ͳΔ΄Ͳͱ͍͏ײ͡
    • ͨͩ͠େྔͷϘΠϥʔςϯϓϨʔτ
    

    View Slide

11. React-NativeͰͷUI࣮૷
    

    View Slide

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

    View Slide

13. React-NativeͰͷUI࣮૷
    • ϨΠΞ΢τࣗମ͸CSSͰstyleΛఆٛ͢Δ
    • flexboxϕʔεͰॻ͚Δ
    • CSSͷ஌͕ࣝ͋Ε͹ϨΠΞ΢τߏங͸εϜʔζ
    • ٯʹCSS͕෼͔Βͳ͍ͱຖճάάΔ͜ͱʹͳΔ
    • OSࠩ෼͸ComponentͰٵऩ͞ΕΔ΋ͷ΋͋Δ͕ɺͦ͏Ͱͳ͍΋ͷ͸෼ذରԠ
    marginLeft: Platform.OS === 'ios' ? -8 : -6,
    

    View Slide

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

    View Slide

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 (
    
    just red
    just bigblue
    bigblue, then red
    red, then bigblue
    
    );
    }
    }
    const styles = StyleSheet.create({
    bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
    },
    red: {
    color: 'red',
    },
    });
    ←Styleఆٛ(CSS)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. React-NativeͰͷUIϩδοΫ
    • ྫɿϘλϯΛԡͨ͠ΒςΩετΛදࣔ͢Δ
    type State = {
    isPressed: boolean
    }
    class WhyReactNativeIsSoGreat extends Component{
    constructor (props: Props) {
    super(props)
    this.state = {
    isPressed: false
    }
    }
    render() {
    const pressedTextView = this.state.isPressed ? (pressed) : null
    return (
    
    {
    setState({isPressed: true})
    }}
    />
    {pressedTextView}
    
    );
    }
    }
    ←Stateఆٛ(Flow)
    ←StateॳظԽ(Flow)
    ↓Stateͷ஋ʹΑͬͯඳըΛม͑Δ
    ←ϘλϯԡԼ࣌ʹsetStateͰঢ়ଶΛมߋ
    render()ؔ਺͕࠶౓ݺ͹ΕΔ
    

    View Slide

20. React-NativeͰͷUIϩδοΫ
    • جຊతʹશͯͷඳըॲཧ͕render()ʹू໿͞ΕΔͷͰUIϩδοΫ, Viewͷ
    ঢ়ଶΛ௥͍΍͍͢
    • render()ؔ਺͸ංେԽ͕ͪ͠
    • ϨΠΞ΢τͱUIϩδοΫ/υϝΠϯϩδοΫ͕ີ݁߹ʹͳΓ͕ͪ
    • ComponentઃܭͱϞσϧઃܭΛͪΌΜͱ΍Βͳ͍ͱਏͦ͏
    • ڞ௨෦඼ͷComponentԽ͸ਖ਼͍͕͠ɺ্ख͘΍Βͳ͍ͱ͔͑ͬͯσ
    βΠϯมߋ΍ը໘ʹΑΔඍົͳࠩ෼ͳͲͷϏδωεཁ݅ʹऑ͘ͳΔ
    

    View Slide

21. RN + Reduxͷ৔߹
    • ΞϓϦͷશͯͷঢ়ଶ͸Storeͱ͍͏ΦϒδΣΫτʹอ࣋͞ΕΔ(γϯάϧτϯ)
    • ReduxΛ࢖͏৔߹͸setState()ͰStateΛߋ৽͢ΔมΘΓʹStoreͷঢ়ଶΛߋ৽
    ͢ΔࣄͰComponentΛߋ৽͢Δ
    • Actionͱ͍͏ΠϕϯτʹΑͬͯStore΁ͷߋ৽ϦΫΤετΛૹΔˠStoreͷߋ
    ৽ʹΑ֤ͬͯComponentͷ࠶ඳը͕ߦΘΔˠStoreͷঢ়ଶΛݩʹUIΛඳը͢
    ΔͨΊը໘͕ߋ৽͞ΕΔ
    • ReduxͰͷStoreͷߋ৽࣌ʹݺ͹ΕComponentͷPropsʹม׵͢Δͷ͕
    mapStateToPropsؔ਺ɹ(͕͜͜ॳݟͰ͸ࠇຐज़ͬΆ͘ݟ͑Δ)
    

    View Slide

22. RN + Reduxͷ৔߹
    • ྫ
    • API /events͔ΒΠϕϯτ৘ใΛऔಘ͠ɺStoreʹอଘ͢ΔActionʮfetchEventsʯ͕͋Δ
    • Ұཡը໘Ͱ͸Componentੜ੒࣌ʹfetchEventsΛݺͿ
    • APIϦΫΤετʹ੒ޭ͠Store͕ߋ৽͞ΕͨΒҰཡը໘ͷrender()͕ݺͼ௚͞ΕΠϕϯτ৘
    ใ͕දࣔ͞ΕΔ
    • ৄࡉը໘Ͱ͸ΠϕϯτฤूޙʹfetchEventsΛݺͼΠϕϯτ৘ใΛߋ৽͢Δ
    • Storeͷߋ৽ʹΑΓৄࡉը໘ɺҰཡը໘ͦΕͧΕͰrender()͕ݺͼ௚͞ΕComponent͕ߋ৽
    ͞ΕΔ
    • ը໘಺ʹStoreΛࢀর͢ΔComponent͕͍ͭ͋ͬͯ͘΋ಉ͡Α͏ʹ࠶ඳը͞ΕΔͨΊৗʹ
    Componetͱσʔλ͕ಉظ͞ΕΔ
    

    View Slide

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

    View Slide

24. ։ൃ؀ڥ
    • Atom, Visual Studio Code, WebStorm(IntelliJ)ͳͲ
    • ࠷ॳ͸VS CodeͰ࣮૷్͍͕ͯͨ͠த͔ΒIntelliJʹҠߦͨ͠
    • IntelliJͷIDEαϙʔτ͸ѹ౗తʹศར
    • ڧྗͳίʔυิ׬ɺimportิ׬ͳͲɺࢀরݕࡧɺrename
    ͳͲ
    • ωΠςΟϒ։ൃग़਎ऀͱͯ͠͸IntelliJ͸ඞਢͱ͍͏ҹ৅
    

    View Slide

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

    View Slide

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

    View Slide