2019.6.29の #bigLT2019_aizu で話しました
React Native ❤WebΥʔλʔηϧגࣜձࣾ த ࠸#bigLT2019_aizu
View Slide
Yukiya Nakagawa / ͳ͔͟Μձେֶ13ظੜʢ32ࡀʣ৽ׁͰAgriTechͬͯΔΑʂAndroidΤϯδχΞ ϞόΠϧدΓJSΤϯδχΞ
ͨ·ʹʹग़·͢https://water-cell.jp/recruit/
ͬ͘͟ΓReact Native
Reactͱ• JavaScript͚ͷUIঢ়ଶཧϥΠϒϥϦ• Facebook͕ࣾΦʔφʔ• ϒϥβ͚ඳըϥΠϒϥϦͷReact DOMɺϞόΠϧΞϓϦ͚ඳըϥΠϒϥϦͷReact Nativeͱซ༻͢Δ
f(x) = UI / ؔͱͯ͠ͷUIimport React from 'react';import { View, TextInput, Button } from 'react-native';export function LoginForm(props) {return (placeholder="User ID" />placeholder="Password" />);} JSX-PHJO'PSNίϯϙʔωϯτͷ࣮
https://codezine.jp/article/detail/11295
Learn Once, Write Anywhere
Learn Once, Write Anywhere• React Nativeͷίϯηϓτͷͻͱͭ• JavaͷεϩʔΨϯͷͻͱͭͰ͋ΔʮWriteOnce, Run AnywhereʯΛͬͨ͡ͷ• Reactֶ͑͞ɺ͍ΖΜͳϓϥοτϑΥʔϜ͚ʹίʔυ͕ॻ͚Δhttps://code.fb.com/android/react-native-bringing-modern-web-techniques-to-mobile/
Anywhereͬͯݴ͏ͳΒWebReact NativeͰ ॻ͖ͨ͘ͳ͍Ͱ͔͢ʂʁ
React Native for Web
ϒϥβ͚Reactͷ• ͱ͍ͬͨHTMLͷཁૉ CSSΛΈ߹ΘͤͯUIΛߏங͍ͯ͘͠• HTMLͷλάΞϓϦͷUIߏஙʹͦ͜·Ͱ͍͍ͯͳ͍React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ - φΧβϯυοτωοτhttps://blog.nkzn.info/entry/2018/05/29/210030
React Nativeͷ߹• ΞϓϦΛ։ൃ͢Δࡍʹ࠷ݶඞཁͳը໘෦͕ἧ͍ͬͯΔ
JavaScript࣮ߦϛυϧΣΞͱͯ͠ͷReact NativeͱผʹUIϑϨʔϜϫʔΫͱͯ͠ͷReact Nativeͷׂཻ͕ͱଥ
“ͦΕͳΒಉཻ͡ͰWeb͚ͷίϯϙʔωϯτ࡞ΕศརͳͷͰ”
export function View(props) {return ({props.children});}export function Text(props) {return ({props.children});}React Nativeͱಉ໊͡લͰϒϥβ͚ίϯϙʔωϯτΛ࣮͢Δ
React Native for Webhttps://github.com/necolas/react-native-web
React Native for Web͕࣮༻͞Ε͍ͯΔશੈքͰ༗໊ͳWebαʔϏε
TwitterʂReact Native for WebͰʂॻ͔Ε͍ͯΔʂʂʂʂhttps://twitter.com/necolas/status/913877194199359488˞5XJUUFSࣾͰ৽6*νʔϜͷςοΫϦʔυΛͯͨ͠ਓ͕3FBDU/BUJWFGPS8FCͷ࡞ऀ
͍ํ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ϞδϡʔϧΛ͏
Ϗϧυ৬ਓ͚ͷઆ໌• WebpackBabelϓϥάΠϯͰϞδϡʔϧ໊ΛޡຐԽͯ͠ɺιʔείʔυ্ “react-native“ ϞδϡʔϧΛ͍ͬͯΔΑ͏ʹݟ͔͚ͤΔ͜ͱͰ͖·͢• ϞόΠϧΞϓϦ͚UIͱWebΞϓϦ͚UIΛ͋Δఔڞ௨ԽͰ͖Δ
ۀͰͬͯΈ·ͨ͠• React Native for WebΛϓϩμΫγϣϯͰͬͯΈ·ͨ͠ - WaterCell Developer’s Blog https://watercelldev.hatenablog.jp/entry/2018/07/18/122604• ϒϥβ൛ͱAndroid൛Ͱ78%ͷTypeScriptίʔυΛڞ༗Ͱ͖ͨ
ࢼͯ͠Έ͍ͨํ• React Nativeͷ֦ுπʔϧ܈Ͱ͋ΔExpo͕ɺϒϥβλʔήοτΛϏϧυ͢ΔͨΊͷπʔϧͱͯ͠React Native for WebΛ࠾༻ͨ͠• expo-cliΛnpmͰΠϯετʔϧͯ͠ɺexpo initίϚϯυΛୟ͚ɺϒϥβରԠࡁΈͷΞϓϦ։ൃϓϩδΣΫτ͕࡞ΕΔ
σϞʢ࣌ؒ͋Εʣ
·ͱΊ• React NativeͰΞϓϦΛॻ͚ΔͱɺAndroidɺiOSɺϒϥβͰΞϓϦΛॻ͚Δɺͱ͍͏ੈքʹͳ͖͍ͬͯͯΔ• ͍ΖΜͳϓϥοτϑΥʔϜʹΞϓϦΛఏڙ͍ͨ͠ਓʹ໘ന͍ʹͳ͍ͬͯ·͢Αʂ
We are hiring!
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠