React Native for Webのこれまでから読み解くReact GUIのこれから

Slide 1

Slide 1 text

React Native for Webͷ ͜Ε·Ͱ͔ΒಡΈͱ͘ React GUIͷ͜Ε͔Β React Native Matsuri 2021 2021.10.2 Yukiya Nakagawa a.k.a Nkzn 1

Slide 2

Slide 2 text

Who am I • Yukiya Nakagawa a.k.a Nkzn (ͳ͔͟Μ) • ৽ׁࡏॅ • ೋࣇͷ෕Ͱ࠺ͷ෉ʢࠓ೔΋ϫϯΦϖҭࣇ͋Γ͕ͱ͏🙏ʣ • ࢿ࢈ӡ༻͓ख఻͍αʔϏεmoneiroͷITཪํ • ٕज़ॻయͷWebϑϩϯτΤϯυˍܾࡁΞϓϦ୲౰ • React 2015ʙ / React Native 2017ʙ 2 0:38

Slide 3

Slide 3 text

2݄ʹຊ͕ग़·ͨ͠ https://amzn.to/3kWRYc0 • 2018೥຤͔Β2020೥Ն·Ͱ CodeZineͰ࿈ࡌ͍ͯͨ͠هࣄͷ૿ ิվగ൛Ͱ͢ • ExpoͰReactΛղઆͯ͠·͢ 3 0:57

Slide 4

Slide 4 text

DroidKaigiͰReact Nativeͷ࿩Λͯͨ͠ਓͰ͢ • https://droidkaigi.github.io/2017/timetable.html • https://droidkaigi.jp/2018/timetable/ 4

Slide 5

Slide 5 text

React GUI͕࿩୊ʹͳΓ·ͨ͠Ͷ 5

Slide 6

Slide 6 text

https://twitter.com/estejs/status/1414259301632385027 2021೥7݄12೔ͷ਒ݯ஍ 6 1:35

Slide 7

Slide 7 text

React GUI͞ΘͬͯΈͨ 7

Slide 8

Slide 8 text

https://ixrvy.sse.codesandbox.io/ 8 2:13

Slide 9

Slide 9 text

Hooks ΞϓϦέʔγϣϯ։ൃͰ஍ຯʹ໾ཱ ͪͦ͏ Ϛ΢ε΍ΩʔϘʔυͷಈ͖Λଊ͑Δ API͕๛෋ͳҹ৅ 9 2:13

Slide 10

Slide 10 text

ྫ͑͹useHoverͰ͜Μͳ͜ͱ͕Ͱ͖Δ 10 2:51

Slide 11

Slide 11 text

useHover import React from "react"; import { useHover } from "react-gui/use-hover"; export default function App() { const [hovered, onHoverChange] = React.useState(false); const ref = useHover({ onHoverChange }); return (

); } • RefྖҬ΁ͷϗόʔΛݕग़ 11

Slide 12

Slide 12 text

͓·͚ useHoverState function useHoverState() { const [hovered, onHoverChange] = useState(false); const ref = useHover({ onHoverChange }); return [ref, hovered]; } ࢖͍΍͘͢ϥοϓ refͱhovered͚ͩެ։ 12

Slide 13

Slide 13 text

Components RNΤϯδχΞ͸ݟ͕֮͑͋Δฒͼ StyleSheet΋͋Δ͠ɺ·͋·͋େ఍ ͷϨΠΞ΢τ͸࡞Εͦ͏ 13 3:48

Slide 14

Slide 14 text

͜Μͳͷ࡞ͬͯΈΔ https://codesandbox.io/s/react-gui-preview-forked-xhws814

Slide 15

Slide 15 text

਌ͷإΑΓݟͨ React NativeͬΆ͞ export default function App() { const [ref, hovered] = useHoverState(); return ( @Nkzn Matsuri 2021 Speaker ); } • View, Text, Image • StyleSheet.create(ޙड़)Ͱ ࡞ͬͨstylesΛࢀর • ελΠϧΛ഑ྻͰϚʔδ 15 4:26

Slide 16

Slide 16 text

਌ͷإΑΓݟͨ React NativeͬΆ͞ export default function App() { const [ref, hovered] = useHoverState(); return ( @Nkzn Matsuri 2021 Speaker ); } • View, Text, Image • StyleSheet.create(ޙड़) Ͱ࡞ͬͨstylesΛࢀর • ελΠϧΛ഑ྻͰϚʔδ 16 4:45

Slide 17

Slide 17 text

Slide 18

Slide 18 text

਌ͷإΑΓ(ུ) const styles = StyleSheet.create({ container: { padding: 24, backgroundColor: "#eee", height: "100vh" }, card: { boxShadow: "2px 2px 4px #ccc", padding: 16, backgroundColor: "#fff", borderRadius: 8, flexDirection: "row", maxWidth: 500, width: "100%", alignSelf: "center" }, thumbImg: { width: 100, height: 100, borderWidth: 1, borderColor: "#ccc", borderRadius: 50, marginRight: 16 }, title: { fontSize: 24, fontWeight: "700" }, description: { color: "#888" } }); ελΠϧʹ࢖͑Δϓϩύ ςΟ͸ϥϯλΠϜґଘ shadowܥ͸boxShadow ը૾Λؙ͘͢Δͷ͸ׂͱ͍ ͭ΋௨Γͷ΍Γํ 18 5:23

Slide 19

Slide 19 text

਌ͷإΑΓ(ུ) card: { boxShadow: "2px 2px 4px #ccc", padding: 16, backgroundColor: "#fff", borderRadius: 8, flexDirection: "row", maxWidth: 500, width: "100%", alignSelf: "center" }, ελΠϧʹ࢖͑Δϓϩύ ςΟ͸ϥϯλΠϜґଘ shadowܥ͸boxShadow ը૾Λؙ͘͢Δͷ͸ׂͱ͍ ͭ΋௨Γͷ΍Γํ 19 5:42

Slide 20

Slide 20 text

਌ͷإΑΓ(ུ) thumbImg: { width: 100, height: 100, borderWidth: 1, borderColor: "#ccc", borderRadius: 50, marginRight: 16 }, ελΠϧʹ࢖͑Δϓϩύ ςΟ͸ϥϯλΠϜґଘ shadowܥ͸boxShadow ը૾Λؙ͘͢Δͷ͸ׂͱ͍ ͭ΋௨Γͷ΍Γํ 20 6:01

Slide 21

Slide 21 text

React NativeͬΆ͘UI͕࡞ΕΔ ϒϥ΢β޲͚ϥΠϒϥϦͰͨ͠ 21

Slide 22

Slide 22 text

͍͔͕Ͱ͔ͨ͠ʁ ʢ΍ͬͯΈͨهࣄ෩ຯͷకΊʣ 22

Slide 23

Slide 23 text

׬ 23

Slide 24

Slide 24 text

׬ Ξόϯऴྃ 24

Slide 25

Slide 25 text

ࠓ೔ͷ͓࿩ • React GUIʹ৮ͬͯΈͨʢࠓऴΘͬͨʣ • React Native for Webͱ͸ • React Native for Web͸ͳͥੜ·Εͨͷ͔ • React GUIͷ͜Ε͔Β 25 7:55

Slide 26

Slide 26 text

Aύʔτ 26

Slide 27

Slide 27 text

React Nativeͱ͍ۙॻ͖ຯͰ ϒϥ΢β޲͚ΞϓϦ͕࡞ΕΔੈք ૣ͘དྷͯ΄͍͠Ͱ͢ΑͶ 27

Slide 28

Slide 28 text

࣮͸ɺطʹ͋ΔΜͰ͢ 28

Slide 29

Slide 29 text

React Native for Web 29

Slide 30

Slide 30 text

https://necolas.github.io/react-native-web/ 30 9:30

Slide 31

Slide 31 text

ݟ͔֮͑͠ͳ͍ ※ ࡉ͔͍ݕূ͸ল͖·͕͢ɺαΠτ಺ͷจݴ΋ಉ͡෦෼͕ଟ͍Ͱ͢ 31

Slide 32

Slide 32 text

React GUI͸React Native for Webͷܥේ • ͲͪΒ΋࡞ऀ͸Nicolas Gallagherࢯ • React GUI͸Facebook໊͚ٛͩͲNPMͳͲͰࢯͷؔΘΓ͕ݟ͑Δ • https://www.npmjs.com/package/react-gui • React NativeͬΆ͍ίʔυΛϒϥ΢βͰಈ͔͢Ξϓϩʔν 32 10:08

Slide 33

Slide 33 text

React Native for WebΛֶͿ͜ͱ͸ React GUIΛֶͿ͜ͱʹܨ͕Δ 33

Slide 34

Slide 34 text

React Native for Web͓͞Β͍ᶃ • https://necolas.github.io/react-native-web/ • 2017೥9݄ʹv0.1.0͕ެ։ • 2017೥4݄ʹϦϦʔε͞ΕͨTwitter Lite (mobile.twitter.com) Ͱ   UIϥΠϒϥϦͱͯ͠࠾༻͞Εͨ • ࡞ऀͷNicolasࢯTwitter LiteϓϩδΣΫτ౰࣌ͷςοΫϦʔυ 34 10:46

Slide 35

Slide 35 text

https://twitter.com/necolas/status/913877194199359488 35

Slide 36

Slide 36 text

༨ஊɿTwitter Liteͷͦͷޙ • ౰ॳ͸εϚϗ޲͚ → λϒϨοτରԠ → σεΫτοϓରԠ → ݱࡏͷ twitter.com 36

Slide 37

Slide 37 text

React Native for Web͓͞Β͍ᶄ • React Nativeͱ΄΅ಉ͡   ίϯϙʔωϯτͱAPIΛ࣋ͭ   JavaScript੡ͷUIϥΠϒϥϦ 37 11:43

Slide 38

Slide 38 text

React Native for Webͷ Α͋͘Δޡղ 38

Slide 39

Slide 39 text

“React Native for Web͸ ϒϥ΢β্ʹReact Native؀ڥΛ࡞Δ ϥΠϒϥϦͰ͋Δ” ͜Ε͸ࣄ࣮Ͱ͸͋Γ·ͤΜ ʢ˞'MVUUFS8FC΍3FBDU/BUJWF%0.͸গ͚ͩͦ͠ΕͬΆ͍ΞϓϩʔνͰ͢ʣ 39

Slide 40

Slide 40 text

ʮReact Nativeʯͷ2ͭͷଆ໘ • UIϥΠϒϥϦͱͯ͠ͷReact Native • ϥϯλΠϜͱͯ͠ͷReact Native 40 12:40

Slide 41

Slide 41 text

UIϥΠϒϥϦͱͯ͠ͷReact Native import { Image, Text, View, StyleSheet } from 'react-native'; 41

Slide 42

Slide 42 text

UIϥΠϒϥϦͱͯ͠ͷReact Native • React੡ͷίϯϙʔωϯτͱɺؔ਺܈ʢAPIʣ • ࠷ऴతʹ͸ωΠςΟϒϒϦοδ/JSIΛݺͼग़͢΋ͷͷɺͦΕҎ֎ͷ෦ ෼͸ී௨ͷJavaScript੡ϥΠϒϥϦ 42 13:18

Slide 43

Slide 43 text

ϥϯλΠϜͱͯ͠ͷReact Native • ωΠςΟϒϓϥοτϑΥʔϜͷ্ͰJavaScriptΤϯδϯΛಈ͔͢ • ϒϦοδ/JSI͔Βͷߋ৽ґཔΛड͚ͯɺωΠςΟϒUIΛߋ৽͢Δ • ϒϦοδ/JSI͔Βͷݺͼग़͠Λड͚ͯɺωΠςΟϒॲཧΛ࣮ߦ͢Δ • ωΠςΟϒॲཧͷ݁ՌΛJavaScriptଆʹ௨஌͢Δ 43 13:37

Slide 44

Slide 44 text

"OESPJE J04 8JOEPXT "OESPJE4%, J044%, 7JTVBM$ 3/"OESPJE3VOUJNF 3/J043VOUJNF 3/8JOEPXT3VOUJNF 3/"OESPJE /BUJWF$PNQPOFOUT"1*T 3/J04 /BUJWF$PNQPOFOUT"1*T 3/8JOEPXT /BUJWF$PNQPOFOUT"1*T 3FBDU/BUJWF+BWB4DSJQU"1* 0VS"XFTPNF"QQMJDBUJPO } } ϥϯλΠϜ (Java, Obj-C, C++) UIϥΠϒϥϦ (JavaScript) 44 13:56 $PNQPOFOU"1*ͷ /BUJWF࣮૷ +4*΍+4&OHJOF

Slide 45

Slide 45 text

React Native for Web͕࠶ݱͨ͠΋ͷ • UIϥΠϒϥϦͱͯ͠ͷReact Native • ϥϯλΠϜͱͯ͠ͷReact Native ͪ͜Β 45

Slide 46

Slide 46 text

React Native for Webͷਖ਼ମ • React Native͸ϥϯλΠϜΛ࠶ݱ͠ͳ͍ • React Nativeͱಉ໊͡લɾಉ͡propsɾಉ͡ݟͨ໨ͷίϯϙʔωϯτ ͕ੜ͍͑ͯΔʢ಺෦࣮૷͸ͨͩͷdiv΍span΍inputʣ • React Nativeͱಉ໊͡લɾಉ͡Ҿ਺ɾಉ͡ڍಈͷAPI͕ੜ͍͑ͯΔ • ͨ·ͨ·React Nativeͱಉ͡ΠϯλʔϑΣʔεΛ͍࣋ͬͯΔ͚ͩͷɺ React Nativeͱ͸ґଘؔ܎ͷͳ͍UIϥΠϒϥϦ 46 14:34

Slide 47

Slide 47 text

"OESPJE J04 8JOEPXT "OESPJE4%, J044%, 7JTVBM$ 3/"OESPJE3VOUJNF 3/J043VOUJNF 3/8JOEPXT3VOUJNF 3/"OESPJE /BUJWF$PNQPOFOUT"1*T 3/J04 /BUJWF$PNQPOFOUT"1*T 3/8JOEPXT /BUJWF$PNQPOFOUT"1*T 3FBDU/BUJWF+BWB4DSJQU"1* 0VS"XFTPNF"QQMJDBUJPO #SPXTFS %0."1*T #VJMUJO'VODUJPOT 3FBDU%0. 3FBDU/BUJWFGPS8FC $PNQPOFOUT"1*T 47 14:53

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

A. Nicolasͷ౒ྗʹΑͬͯ • ͔ͭͯnormalize.cssΛ࡞͍ͬͯͨఔ౓ʹ͸ɺNicolas͸CSSͷঊ • ʮScrollViewͷ಺ଆʹpaddingΛ෇͚͍ͨ৔߹͸ contentContainerStyleΛ࢖͍·͠ΐ͏ʯΈ͍ͨͳڍಈ·Ͱ࠶ݱ͞Εͯ ͍ΔʢڪΔ΂͖มଶͰ͋Δʣ • Yoga͕ͪΌΜͱϒϥ΢βͷڍಈΛ࠶ݱͯ͘͠Ε͍ͯΔͷ΋େ͖͍ 50 15:50

Slide 51

Slide 51 text

React Native for Web͸ͨͩͷUIϥΠϒϥϦ import { Image, Text, View, StyleSheet } from ‘react-native-web’; XFCQBDLͷSFTPMWFBMJBT౳Ͱ ໊લΛޡຐԽͯ͠lSFBDUOBUJWFzͱͯ͠ *NQPSUͰ͖ΔΑ͏ʹ͍ͯ͠Δͷ͕&YQP8FC 51 16:09

Slide 52

Slide 52 text

Bύʔτ 52

Slide 53

Slide 53 text

React Native for Web͸ ͳͥੜ·Εͨͷ͔ 53

Slide 54

Slide 54 text

React NativeΛ ϒϥ΢βͰಈ͔͔ͨͬͨ͠ 54

Slide 55

Slide 55 text

ࢥ͍ग़ͯ͠΄͍͠ Twitter Lite͸Twitter Webۙ୅ԽPJ Twitter͕ࣾRNͷϢʔβʔاۀͩͱ ͍͏࿩Λฉ͍ͨ͜ͱ͕͋Δਓ͸ʁ 55 17:25

Slide 56

Slide 56 text

React Native for Webͷ Ϟνϕʔγϣϯ ※ 2018೥4݄͝ΖʹNicolas͕πΠʔτ͍ͯͨ͠࿩Λݩʹ͍ͯ͠Δͭ΋ΓͰ͕͢ɺ   ۪ஒࠞ͡Γ͍͔ͩͬͨͤπΠফ͠͞Ε͍ͯΔͷͰɺશମతʹʦཁग़యʧͳ͜ͱΛ͝༰͍ࣻͩ͘͞ ※ ΋͠ݟ͕֮͑͋Δ࿩ͩͬͨ৔߹͸ɺTwitter౳Ͱʮݟ͕֮͑͋Δʯͱݴ͍͚ͬͯͨͩΔͱخ͍͠Ͱ͢ 56 17:44

Slide 57

Slide 57 text

ϒϥ΢β͸ຊདྷυΩϡϝϯτϏϡʔΞ http://info.cern.ch/hypertext/WWW/TheProject.html 57

Slide 58

Slide 58 text

GUIΞϓϦͷϓϥοτϑΥʔϜͱͯ͠ੜ·ΕͨΘ͚Ͱ͸ͳ͍ 58 EJWͱTQBOͱJNHʹ༷ʑͳ$44όουϊ΢ϋ΢Λ෇༩ͯ͠ Α͏΍͘·ͱ΋ʹಈ͘ͷ͸ɺ(6*ϑϨʔϜϫʔΫͷମΛ੒͍ͯ͠ͳ͍ ʢϒϥ΢β͸υΩϡϝϯτϏϡʔΞͳͷͰ࢓ํͳ͍ʣ

Slide 59

Slide 59 text

ΞϓϦΛ࡞ΔͳΒ͜͏͍͏ͷཉ͍͠ΑͶ • ೚ҙͷྖҬ಺Λ׳ੑεΫϩʔϧ͍ͨ͠ • ॲཧ଴ͪͷϓϩάϨεόʔΛग़͍ͨ͠ • େྔͷσʔλΛলϝϞϦͰදࣔͰ͖ΔϦετػߏ ΋ͪΖΜϥΠϒϥϦΛೖΕΕ͹Ͱ͖Δ͚Ͳ ͜Μͳ͋Γ;ΕͨػೳΛೖΕΔ͚ͩͳͷʹ ϥΠϒϥϦͷબఆ؟͕ඞཁͳͷ͸ɺଟ͘ͷਓʹͱͬͯਏ͍ 59 18:41

Slide 60

Slide 60 text

React DOM޲͚ͷ ඪ४GUIπʔϧΩοτ͕ཉ͍͠ ʢjQueryʹର͢ΔjQuery UIΈ͍ͨͳʣ 60

Slide 61

Slide 61 text

͓΍ɺ͜Μͳͱ͜Ζʹ੔ཧ͞ΕͨGUI͕ • ೚ҙͷྖҬ಺Λ׳ੑεΫϩʔϧ͍ͨ͠ • → ScrollView • ॲཧ଴ͪͷϓϩάϨεόʔΛग़͍ͨ͠ • → ProgressBar, ActivityIndicator • େྔͷσʔλΛলϝϞϦͰදࣔͰ͖ΔϦετػߏ • → FlatList 61 19:19

Slide 62

Slide 62 text

React NativeͷAPI͸Α͘Ͱ͖ͯΔʦཁग़యʧ • ͦͷདྷྺ͔ΒɺiOS SDKͱAndroid SDKͷ࠷େެ໿Λࢤ޲͍ͯ͠Δ • iOSઌߦͰ࡞ΒΕͨͷͰɺ໋໊͕iOSدΓͰ͸͋Δ • for Windows΍for macOS͕࣮૷͞Εͨ఺͔Β΋APIσβΠϯͷ൚༻ੑ ͕Ӑ͍஌ΕΔʢ΄Μͱ͔……ʁʣ • GUIΞϓϦέʔγϣϯ࡞Γʹదͨ͠ϑϨʔϜϫʔΫΛ࡞ΔͳΒɺAPI ͱͯ͠React NativeΛਅࣅΔͷ͸ѱ͘ͳ͍Ξϓϩʔν 62 19:38

Slide 63

Slide 63 text

React Native for WebͷϞνϕʔγϣϯ React DOM޲͚ͷ ඪ४GUIπʔϧΩοτͱͯ͠ React NativeΫϩʔϯΛ࡞Ζ͏ʂ 63

Slide 64

Slide 64 text

Slide 65

Slide 65 text

React Native for WebͷϞνϕʔγϣϯ • React DOMͷੈքʹ΋શ෦ೖΓGUIπʔϧΩοτ͕ཉ͍͠ • ෳ਺ϓϥοτϑΥʔϜͷதͰୟ্͖͛ΒΕͨɺReact NativeͷதཱతͳAPIσβΠϯ Λϒϥ΢βʹ΋औΓࠐΜͰΈΑ͏ • CSSͷࠇຐज़Λ֮͑ͳͯ͘΋ҰൠతͳGUIΞϓϦέʔγϣϯΛ૊ΊΔΑ͏ʹͳΔͧʂ • ͦΕͰ͍ͯσβΠϯ্ͷΦϐχΦϯ͸ͳ͍ͷͰɺ޷͖ͳσβΠϯͷUIϥΠϒϥϦΛඃ ͤΒΕΔͧʂʢReact Native Paperͱ͔NativeBaseͱ͔࢖͑Δʣ • WAI-ARIA࢓༷ͷAccessibilityରԠ͕΍Γ΍͍͢Α͏ʹ഑ྀ͢Δ $IBLSB6*ͱͷҧ͍ 65 20:35

Slide 66

Slide 66 text

Accessibility React NativeຊՈͷaccessibilityܥ APIΛΞϨϯδͨ͠ܗͰɺWAI-ARIA ରԠ΍ηϚϯςΟοΫWebରԠΛ ߦ͍ͬͯΔ 66 20:54

Slide 67

Slide 67 text

StyleSheet ελΠϧ͸ՄೳͳݶΓখ͘͞෼ׂ͞ ΕͯɺελΠϧͷ಺༰͔Βੜ੒͞Ε ͨΫϥε໊Λ༩͑ΒΕΔ ՄೳͳݶΓॏෳഉআ͞ΕΔͷͰόϯ υϧੑೳ͕ߴ͍ ༗໊ແ࣮Խͨ͠ɺຊՈͷ StyleSheet.createΑΓ༏ल 67 21:13

Slide 68

Slide 68 text

୤ग़ϋονͷ ࡞Γ΍͢͞ import React, { useCallback } from 'react'; import { View } from 'react-native'; import { useDropzone } from 'react-dropzone'; export type Props = { onFileSelected: (file: File) => void; }; export const UploadProductDlc: React.FC = ({ onFileSelected }) => { const onDrop = useCallback( (acceptedFiles) => { if (!acceptedFiles || acceptedFiles.length === 0) return; onFileSelected(acceptedFiles[0]); }, [onFileSelected] ); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: [ 'application/pdf' ], }); return (

ϑΝΠϧΛ௥Ճ͢Δ (࠷େ500MB·Ͱʣ

); }; React Nativeͷख๏Ͱղܾ͢Δͷ ͕໘౗ʹͳͬͨΒɺϒϥ΢βͷख ๏ʹಀ͛ͯ΋͍͍ ීஈͱҧͬͯϒϦοδ͕͍Βͳ͍ ࣮ՈͷΑ͏ͳ҆৺ײ ϒϥ΢β޲͚ϥΠϒϥϦ 7JFXͷதʹEJWΛஔ͍ͯ΋͍͍ UploadProductDlc.web.tsx 68 21:32

Slide 69

Slide 69 text

ٕज़ॻయWebͰ࣮ࡍʹ࢖͍ͬͯ·͢ 69 21:51

Slide 70

Slide 70 text

Αͦ͞͏ 70

Slide 71

Slide 71 text

͔͠͠React Native for Web͸ ʮReact Nativeʯ ͱ͍͏໊લͰଛ͕ͪ͠ 71 22:29

Slide 72

Slide 72 text

React NativeϥϯλΠϜͷͨΊͷ πʔϧͩͱצҧ͍͞Εͯ Web։ൃऀʹ͸ݟ޲͖΋͞Εͳ͍ ʢʮຊ຤స౗ͩʯͱ͍͏ẍস·ͰඈΜͰ͘Δ࢝຤ʣ ʢNicolas͕۪ஒͬͯπΠফ͢͠ΔݪҼʣ 72 22:48

Slide 73

Slide 73 text

- 2018.3.6 @Necolas “React Native͕ɺWeb։ൃऀʹͱͬͯ࠷΋೉͠ ͍GUIͷ໰୊ͷଟ͘Λ͢Ͱʹղܾ͍ͯ͠Δ͜ͱ ΛɺͲ͏΍ͬͯWeb։ൃऀʹೲಘͤ͞Δͷ͔ʁ աڈʹ໭ͬͯɺReact DOMͷલʹReact NativeΛ ϦϦʔε͢Δʁ΋ͬͱ؆୯ͳํ๏͸ͳ͍ͷ͔…” 73 23:07 https://twilog.org/Nkzn/date-180306

Slide 74

Slide 74 text

·໋໊͕͋ѱ͍ • ໊લ͕Ͳ͏ͯ͠΋ΠϩϞϊײΛग़ͯ͠͠·͏ • Nicolas΋໊લͷѱ͞͸Θ͔͍ͬͯΔΑ͏ͩͬͨʦཁग़యʧ • ʮ͍ͬͦReact Nativeଆ໊͕લΛม͑ͯ͘ΕͨΒ͍͍ʯ·Ͱݴͬͯͨ ؾ͕͢Δ   ʢUIϥΠϒϥϦͱͯ͠ͷReact Nativeʹผͷ໊લΛ͚ͭͯ΄͍͠ɺ   ɹ͘Β͍ͷχϡΞϯεʣ 74 23:26

Slide 75

Slide 75 text

Reactʹ͸GUIπʔϧΩοτ͕ඞཁ 75

Slide 76

Slide 76 text

Reactʹ͸GUIπʔϧΩοτ͕ඞཁ React GUI 76

Slide 77

Slide 77 text

React GUI 77

Slide 78

Slide 78 text

React GUI͸ React Native for Webͷҟੈքసੜ ʢ͔΋͠Εͳ͍ʣ 78 24:42

Slide 79

Slide 79 text

Cύʔτ 79

Slide 80

Slide 80 text

React GUI͸ React Native for Webͷ ϦϒϥϯσΟϯάͳͷ͔ 80

Slide 81

Slide 81 text

Θ͟Θ͟Facebook໊ٛͰग़ͯ͜ΒΕΔͱ ظ଴΋ߴ·Δͱ͍͏΋ͷ 81

Slide 82

Slide 82 text

ظ଴͕ߴ·Γ͗ͯ͢DiscussionΛཱͯͨਓ͕͍·ͨ͠ https://github.com/reactwg/react-18/discussions/71 82

Slide 83

Slide 83 text

ޚେ͔Βͷճ౴ ·ͩݸਓతͳ࣮ݧϓϩδΣΫτͰ͋Δ FBͷ஥ؒͱڞ༗ͨͯ͘͠FBͷϦϙδτϦʹ্͚͛ͨͩ ΦϑΟγϟϧʹͳΔ༧ఆ͸·ͩͳ͍ ͍͔ͭ͘ͷΞΠσΞ͸React Native for WebʹϑΟʔυόοΫͨ͠Γ   React NativeνʔϜͱ࿩͠߹ͬͨΓ͍ͯ͠Δ 83 26:17

Slide 84

Slide 84 text

·ͩReact GUIͷ࣌୅͸དྷͳ͍Β͍͠ 84

Slide 85

Slide 85 text

React GUIʹظ଴͢Δະདྷ 85

Slide 86

Slide 86 text

React Nativeͷ࿮૊ΈͰ͸Ͱ͖ͳ͔ͬͨ͜ͱ • iOS΍Androidͱ͍ͬͨλονσόΠεΛલఏʹ࡞ΒΕͨͨΊɺ   ϙΠϯςΟϯάσόΠε΁ͷߟྀ͕͔ͳΓബ͍ • ೖྗͷϑΥʔΧεҠಈ΍ΩʔϘʔυγϣʔτΧοτɺ΢Οϯυ΢αΠ ζͷΧδϡΞϧͳมߋͳͲ΋ಉ༷ • React NativeͷAPI͔Βେ͖͘ҳ୤͢Δ͜ͱ͸Ͱ͖ͳ͍தͰ͸ରԠʹ ݶ౓͕͋ͬͨʢ@types/react-nativeͰܕ෇͚ͯ͠Δ͠Ͷʣ 86 27:14

Slide 87

Slide 87 text

React GUIͳΒͰ͖Δ σεΫτοϓ޲͚Hooksͷݟຊࢢ React Native for WebͰ΋΍Γ͔ͬ ͨΜͩΖ͏ͳ͋…… 87

Slide 88

Slide 88 text

طଘͷRNϑΝϛϦʔ΋ϙΠϯςΟϯάσόΠε ͱແؔ܎Ͱ͸ͳ͍ https://microsoft.github.io/react-native-windows/ https://www.gizmodo.jp/2020/03/ipados-13-4-release.html https://www.google.co.jp/intl/ja_jp/chromebook/ 88 27:52

Slide 89

Slide 89 text

΋͔ͯ͠͠ • React NativeνʔϜʹϑΟʔυόοΫ͍ͯ͠Δ಺༰ͱ͍͏ͷ͸ɺ   ϙΠϯςΟϯάσόΠε౳ͷσεΫτοϓ޲͚API……ʁ • useHover౳ΛReact NativeຊମʹऔΓࠐ·ͤͯɺReact Native for WebΛΑΓσεΫτοϓ޲͚ʹਐԽͤ͞Δͭ΋ΓͰ͸……ʁ • ͠ΒΜ͚Ͳ 89 28:11

Slide 90

Slide 90 text

React Native for Web   ެࣜΞΧ΢ϯτΛνΣοΫ https://twitter.com/ReactWeb 8/27ʹͰ͖ͯͨ @ReactNativeWebʹ͠ͳ͔ͬͨ͋ͨΓ ʹNicolasͷࣥ೦Λײ͡Δ ͍͔ͭReact Native for WebͱReact GUI ͕౷߹ͯ͠React WebʹͳΔΜͩΖ͏͔ 90 28:30

Slide 91

Slide 91 text

͔͜͜Βઌ͸܅ͷ໨Ͱ͔֬Ίͯ͘Εʂ 91