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