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

React Native ❤️ Web

React Native ❤️ Web

2019.6.29の #bigLT2019_aizu で話しました

Yukiya Nakagawa

June 29, 2019
Tweet

More Decks by Yukiya Nakagawa

Other Decks in Technology

Transcript

  1. React Native ❤
    Web
    ΢Υʔλʔηϧגࣜձࣾ த઒ ޾࠸
    #bigLT2019_aizu

    View Slide

  2. Yukiya Nakagawa / ͳ͔͟Μ
    ձ௡େֶ13ظੜʢ32ࡀʣ
    ৽ׁͰAgriTech΍ͬͯΔΑʂ
    AndroidΤϯδχΞ

    ϞόΠϧدΓJSΤϯδχΞ

    View Slide

  3. ͨ·ʹ೶஍ʹग़·͢
    https://water-cell.jp/recruit/

    View Slide

  4. ͬ͘͟ΓReact Native

    View Slide

  5. Reactͱ͸
    • JavaScript޲͚ͷUIঢ়ଶ؅ཧϥΠϒϥϦ
    • Facebook͕ࣾΦʔφʔ
    • ϒϥ΢β޲͚ඳըϥΠϒϥϦͷReact DOM
    ΍ɺϞόΠϧΞϓϦ޲͚ඳըϥΠϒϥϦͷ
    React Nativeͱซ༻͢Δ

    View Slide

  6. f(x) = UI / ؔ਺ͱͯ͠ͷUI
    import React from 'react';
    import { View, TextInput, Button } from 'react-native';
    export function LoginForm(props) {
    return (

    placeholder="User ID" />
    placeholder="Password" />


    );
    } JSX
    -PHJO'PSNίϯϙʔωϯτͷ࣮૷

    View Slide

  7. https://codezine.jp/article/detail/11295

    View Slide

  8. Learn Once, Write Anywhere

    View Slide

  9. Learn Once, Write Anywhere
    • React Nativeͷίϯηϓτͷͻͱͭ
    • JavaͷεϩʔΨϯͷͻͱͭͰ͋ΔʮWrite
    Once, Run AnywhereʯΛ΋ͬͨ͡΋ͷ
    • Reactֶ͑͞΂͹ɺ͍ΖΜͳϓϥοτϑΥʔϜ
    ޲͚ʹίʔυ͕ॻ͚Δ
    https://code.fb.com/android/react-native-bringing-modern-web-techniques-to-mobile/

    View Slide

  10. Anywhereͬͯݴ͏ͳΒ
    Web΋React NativeͰ

    ॻ͖ͨ͘ͳ͍Ͱ͔͢ʂʁ

    View Slide

  11. React Native for Web

    View Slide

  12. ϒϥ΢β޲͚Reactͷ໰୊఺
    • ΍ͱ͍ͬͨHTMLͷཁૉ΍

    CSSΛ૊Έ߹ΘͤͯUIΛߏங͍ͯ͘͠
    • HTMLͷλά͸ΞϓϦͷUIߏஙʹͦ͜·Ͱ޲͍
    ͍ͯͳ͍
    React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ - φΧβϯυοτωοτ
    https://blog.nkzn.info/entry/2018/05/29/210030

    View Slide

  13. React Nativeͷ৔߹
    • ΞϓϦΛ։ൃ͢Δࡍʹ࠷௿ݶඞཁͳը໘෦඼
    ͕ἧ͍ͬͯΔ

    View Slide

  14. View Slide

  15. JavaScript࣮ߦϛυϧ΢ΣΞ
    ͱͯ͠ͷReact Nativeͱ͸ผʹ
    UIϑϨʔϜϫʔΫͱͯ͠ͷ
    React Nativeͷཻ౓ׂ͕ͱଥ౰

    View Slide

  16. “ͦΕͳΒಉཻ͡౓Ͱ
    Web޲͚ͷίϯϙʔωϯτ΋
    ࡞Ε͹ศརͳͷͰ͸”

    View Slide

  17. export function View(props) {
    return (
    {props.children}
    );
    }
    export function Text(props) {
    return (
    {props.children}
    );
    }
    React Nativeͱಉ໊͡લͰϒϥ΢β޲͚
    ίϯϙʔωϯτΛ࣮૷͢Δ

    View Slide

  18. React Native for Web
    https://github.com/necolas/react-native-web

    View Slide

  19. View Slide

  20. React Native for Web͕
    ࣮༻͞Ε͍ͯΔ
    શੈքͰ༗໊ͳWebαʔϏε

    View Slide

  21. View Slide

  22. Twitter͸ʂ
    React Native for WebͰʂ
    ॻ͔Ε͍ͯΔʂʂʂʂ
    https://twitter.com/necolas/status/913877194199359488
    ˞5XJUUFSࣾͰ৽6*νʔϜͷςοΫϦʔυΛͯͨ͠ਓ͕3FBDU/BUJWFGPS8FCͷ࡞ऀ

    View Slide

  23. View Slide

  24. ࢖͍ํ
    import React from 'react';
    import { View, TextInput, Button } from ‘react-native-web’;
    export function LoginForm(props) {
    return (

    placeholder="User ID" />
    placeholder="Password" />


    );
    }
    ϒϥ΢β޲͚ͷ؀ڥͰ
    react-native-webϞδϡʔϧΛ࢖͏

    View Slide

  25. Ϗϧυ৬ਓ޲͚ͷઆ໌
    • Webpack΍BabelϓϥάΠϯͰϞδϡʔϧ໊
    ΛޡຐԽͯ͠ɺιʔείʔυ্͸

    “react-native“ ϞδϡʔϧΛ࢖͍ͬͯΔΑ͏ʹ
    ݟ͔͚ͤΔ͜ͱ΋Ͱ͖·͢
    • ϞόΠϧΞϓϦ޲͚UIͱWebΞϓϦ޲͚UIΛ
    ͋Δఔ౓͸ڞ௨ԽͰ͖Δ

    View Slide

  26. ۀ຿Ͱ࢖ͬͯΈ·ͨ͠
    • React Native for WebΛϓϩμΫγϣϯͰ࢖ͬ
    ͯΈ·ͨ͠ - WaterCell Developer’s Blog

    https://watercelldev.hatenablog.jp/entry/
    2018/07/18/122604
    • ϒϥ΢β൛ͱAndroid൛Ͱ78%ͷTypeScript
    ίʔυΛڞ༗Ͱ͖ͨ

    View Slide

  27. ࢼͯ͠Έ͍ͨํ
    • React Nativeͷ֦ுπʔϧ܈Ͱ͋ΔExpo͕ɺ
    ϒϥ΢βλʔήοτΛϏϧυ͢ΔͨΊͷπʔ
    ϧͱͯ͠React Native for WebΛ࠾༻ͨ͠
    • expo-cliΛnpmͰΠϯετʔϧͯ͠ɺexpo init
    ίϚϯυΛୟ͚͹ɺϒϥ΢βରԠࡁΈͷΞϓ
    Ϧ։ൃϓϩδΣΫτ͕࡞ΕΔ

    View Slide

  28. σϞ
    ʢ࣌ؒ͋Ε͹ʣ

    View Slide

  29. ·ͱΊ
    • React NativeͰΞϓϦΛॻ͚ΔͱɺAndroidɺ
    iOSɺϒϥ΢βͰΞϓϦΛॻ͚Δɺͱ͍͏ੈք
    ʹͳ͖͍ͬͯͯΔ
    • ͍ΖΜͳϓϥοτϑΥʔϜʹΞϓϦΛఏڙ͠
    ͍ͨਓʹ͸໘ന͍෼໺ʹͳ͍ͬͯ·͢Αʂ

    View Slide

  30. We are hiring!

    View Slide

  31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide