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

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

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