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ͬͯݴ͏ͳΒ Web΋React 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

Ϗϧυ৬ਓ޲͚ͷઆ໌ • Webpack΍BabelϓϥάΠϯͰϞδϡʔϧ໊ ΛޡຐԽͯ͠ɺιʔείʔυ্͸
 “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

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