Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

きりみん

March 30, 2018
Tweet

More Decks by きりみん

Other Decks in Programming

Transcript

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

    JavaScript΋࣮຿Ͱ͸΄΅ະܦݧ • React-Native͸׬શʹॳݟ • React΋ॳΊͯ • Redux΋ॳΊͯ
  2. Flowʹ͍ͭͯ • JSʹܕࢦఆΛ௥Ճग़དྷΔ • ؔ਺ͷҾ਺΍໭Γ஋ʹܕΛ໌ࣔग़དྷΔͷ͸༗Γ೉͍ • nullableܕ΋ࢦఆͰ͖Δ • ͨͩ͠unwrapͳͲѻ͍͕ෆศͳͷͰ͋·Γ࢖͍ͨ͘ͳ͍ҹ৅ •

    ಠࣗܕఆٛ͸classͰ͸ͳ͘Object΁ͷtype alias • ίʔυิ׬͕ޮ͘Α͏ʹͳΔͷͰศར • ෼͔Γ͖͍ͬͯΔnullνΣοΫ΍৑௕ͳܕఆٛͳͲશྗͰFlowʹ४ڌ͠Α͏ͱ ͢ΔͱΘΓͱμϧ͍
  3. 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ߏங
  4. 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)
  5. 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()ؔ਺͕࠶౓ݺ͹ΕΔ
  6. React-NativeͰͷUIϩδοΫ • جຊతʹશͯͷඳըॲཧ͕render()ʹू໿͞ΕΔͷͰUIϩδοΫ, Viewͷ ঢ়ଶΛ௥͍΍͍͢ • render()ؔ਺͸ංେԽ͕ͪ͠ • ϨΠΞ΢τͱUIϩδοΫ/υϝΠϯϩδοΫ͕ີ݁߹ʹͳΓ͕ͪ •

    ComponentઃܭͱϞσϧઃܭΛͪΌΜͱ΍Βͳ͍ͱਏͦ͏ • ڞ௨෦඼ͷComponentԽ͸ਖ਼͍͕͠ɺ্ख͘΍Βͳ͍ͱ͔͑ͬͯσ βΠϯมߋ΍ը໘ʹΑΔඍົͳࠩ෼ͳͲͷϏδωεཁ݅ʹऑ͘ͳΔ
  7. RN + Reduxͷ৔߹ • ΞϓϦͷશͯͷঢ়ଶ͸Storeͱ͍͏ΦϒδΣΫτʹอ࣋͞ΕΔ(γϯάϧτϯ) • ReduxΛ࢖͏৔߹͸setState()ͰStateΛߋ৽͢ΔมΘΓʹStoreͷঢ়ଶΛߋ৽ ͢ΔࣄͰComponentΛߋ৽͢Δ • Actionͱ͍͏ΠϕϯτʹΑͬͯStore΁ͷߋ৽ϦΫΤετΛૹΔˠStoreͷߋ

    ৽ʹΑ֤ͬͯComponentͷ࠶ඳը͕ߦΘΔˠStoreͷঢ়ଶΛݩʹUIΛඳը͢ ΔͨΊը໘͕ߋ৽͞ΕΔ • ReduxͰͷStoreͷߋ৽࣌ʹݺ͹ΕComponentͷPropsʹม׵͢Δͷ͕ mapStateToPropsؔ਺ɹ(͕͜͜ॳݟͰ͸ࠇຐज़ͬΆ͘ݟ͑Δ)
  8. RN + Reduxͷ৔߹ • ྫ • API /events͔ΒΠϕϯτ৘ใΛऔಘ͠ɺStoreʹอଘ͢ΔActionʮfetchEventsʯ͕͋Δ • Ұཡը໘Ͱ͸Componentੜ੒࣌ʹfetchEventsΛݺͿ

    • APIϦΫΤετʹ੒ޭ͠Store͕ߋ৽͞ΕͨΒҰཡը໘ͷrender()͕ݺͼ௚͞ΕΠϕϯτ৘ ใ͕දࣔ͞ΕΔ • ৄࡉը໘Ͱ͸ΠϕϯτฤूޙʹfetchEventsΛݺͼΠϕϯτ৘ใΛߋ৽͢Δ • Storeͷߋ৽ʹΑΓৄࡉը໘ɺҰཡը໘ͦΕͧΕͰrender()͕ݺͼ௚͞ΕComponent͕ߋ৽ ͞ΕΔ • ը໘಺ʹStoreΛࢀর͢ΔComponent͕͍ͭ͋ͬͯ͘΋ಉ͡Α͏ʹ࠶ඳը͞ΕΔͨΊৗʹ Componetͱσʔλ͕ಉظ͞ΕΔ
  9. ։ൃ؀ڥ • Atom, Visual Studio Code, WebStorm(IntelliJ)ͳͲ • ࠷ॳ͸VS CodeͰ࣮૷్͍͕ͯͨ͠த͔ΒIntelliJʹҠߦͨ͠

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