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

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

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

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

masaru-tech

April 26, 2017
Tweet

More Decks by masaru-tech

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. ࣗݾ঺հ
    ▸ Rails࢖͓ͬͯ࢓ࣄͯ͠ΔΤοεΞΠΞʔ
    ▸ kawasaki.rb#046͔ΒࢀՃ
    ▸ ͜͜2ϲ݄ͪΐͬͱϓϥΠϕʔτͰReact NativeΛ࢖ͬͯ
    ΞϓϦΛ࡞ͬͯΈ͍ͯΔͱ͜Ζ
    ▸ Swift/Xcode͸ॳ৺ऀɺAndroid͸ະܦݧ
    େఉɹকʢΦΦόɹϚαϧʣ

    View Slide

  4. React Native

    View Slide

  5. React Nativeͱ͸
    ▸ Facebook੡ͷReact.jsϕʔεͰωΠςΟϒΞϓϦ͕࡞੒Ͱ͖
    ΔϑϨʔϜϫʔΫ

    (React 3ܑఋͷ࣍உ)
    ▸ Webͷ஌ࣝ/ٕज़(JS, CSS LikeͳStyle, npm)Ͱ։ൃͰ͖Δ
    ▸ ΫϩεϓϥοτϑΥʔϜͰ͸ͳ͍

    (Learn once, write anywhereɿҰ౓ֶ΂͹ɺͲ͜Ͱ΋ॻ͚Δ)

    View Slide

  6. ͸΍͍ɺ΍͍͢ɺ͏·͍ʁ

    View Slide

  7. ͸΍͍

    View Slide

  8. ։ൃ଎౓଎͍
    ▸ ίϯύΠϧ͸ॳճىಈ࣌ͷΈ

    Ҏ߱͸ίʔυΛมߋͯ͠΋࠶ίϯύΠϧͤͣʹߋ৽Մೳ
    ▸ npmͷϥΠϒϥϦ͕࢖͑Δ
    ▸ ωΠςΟϒͷAPI஌Βͳͯ͘΋Կͱ͔ͳΔ

    ެࣜͷυΩϡϝϯτಡΊ͹େମͲ͏ʹ͔ɾɾɾ
    ▸ σόοά΋׳ΕͨChromeͷDeveloper Tool͕࢖͑Δ

    View Slide

  9. ಈ࡞଎͍
    ▸ UI͸ωΠςΟϒଆͰඳը͞ΕΔ

    ωΠςΟϒͷUIΛ௚઀JS͕ίϯτϩʔϧ
    ▸ List౳ɺύϑΥʔϚϯεͷ࠷దԽ͕͞Ε͍ͯΔ
    ▸ JSͰΰϦΰϦʹॲཧΛॻ͘ͱ஗͘ͳΔ(Β͍͠)

    View Slide

  10. ΍͍͢

    View Slide

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

    View Slide

  12. ViewΛ૊Έ΍͍͢
    ▸ ͜Εʹਚ͖Δ
    ▸ ॳ৺ऀʹ͸SwiftɺXcodeͷIB(Interface Builder)ͰViewΛ૊
    Ήͷ͸೉͍͠

    UIܥΛશͯIBͰࢦఆͰ͖ͳ͍ɻɻɻ
    ▸ CSSʹࣅͨهड़Ͱॻ͚ΔͷͰWebͷΑ͏ʹσβΠϯ͕Ͱ͖Δ

    View Slide

  13. Viewͷྫ
    return (

    "https://pbs.twimg.com/profile_images/
    xxxxxxxxx.jpeg"}}/>




    {item.username}


    {item.accountNo}




    {item.postedAt}





    {item.message}




    );

    View Slide

  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
    },
    });

    View Slide

  15. ͏·͍ʁ

    View Slide

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

    View Slide

  17. Ϧϩʔυ
    ▸ Reload(⌘+R)

    ௨ৗͷϦϩʔυ
    ▸ Live Reload

    ϑΝΠϧʹมߋ͕͋ΔͱࣗಈͰϦϩʔυ

    State͕ॳظঢ়ଶʹͳΔ
    ▸ Hot Reload

    ϑΝΠϧʹมߋ͕͋ΔͱࣗಈͰϦϩʔυ

    State͸อ࣋ͨ͠··

    View Slide

  18. ·ͱΊ
    ʮ͸΍͍ɺ΍͍͢ɺ͏·͍ʯ

    ʮ͸΍͍ɺ΍͍͢ɺ΂ΜΓʯͰͨ͠

    View Slide

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

    View Slide