React Native ❤️ Web

2019.6.29の #bigLT2019_aizu で話しました

Transcript

1. React Native ❤ Web ΢Υʔλʔηϧגࣜձࣾ த઒ ޾࠸ #bigLT2019_aizu
2. Yukiya Nakagawa / ͳ͔͟Μ ձ௡େֶ13ظੜʢ32ࡀʣ ৽ׁͰAgriTech΍ͬͯΔΑʂ AndroidΤϯδχΞ
 ϞόΠϧدΓJSΤϯδχΞ
3. ͨ·ʹ೶஍ʹग़·͢ https://water-cell.jp/recruit/
4. ͬ͘͟ΓReact Native
5. Reactͱ͸ • JavaScript޲͚ͷUIঢ়ଶ؅ཧϥΠϒϥϦ • Facebook͕ࣾΦʔφʔ • ϒϥ΢β޲͚ඳըϥΠϒϥϦͷReact DOM ΍ɺϞόΠϧΞϓϦ޲͚ඳըϥΠϒϥϦͷ React Nativeͱซ༻͢Δ
6. f(x) = UI / ؔ਺ͱͯ͠ͷUI import React from 'react'; import { View, TextInput, Button } from 'react-native'; export function LoginForm(props) { return ( <View> <TextInput placeholder="User ID" /> <TextInput placeholder="Password" /> <Button title="ϩάΠϯ" /> </View> ); } JSX -PHJO'PSNίϯϙʔωϯτͷ࣮૷
7. https://codezine.jp/article/detail/11295
8. Learn Once, Write Anywhere
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/
10. Anywhereͬͯݴ͏ͳΒ Web΋React NativeͰ
 ॻ͖ͨ͘ͳ͍Ͱ͔͢ʂʁ
11. React Native for Web
12. ϒϥ΢β޲͚Reactͷ໰୊఺ • <div>΍<input>ͱ͍ͬͨHTMLͷཁૉ΍
 CSSΛ૊Έ߹ΘͤͯUIΛߏங͍ͯ͘͠ • HTMLͷλά͸ΞϓϦͷUIߏஙʹͦ͜·Ͱ޲͍ ͍ͯͳ͍ React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ - φΧβϯυοτωοτ https://blog.nkzn.info/entry/2018/05/29/210030
13. React Nativeͷ৔߹ • ΞϓϦΛ։ൃ͢Δࡍʹ࠷௿ݶඞཁͳը໘෦඼ ͕ἧ͍ͬͯΔ
15. JavaScript࣮ߦϛυϧ΢ΣΞ ͱͯ͠ͷReact Nativeͱ͸ผʹ UIϑϨʔϜϫʔΫͱͯ͠ͷ React Nativeͷཻ౓ׂ͕ͱଥ౰
16. “ͦΕͳΒಉཻ͡౓Ͱ Web޲͚ͷίϯϙʔωϯτ΋ ࡞Ε͹ศརͳͷͰ͸”
17. export function View(props) { return ( <div>{props.children}</div> ); } export function Text(props) { return ( <span>{props.children}</span> ); } React Nativeͱಉ໊͡લͰϒϥ΢β޲͚ ίϯϙʔωϯτΛ࣮૷͢Δ
18. React Native for Web https://github.com/necolas/react-native-web
20. React Native for Web͕ ࣮༻͞Ε͍ͯΔ શੈքͰ༗໊ͳWebαʔϏε
22. Twitter͸ʂ React Native for WebͰʂ ॻ͔Ε͍ͯΔʂʂʂʂ https://twitter.com/necolas/status/913877194199359488 ˞5XJUUFSࣾͰ৽6*νʔϜͷςοΫϦʔυΛͯͨ͠ਓ͕3FBDU
    /BUJWF
    GPS
    8FCͷ࡞ऀ
24. ࢖͍ํ import React from 'react'; import { View, TextInput, Button } from ‘react-native-web’; export function LoginForm(props) { return ( <View> <TextInput placeholder="User ID" /> <TextInput placeholder="Password" /> <Button title="ϩάΠϯ" /> </View> ); } ϒϥ΢β޲͚ͷ؀ڥͰ react-native-webϞδϡʔϧΛ࢖͏
25. Ϗϧυ৬ਓ޲͚ͷઆ໌ • Webpack΍BabelϓϥάΠϯͰϞδϡʔϧ໊ ΛޡຐԽͯ͠ɺιʔείʔυ্͸
 “react-native“ ϞδϡʔϧΛ࢖͍ͬͯΔΑ͏ʹ ݟ͔͚ͤΔ͜ͱ΋Ͱ͖·͢ • ϞόΠϧΞϓϦ޲͚UIͱWebΞϓϦ޲͚UIΛ ͋Δఔ౓͸ڞ௨ԽͰ͖Δ
26. ۀ຿Ͱ࢖ͬͯΈ·ͨ͠ • React Native for WebΛϓϩμΫγϣϯͰ࢖ͬ ͯΈ·ͨ͠ - WaterCell Developer’s Blog
 https://watercelldev.hatenablog.jp/entry/ 2018/07/18/122604 • ϒϥ΢β൛ͱAndroid൛Ͱ78%ͷTypeScript ίʔυΛڞ༗Ͱ͖ͨ
27. ࢼͯ͠Έ͍ͨํ • React Nativeͷ֦ுπʔϧ܈Ͱ͋ΔExpo͕ɺ ϒϥ΢βλʔήοτΛϏϧυ͢ΔͨΊͷπʔ ϧͱͯ͠React Native for WebΛ࠾༻ͨ͠ • expo-cliΛnpmͰΠϯετʔϧͯ͠ɺexpo init ίϚϯυΛୟ͚͹ɺϒϥ΢βରԠࡁΈͷΞϓ Ϧ։ൃϓϩδΣΫτ͕࡞ΕΔ
28. σϞ ʢ࣌ؒ͋Ε͹ʣ
29. ·ͱΊ • React NativeͰΞϓϦΛॻ͚ΔͱɺAndroidɺ iOSɺϒϥ΢βͰΞϓϦΛॻ͚Δɺͱ͍͏ੈք ʹͳ͖͍ͬͯͯΔ • ͍ΖΜͳϓϥοτϑΥʔϜʹΞϓϦΛఏڙ͠ ͍ͨਓʹ͸໘ന͍෼໺ʹͳ͍ͬͯ·͢Αʂ
30. We are hiring!
31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠