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

モダンフロントエンド + React Native所感 / techcamp03

モダンフロントエンド + React Native所感 / techcamp03

第3回開発合宿(2017/05/22)

Yuichi Goto

May 22, 2017
Tweet

More Decks by Yuichi Goto

Other Decks in Programming

Transcript

  1. ϞμϯϑϩϯτΤϯυ +
    React Nativeॴײ
    ୈ3ճ։ൃ߹॓੒Ռൃදɹyasaichi

    View full-size slide

  2. ൃදߏ੒
    1. എܠͱ໨త
    2. ٕज़֓ཁ
    3. ࣮ࡍʹ΍ͬͯΈͨ
    4. ॴײ

    View full-size slide

  3. എܠͱ໨త

    View full-size slide

  4. എܠ1: લճͷ߹॓@2016Ն
    • ReactͰॻ͍ͨMinesweeperΛվྑͨ͠
    • CSS Modules, css next, PostCSSͷಋೖΛ

    ௨ͯ͡ϞμϯCSSٕज़ʹ৮Εͨ
    • ซͤͯϏϧυपΓΛGulp + Browserify͔Β
    npm-scripts + webpackʹҠߦͨ͠

    View full-size slide

  5. ͜ΕͰϞμϯϑϩϯτΤϯυ
    ։ൃ͸Ұ௨Γ཈͑ͨͰʂ

    View full-size slide

  6. ͦΜͳ;͏ʹߟ͍͑ͯͨ

    ࣌ظ͕Զʹ΋͋Γ·ͨ͠

    View full-size slide

  7. എܠ2: ReactҠߦ@2016ळౙ
    • Knockout -> ReactҠߦ࣌ʹഊ๺Λ஌Δ
    • Reduxʢͷഎܠʹ͋ΔFluxʣ͕Θ͔Βͳ͍
    • APIܦ༝Ͱऔಘͨ͠஋ΛͲ͏࣋ͭ΂͖͔
    • SPAͩͬͨΒRouting΋ߟ͑ͳ͍ͱμϝ΍Μ

    View full-size slide

  8. ͢Έ·ͤΜͰͨ͠

    View full-size slide

  9. ࠓճͷ߹॓ͷ໨త
    • ϑϩϯτΤϯυਂ۷Γ + React Nativeௐࠪ
    • ϒϥ΢βͰಈ͘SPA͸΍Δؾ͕Ͱͳ͔ͬͨ
    • ߹॓લ: Reduxͷಋೖ΍RoutingपΓͷ࣮૷
    • ߹॓த: OAuthΛ࢖ͬͨೝূͷ࣮૷

    View full-size slide

  10. React Native
    • ReactͰωΠςΟϒΞϓϦ͕࡞ΕΔ΍ͭ
    • Facebook͕։ൃʢFB, InstaͰ࢖͍ͬͯΔʣ
    • Ϗϧυ͢ΔͱAndroid / iOSͰಈ͘
    • ը໘͸JSXͱCSSʹࣅͨԿ͔Ͱهड़

    View full-size slide

  11. αϯϓϧ: View component
    /* Logo.css */
    .logo {
    width: 200px;
    height: 200px;
    }
    // index.ios.js
    import React from 'react';
    import { AppRegistry, Text, View } from 'react-native';
    import styles from './styles';
    function AwesomeProject() {
    return (


    Hello, World!


    );
    }
    AppRegistry.registerComponent('AwesomeProject', () =>
    AwesomeProject);

    View full-size slide

  12. αϯϓϧ: Styling
    // styles.ios.js
    import { StyleSheet } from 'react-native';
    export default StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    hello: {
    fontSize: 20,
    },
    });
    ComponentͷϨΠΞ΢τ
    ʹ͸FlexboxΛ࢖͏

    View full-size slide

  13. Ϗϧυ͢Δͱ͜Μͳײ͡
    ※ ॳճͷΈϏϧυ͕ඞཁͰɺҎ߱͸㵰+RͰϦϩʔυͰ͖Δ

    View full-size slide

  14. React Navigation
    • React NativeͷφϏήʔγϣϯϥΠϒϥϦ
    • keyͱComponentͷϚοϓΛఆٛͯ͠࢖͏
    • React NativeެࣜʢͷυΩϡϝϯτʣਪ͠
    • WebͰ͍͏react-router

    View full-size slide

  15. αϯϓϧ
    /* Logo.css */
    .logo {
    width: 200px;
    height: 200px;
    }
    import React, { Component } from 'react';
    import { AppRegistry, Button, Text, View } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import styles from './styles';
    class Home extends Component {
    static navigationOptions = { title: 'Home' };
    render() {
    const { navigate } = this.props.navigation;
    return (

    navigate('Chat')} title="Chat with Rina" />

    );
    }
    }

    const AwesomeProject = StackNavigator({ Home: { screen: Home }, Chat: { screen: Chat }});
    AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
    keyͱComponentͷϚοϓ

    View full-size slide

  16. ςΩετΛλοϓ͢Δͱ
    νϟοτը໘ʹભҠ͢Δ

    View full-size slide

  17. ࣮ࡍʹ΍ͬͯΈͨ

    View full-size slide

  18. ࠓճͷϥΠϒϥϦߏ੒
    • ͪΌΜͱ։ൃ͢Δࡍʹඞཁͦ͏ͳ΋ͷΛબ୒
    • Flux࣮૷: redux, react-redux
    • StoreपΓ: normalizr, reselect
    • Routing: react-navigation

    View full-size slide

  19. ϞμϯϑϩϯτΤϯυ
    • ͪΌΜͱਂ۷ΓͰ͖ͨײ͋ͬͯΑ͔ͬͨ
    • ReduxΛ࢖͏աఔͰFluxͷ֓೦͕ΫϦΞʹ
    • σʔλΛਖ਼نԽͯ͠StoreʹೖΕΔͱ͔
    • Routingͬͯ͜Μͳײ͡Ͱ΍ΔΜͩ

    View full-size slide

  20. React Native
    • ୊ࡐʹωΠςΟϒΞϓϦΛબΜͰྑ͔ͬͨ
    • ԶɺΞϓϦ࡞ΕΔʂͱ୯७ʹײಈ͢Δ
    • SPAͱͯ͠࡞Δ͔͠ͳ͍ͷͰਂ۷ΓͰ͖Δ
    • ͙͢ϦϩʔυͰ͖ΔͷͰɺखΛಈ͔͠ͳ͕Β
    σβΠϯ࡞Δͷʹ޲͍ͯΔ

    View full-size slide

  21. ͱ͸͍͑
    • ߥ໺தͷߥ໺ͩͳʔײ
    • ຊମͱΤίγεςϜ͕·ͩ҆ఆ͍ͯ͠ͳ͍
    • Կ͔͋ͬͨΒ·ͣissueΛ୳͢ମྗ͕ඞཁ
    • ϓϥοτϑΥʔϜݻ༗ʢྫ: Deep Linkʣͷ

    ͱ͜ΖΛ৮Δʹ͸ωΠςΟϒଆͷ஌͕ࣝඞཁ

    View full-size slide

  22. ͓ർΕ͞·Ͱͨ͠ʂ
    ੒Ռ෺: https://github.com/yasaichi/GHFav

    View full-size slide