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

「はやい、やすい、うまい?」React Native

「はやい、やすい、うまい?」React Native

kawasaki.rb #047の発表スライドです。

227427c9146ca16f86f78a6a021105ec?s=128

masaru-tech

April 26, 2017
Tweet

Transcript

  1. ʮ͸΍͍ɺ΍͍͢ɺ͏·͍ʁʯ React Native kawasaki.rb #047 @MasaruTech

  2. ΞδΣϯμ ▸ ࣗݾ঺հ ▸ React Nativeͱ͸ ▸ ͸΍͍ ▸ ΍͍͢

    ▸ ͏·͍ʁ
  3. ࣗݾ঺հ ▸ Rails࢖͓ͬͯ࢓ࣄͯ͠ΔΤοεΞΠΞʔ ▸ kawasaki.rb#046͔ΒࢀՃ ▸ ͜͜2ϲ݄ͪΐͬͱϓϥΠϕʔτͰReact NativeΛ࢖ͬͯ ΞϓϦΛ࡞ͬͯΈ͍ͯΔͱ͜Ζ ▸

    Swift/Xcode͸ॳ৺ऀɺAndroid͸ະܦݧ େఉɹকʢΦΦόɹϚαϧʣ
  4. React Native

  5. React Nativeͱ͸ ▸ Facebook੡ͷReact.jsϕʔεͰωΠςΟϒΞϓϦ͕࡞੒Ͱ͖ ΔϑϨʔϜϫʔΫ
 (React 3ܑఋͷ࣍உ) ▸ Webͷ஌ࣝ/ٕज़(JS, CSS

    LikeͳStyle, npm)Ͱ։ൃͰ͖Δ ▸ ΫϩεϓϥοτϑΥʔϜͰ͸ͳ͍
 (Learn once, write anywhereɿҰ౓ֶ΂͹ɺͲ͜Ͱ΋ॻ͚Δ)
  6. ͸΍͍ɺ΍͍͢ɺ͏·͍ʁ

  7. ͸΍͍

  8. ։ൃ଎౓଎͍ ▸ ίϯύΠϧ͸ॳճىಈ࣌ͷΈ
 Ҏ߱͸ίʔυΛมߋͯ͠΋࠶ίϯύΠϧͤͣʹߋ৽Մೳ ▸ npmͷϥΠϒϥϦ͕࢖͑Δ ▸ ωΠςΟϒͷAPI஌Βͳͯ͘΋Կͱ͔ͳΔ
 ެࣜͷυΩϡϝϯτಡΊ͹େମͲ͏ʹ͔ɾɾɾ ▸

    σόοά΋׳ΕͨChromeͷDeveloper Tool͕࢖͑Δ
  9. ಈ࡞଎͍ ▸ UI͸ωΠςΟϒଆͰඳը͞ΕΔ
 ωΠςΟϒͷUIΛ௚઀JS͕ίϯτϩʔϧ ▸ List౳ɺύϑΥʔϚϯεͷ࠷దԽ͕͞Ε͍ͯΔ ▸ JSͰΰϦΰϦʹॲཧΛॻ͘ͱ஗͘ͳΔ(Β͍͠)

  10. ΍͍͢

  11. ͸͡Ί΍͍͢ ▸ JSͰهड़͢ΔͷͰɺWebͷ஌ࣝ͑͋͞Ε͹swift/javaΛ஌Β ͳͯ͘΋ΞϓϦΛ࡞ΕΔ ▸ Babel΋React Native͕Α͠ͳʹͯ͘͠ΕΔͷͰɺReact.jsͷ Α͏ʹઃఆ౳ΛؾʹͤͣES2015/2016Ͱॻ͚Δ

  12. ViewΛ૊Έ΍͍͢ ▸ ͜Εʹਚ͖Δ ▸ ॳ৺ऀʹ͸SwiftɺXcodeͷIB(Interface Builder)ͰViewΛ૊ Ήͷ͸೉͍͠
 UIܥΛશͯIBͰࢦఆͰ͖ͳ͍ɻɻɻ ▸ CSSʹࣅͨهड़Ͱॻ͚ΔͷͰWebͷΑ͏ʹσβΠϯ͕Ͱ͖Δ

  13. Viewͷྫ return ( <View style={styles.container}> <Image style={styles.thumbnail} source={{uri: "https://pbs.twimg.com/profile_images/ xxxxxxxxx.jpeg"}}/>

    <View style={styles.mainContainer}> <View style={styles.header}> <View style={styles.userInfo}> <Text style={styles.username}> {item.username} </Text> <Text style={styles.accountNo}> {item.accountNo} </Text> </View> <View> <Text style={styles.postedAt}> {item.postedAt} </Text> </View> </View> <View style={styles.messageContainer}> <Text> {item.message} </Text> </View> </View> </View> );
  14. const styles = StyleSheet.create({ container: { padding: 10, borderBottomColor: '#ededed',

    borderBottomWidth: 1, backgroundColor: 'transparent', flexDirection: 'row', }, thumbnail: { width: 34, height: 34, borderRadius: 17 }, mainContainer: { flex: 1, flexDirection: 'column', marginLeft: 10, }, header: { flexDirection: 'row', }, userInfo: { flex: 1, flexDirection: 'row' }, username: { fontSize: normalize(16), color: colors.grey1, fontWeight: '800' }, accountNo: { color: colors.grey3, fontSize: normalize(12), marginLeft: 5, marginTop: 3 }, postedAt: { color: colors.grey3, fontSize: normalize(12), marginTop: 3 }, messageContainer: { flexDirection: 'row', marginTop: 10 }, });
  15. ͏·͍ʁ

  16. ͏·͍Ͱʒ͔͕ͨͬͨࢥ͍͔ͭͳ͔ͬͨ ͳͷͰศརͳϦϩʔυػೳΛ঺հ

  17. Ϧϩʔυ ▸ Reload(⌘+R)
 ௨ৗͷϦϩʔυ ▸ Live Reload
 ϑΝΠϧʹมߋ͕͋ΔͱࣗಈͰϦϩʔυ
 State͕ॳظঢ়ଶʹͳΔ ▸

    Hot Reload
 ϑΝΠϧʹมߋ͕͋ΔͱࣗಈͰϦϩʔυ
 State͸อ࣋ͨ͠··
  18. ·ͱΊ ʮ͸΍͍ɺ΍͍͢ɺ͏·͍ʯ ↓ ʮ͸΍͍ɺ΍͍͢ɺ΂ΜΓʯͰͨ͠

  19. ͓ΘΓ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠