React Native ❤️ Web

2019.6.29の #bigLT2019_aizu で話しました

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