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

React Native Matsuri 2021で発表したスライドです。
https://reactnative-matsuri.com/ja

Transcript

1. React Native for Webͷ ͜Ε·Ͱ͔ΒಡΈͱ͘ React GUIͷ͜Ε͔Β React Native Matsuri 2021 2021.10.2 Yukiya Nakagawa a.k.a Nkzn 1
2. Who am I • Yukiya Nakagawa a.k.a Nkzn (ͳ͔͟Μ) • ৽ׁࡏॅ • ೋࣇͷ෕Ͱ࠺ͷ෉ʢࠓ೔΋ϫϯΦϖҭࣇ͋Γ͕ͱ͏🙏ʣ • ࢿ࢈ӡ༻͓ख఻͍αʔϏεmoneiroͷITཪํ • ٕज़ॻయͷWebϑϩϯτΤϯυˍܾࡁΞϓϦ୲౰ • React 2015ʙ / React Native 2017ʙ 2 0:38
3. 2݄ʹຊ͕ग़·ͨ͠ https://amzn.to/3kWRYc0 • 2018೥຤͔Β2020೥Ն·Ͱ CodeZineͰ࿈ࡌ͍ͯͨ͠هࣄͷ૿ ิվగ൛Ͱ͢ • ExpoͰReactΛղઆͯ͠·͢ 3 0:57
4. DroidKaigiͰReact Nativeͷ࿩Λͯͨ͠ਓͰ͢ • https://droidkaigi.github.io/2017/timetable.html • https://droidkaigi.jp/2018/timetable/ 4
5. React GUI͕࿩୊ʹͳΓ·ͨ͠Ͷ 5
6. https://twitter.com/estejs/status/1414259301632385027 2021೥7݄12೔ͷ਒ݯ஍ 6 1:35
7. React GUI͞ΘͬͯΈͨ 7
8. https://ixrvy.sse.codesandbox.io/ 8 2:13
9. Hooks ΞϓϦέʔγϣϯ։ൃͰ஍ຯʹ໾ཱ ͪͦ͏ Ϛ΢ε΍ΩʔϘʔυͷಈ͖Λଊ͑Δ API͕๛෋ͳҹ৅ 9 2:13
10. ྫ͑͹useHoverͰ͜Μͳ͜ͱ͕Ͱ͖Δ 10 2:51
11. 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 ( <div ref={ref} style={{ width: 200, height: 200, margin: "50px auto", border: "1px solid black", backgroundColor: hovered ? "orange" : null }} /> ); } • RefྖҬ΁ͷϗόʔΛݕग़ 11
12. ͓·͚ useHoverState function useHoverState() { const [hovered, onHoverChange] = useState(false); const ref = useHover({ onHoverChange }); return [ref, hovered]; } ࢖͍΍͘͢ϥοϓ refͱhovered͚ͩެ։ 12
13. Components RNΤϯδχΞ͸ݟ͕֮͑͋Δฒͼ StyleSheet΋͋Δ͠ɺ·͋·͋େ఍ ͷϨΠΞ΢τ͸࡞Εͦ͏ 13 3:48
14. ͜Μͳͷ࡞ͬͯΈΔ https://codesandbox.io/s/react-gui-preview-forked-xhws814
15. ਌ͷإΑΓݟͨ React NativeͬΆ͞ export default function App() { const [ref, hovered] = useHoverState(); return ( <View style={styles.container}> <View ref={ref} style={[ styles.card, { backgroundColor: hovered ? "#ffa" : "#fff" } ]} > <Image source={imageUrl} style={styles.thumbImg} /> <View style={{ justifyContent: "center" }}> <Text accessibilityRole="heading" accessibilityLevel={3} style={styles.title} > @Nkzn </Text> <View style={{ height: 8 }} /> <Text style={styles.description}> Matsuri 2021 Speaker </Text> </View> </View> </View> ); } • View, Text, Image • StyleSheet.create(ޙड़)Ͱ ࡞ͬͨstylesΛࢀর • ελΠϧΛ഑ྻͰϚʔδ 15 4:26
16. ਌ͷإΑΓݟͨ React NativeͬΆ͞ export default function App() { const [ref, hovered] = useHoverState(); return ( <View style={styles.container}> <View ref={ref} style={[ styles.card, { backgroundColor: hovered ? "#ffa" : "#fff" } ]} > <Image source={imageUrl} style={styles.thumbImg} /> <View style={{ justifyContent: "center" }}> <Text accessibilityRole="heading" accessibilityLevel={3} style={styles.title} > @Nkzn </Text> <View style={{ height: 8 }} /> <Text style={styles.description}> Matsuri 2021 Speaker </Text> </View> </View> </View> ); } • View, Text, Image • StyleSheet.create(ޙड़) Ͱ࡞ͬͨstylesΛࢀর • ελΠϧΛ഑ྻͰϚʔδ 16 4:45
17. ਌ͷإΑΓݟͨ React NativeͬΆ͞ export default function App() { const [ref, hovered] = useHoverState(); return ( <View style={styles.container}> <View ref={ref} style={[ styles.card, { backgroundColor: hovered ? "#ffa" : "#fff" } ]} > <Image source={imageUrl} style={styles.thumbImg} /> <View style={{ justifyContent: "center" }}> <Text accessibilityRole="heading" accessibilityLevel={3} style={styles.title} > @Nkzn </Text> <View style={{ height: 8 }} /> <Text style={styles.description}> Matsuri 2021 Speaker </Text> </View> </View> </View> ); } • View, Text, Image • StyleSheet.create(ޙड़)Ͱ ࡞ͬͨstylesΛࢀর • ελΠϧΛ഑ྻͰϚʔδ 17 5:04
18. ਌ͷإΑΓ(ུ) 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
19. ਌ͷإΑΓ(ུ) 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
20. ਌ͷإΑΓ(ུ) thumbImg: { width: 100, height: 100, borderWidth: 1, borderColor: "#ccc", borderRadius: 50, marginRight: 16 }, ελΠϧʹ࢖͑Δϓϩύ ςΟ͸ϥϯλΠϜґଘ shadowܥ͸boxShadow ը૾Λؙ͘͢Δͷ͸ׂͱ͍ ͭ΋௨Γͷ΍Γํ 20 6:01
21. React NativeͬΆ͘UI͕࡞ΕΔ ϒϥ΢β޲͚ϥΠϒϥϦͰͨ͠ 21
22. ͍͔͕Ͱ͔ͨ͠ʁ ʢ΍ͬͯΈͨهࣄ෩ຯͷకΊʣ 22
23. ׬ 23
24. ׬ Ξόϯऴྃ 24
25. ࠓ೔ͷ͓࿩ • React GUIʹ৮ͬͯΈͨʢࠓऴΘͬͨʣ • React Native for Webͱ͸ • React Native for Web͸ͳͥੜ·Εͨͷ͔ • React GUIͷ͜Ε͔Β 25 7:55
26. Aύʔτ 26
27. React Nativeͱ͍ۙॻ͖ຯͰ ϒϥ΢β޲͚ΞϓϦ͕࡞ΕΔੈք ૣ͘དྷͯ΄͍͠Ͱ͢ΑͶ 27
28. ࣮͸ɺطʹ͋ΔΜͰ͢ 28
29. React Native for Web 29
30. https://necolas.github.io/react-native-web/ 30 9:30
31. ݟ͔֮͑͠ͳ͍ ※ ࡉ͔͍ݕূ͸ল͖·͕͢ɺαΠτ಺ͷจݴ΋ಉ͡෦෼͕ଟ͍Ͱ͢ 31
32. React GUI͸React Native for Webͷܥේ • ͲͪΒ΋࡞ऀ͸Nicolas Gallagherࢯ • React GUI͸Facebook໊͚ٛͩͲNPMͳͲͰࢯͷؔΘΓ͕ݟ͑Δ • https://www.npmjs.com/package/react-gui • React NativeͬΆ͍ίʔυΛϒϥ΢βͰಈ͔͢Ξϓϩʔν 32 10:08
33. React Native for WebΛֶͿ͜ͱ͸ React GUIΛֶͿ͜ͱʹܨ͕Δ 33
34. 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
35. https://twitter.com/necolas/status/913877194199359488 35
36. ༨ஊɿTwitter Liteͷͦͷޙ • ౰ॳ͸εϚϗ޲͚ → λϒϨοτରԠ → σεΫτοϓରԠ → ݱࡏͷ twitter.com 36
37. React Native for Web͓͞Β͍ᶄ • React Nativeͱ΄΅ಉ͡ 
 ίϯϙʔωϯτͱAPIΛ࣋ͭ 
 JavaScript੡ͷUIϥΠϒϥϦ 37 11:43
38. React Native for Webͷ Α͋͘Δޡղ 38
39. “React Native for Web͸ ϒϥ΢β্ʹReact Native؀ڥΛ࡞Δ ϥΠϒϥϦͰ͋Δ” ͜Ε͸ࣄ࣮Ͱ͸͋Γ·ͤΜ
    ʢ˞
    'MVUUFS
    8FC΍3FBDU
    /BUJWF
    %0.͸গ͚ͩͦ͠ΕͬΆ͍ΞϓϩʔνͰ͢ʣ 39
40. ʮReact Nativeʯͷ2ͭͷଆ໘ • UIϥΠϒϥϦͱͯ͠ͷReact Native • ϥϯλΠϜͱͯ͠ͷReact Native 40 12:40
41. UIϥΠϒϥϦͱͯ͠ͷReact Native import { Image, Text, View, StyleSheet } from 'react-native'; 41
42. UIϥΠϒϥϦͱͯ͠ͷReact Native • React੡ͷίϯϙʔωϯτͱɺؔ਺܈ʢAPIʣ • ࠷ऴతʹ͸ωΠςΟϒϒϦοδ/JSIΛݺͼग़͢΋ͷͷɺͦΕҎ֎ͷ෦ ෼͸ී௨ͷJavaScript੡ϥΠϒϥϦ 42 13:18
43. ϥϯλΠϜͱͯ͠ͷReact Native • ωΠςΟϒϓϥοτϑΥʔϜͷ্ͰJavaScriptΤϯδϯΛಈ͔͢ • ϒϦοδ/JSI͔Βͷߋ৽ґཔΛड͚ͯɺωΠςΟϒUIΛߋ৽͢Δ • ϒϦοδ/JSI͔Βͷݺͼग़͠Λड͚ͯɺωΠςΟϒॲཧΛ࣮ߦ͢Δ • ωΠςΟϒॲཧͷ݁ՌΛJavaScriptଆʹ௨஌͢Δ 43 13:37
44. "OESPJE J04 8JOEPXT "OESPJE
    4%, J04
    4%, 7JTVBM
    $ 3/
    "OESPJE
    3VOUJNF 3/
    J04
    3VOUJNF 3/
    8JOEPXT
    3VOUJNF 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
45. React Native for Web͕࠶ݱͨ͠΋ͷ • UIϥΠϒϥϦͱͯ͠ͷReact Native • ϥϯλΠϜͱͯ͠ͷReact Native ͪ͜Β 45
46. React Native for Webͷਖ਼ମ • React Native͸ϥϯλΠϜΛ࠶ݱ͠ͳ͍ • React Nativeͱಉ໊͡લɾಉ͡propsɾಉ͡ݟͨ໨ͷίϯϙʔωϯτ ͕ੜ͍͑ͯΔʢ಺෦࣮૷͸ͨͩͷdiv΍span΍inputʣ • React Nativeͱಉ໊͡લɾಉ͡Ҿ਺ɾಉ͡ڍಈͷAPI͕ੜ͍͑ͯΔ • ͨ·ͨ·React Nativeͱಉ͡ΠϯλʔϑΣʔεΛ͍࣋ͬͯΔ͚ͩͷɺ React Nativeͱ͸ґଘؔ܎ͷͳ͍UIϥΠϒϥϦ 46 14:34
47. "OESPJE J04 8JOEPXT "OESPJE
    4%, J04
    4%, 7JTVBM
    $ 3/
    "OESPJE
    3VOUJNF 3/
    J04
    3VOUJNF 3/
    8JOEPXT
    3VOUJNF 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
    /BUJWF
    GPS
    8FC
    $PNQPOFOUT
    
    "1*T 47 14:53
48. ਌ͷإΑΓݟͨ React NativeͬΆ͞ export default function App() { const [ref, hovered] = useHoverState(); return ( <View style={styles.container}> <View ref={ref} style={[ styles.card, { backgroundColor: hovered ? "#ffa" : "#fff" } ]} > <Image source={imageUrl} style={styles.thumbImg} /> <View style={{ justifyContent: "center" }}> <Text accessibilityRole="heading" accessibilityLevel={3} style={styles.title} > @Nkzn </Text> <View style={{ height: 8 }} /> <Text style={styles.description}> Matsuri 2021 Speaker </Text> </View> </View> </View> ); } • View, Text, Image • StyleSheet.create(ޙड़)Ͱ ࡞ͬͨstylesΛࢀর • ελΠϧΛ഑ྻͰϚʔδ ͜Ε͕3FBDU
    %0.Ͱ΋ಡΊΔܗʹͳΔΘ͚Ͱ͢ 48
49. React Native for Webͷਖ਼ମ • React Native͸ϥϯλΠϜΛ࠶ݱ͠ͳ͍ • React Nativeͱಉ໊͡લɾಉ͡propsɾಉ͡ݟͨ໨ͷίϯϙʔωϯτ ͕ੜ͍͑ͯΔʢ಺෦࣮૷͸ͨͩͷdiv΍span΍inputʣ • React Nativeͱಉ໊͡લɾಉ͡Ҿ਺ɾಉ͡ڍಈͷAPI͕ੜ͍͑ͯΔ • ͨ·ͨ·React Nativeͱಉ͡ΠϯλʔϑΣʔεΛ͍࣋ͬͯΔ͚ͩͷɺ React Nativeͱ͸ແؔ܎ͷUIϥΠϒϥϦ 2
    Ͳ͏΍࣮ͬͯݱ͍ͯ͠Δͷʁ 49
50. A. Nicolasͷ౒ྗʹΑͬͯ • ͔ͭͯnormalize.cssΛ࡞͍ͬͯͨఔ౓ʹ͸ɺNicolas͸CSSͷঊ • ʮScrollViewͷ಺ଆʹpaddingΛ෇͚͍ͨ৔߹͸ contentContainerStyleΛ࢖͍·͠ΐ͏ʯΈ͍ͨͳڍಈ·Ͱ࠶ݱ͞Εͯ ͍ΔʢڪΔ΂͖มଶͰ͋Δʣ • Yoga͕ͪΌΜͱϒϥ΢βͷڍಈΛ࠶ݱͯ͘͠Ε͍ͯΔͷ΋େ͖͍ 50 15:50
51. React Native for Web͸ͨͩͷUIϥΠϒϥϦ import { Image, Text, View, StyleSheet } from ‘react-native-web’; XFCQBDLͷSFTPMWFBMJBT౳Ͱ
    ໊લΛޡຐԽͯ͠
    lSFBDUOBUJWFz
    ͱͯ͠
    *NQPSUͰ͖ΔΑ͏ʹ͍ͯ͠Δͷ͕&YQP
    8FC 51 16:09
52. Bύʔτ 52
53. React Native for Web͸ ͳͥੜ·Εͨͷ͔ 53
54. React NativeΛ ϒϥ΢βͰಈ͔͔ͨͬͨ͠ 54
55. ࢥ͍ग़ͯ͠΄͍͠ Twitter Lite͸Twitter Webۙ୅ԽPJ Twitter͕ࣾRNͷϢʔβʔاۀͩͱ ͍͏࿩Λฉ͍ͨ͜ͱ͕͋Δਓ͸ʁ 55 17:25
56. React Native for Webͷ Ϟνϕʔγϣϯ ※ 2018೥4݄͝ΖʹNicolas͕πΠʔτ͍ͯͨ͠࿩Λݩʹ͍ͯ͠Δͭ΋ΓͰ͕͢ɺ 
 ۪ஒࠞ͡Γ͍͔ͩͬͨͤπΠফ͠͞Ε͍ͯΔͷͰɺશମతʹʦཁग़యʧͳ͜ͱΛ͝༰͍ࣻͩ͘͞ ※ ΋͠ݟ͕֮͑͋Δ࿩ͩͬͨ৔߹͸ɺTwitter౳Ͱʮݟ͕֮͑͋Δʯͱݴ͍͚ͬͯͨͩΔͱخ͍͠Ͱ͢ 56 17:44
57. ϒϥ΢β͸ຊདྷυΩϡϝϯτϏϡʔΞ http://info.cern.ch/hypertext/WWW/TheProject.html 57
58. GUIΞϓϦͷϓϥοτϑΥʔϜͱͯ͠ੜ·ΕͨΘ͚Ͱ͸ͳ͍ 58 EJWͱTQBOͱJNHʹ༷ʑͳ$44όουϊ΢ϋ΢Λ෇༩ͯ͠
    Α͏΍͘·ͱ΋ʹಈ͘ͷ͸ɺ(6*ϑϨʔϜϫʔΫͷମΛ੒͍ͯ͠ͳ͍
    ʢϒϥ΢β͸υΩϡϝϯτϏϡʔΞͳͷͰ࢓ํͳ͍ʣ
59. ΞϓϦΛ࡞ΔͳΒ͜͏͍͏ͷཉ͍͠ΑͶ • ೚ҙͷྖҬ಺Λ׳ੑεΫϩʔϧ͍ͨ͠ • ॲཧ଴ͪͷϓϩάϨεόʔΛग़͍ͨ͠ • େྔͷσʔλΛলϝϞϦͰදࣔͰ͖ΔϦετػߏ ΋ͪΖΜϥΠϒϥϦΛೖΕΕ͹Ͱ͖Δ͚Ͳ
    ͜Μͳ͋Γ;ΕͨػೳΛೖΕΔ͚ͩͳͷʹ
    ϥΠϒϥϦͷબఆ؟͕ඞཁͳͷ͸ɺଟ͘ͷਓʹͱͬͯਏ͍ 59 18:41
60. React DOM޲͚ͷ ඪ४GUIπʔϧΩοτ͕ཉ͍͠ ʢjQueryʹର͢ΔjQuery UIΈ͍ͨͳʣ 60
61. ͓΍ɺ͜Μͳͱ͜Ζʹ੔ཧ͞ΕͨGUI͕ • ೚ҙͷྖҬ಺Λ׳ੑεΫϩʔϧ͍ͨ͠ • → ScrollView • ॲཧ଴ͪͷϓϩάϨεόʔΛग़͍ͨ͠ • → ProgressBar, ActivityIndicator • େྔͷσʔλΛলϝϞϦͰදࣔͰ͖ΔϦετػߏ • → FlatList 61 19:19
62. React NativeͷAPI͸Α͘Ͱ͖ͯΔʦཁग़యʧ • ͦͷདྷྺ͔ΒɺiOS SDKͱAndroid SDKͷ࠷େެ໿Λࢤ޲͍ͯ͠Δ • iOSઌߦͰ࡞ΒΕͨͷͰɺ໋໊͕iOSدΓͰ͸͋Δ • for Windows΍for macOS͕࣮૷͞Εͨ఺͔Β΋APIσβΠϯͷ൚༻ੑ ͕Ӑ͍஌ΕΔʢ΄Μͱ͔……ʁʣ • GUIΞϓϦέʔγϣϯ࡞Γʹదͨ͠ϑϨʔϜϫʔΫΛ࡞ΔͳΒɺAPI ͱͯ͠React NativeΛਅࣅΔͷ͸ѱ͘ͳ͍Ξϓϩʔν 62 19:38
63. React Native for WebͷϞνϕʔγϣϯ React DOM޲͚ͷ ඪ४GUIπʔϧΩοτͱͯ͠ React NativeΫϩʔϯΛ࡞Ζ͏ʂ 63
64. ਌ͷإΑΓݟͨ React NativeͬΆ͞ export default function App() { const [ref, hovered] = useHoverState(); return ( <View style={styles.container}> <View ref={ref} style={[ styles.card, { backgroundColor: hovered ? "#ffa" : "#fff" } ]} > <Image source={imageUrl} style={styles.thumbImg} /> <View style={{ justifyContent: "center" }}> <Text accessibilityRole="heading" accessibilityLevel={3} style={styles.title} > @Nkzn </Text> <View style={{ height: 8 }} /> <Text style={styles.description}> Matsuri 2021 Speaker </Text> </View> </View> </View> ); } • View, Text, Image • StyleSheet.create(ޙड़)Ͱ ࡞ͬͨstylesΛࢀর • ελΠϧΛ഑ྻͰϚʔδ Ͱɺ͜͏ͳͬͨΘ͚ 64
65. React Native for WebͷϞνϕʔγϣϯ • React DOMͷੈքʹ΋શ෦ೖΓGUIπʔϧΩοτ͕ཉ͍͠ • ෳ਺ϓϥοτϑΥʔϜͷதͰୟ্͖͛ΒΕͨɺReact NativeͷதཱతͳAPIσβΠϯ Λϒϥ΢βʹ΋औΓࠐΜͰΈΑ͏ • CSSͷࠇຐज़Λ֮͑ͳͯ͘΋ҰൠతͳGUIΞϓϦέʔγϣϯΛ૊ΊΔΑ͏ʹͳΔͧʂ • ͦΕͰ͍ͯσβΠϯ্ͷΦϐχΦϯ͸ͳ͍ͷͰɺ޷͖ͳσβΠϯͷUIϥΠϒϥϦΛඃ ͤΒΕΔͧʂʢReact Native Paperͱ͔NativeBaseͱ͔࢖͑Δʣ • WAI-ARIA࢓༷ͷAccessibilityରԠ͕΍Γ΍͍͢Α͏ʹ഑ྀ͢Δ $IBLSB
    6*ͱͷҧ͍ 65 20:35
66. Accessibility React NativeຊՈͷaccessibilityܥ APIΛΞϨϯδͨ͠ܗͰɺWAI-ARIA ରԠ΍ηϚϯςΟοΫWebରԠΛ ߦ͍ͬͯΔ 66 20:54
67. StyleSheet ελΠϧ͸ՄೳͳݶΓখ͘͞෼ׂ͞ ΕͯɺελΠϧͷ಺༰͔Βੜ੒͞Ε ͨΫϥε໊Λ༩͑ΒΕΔ ՄೳͳݶΓॏෳഉআ͞ΕΔͷͰόϯ υϧੑೳ͕ߴ͍ ༗໊ແ࣮Խͨ͠ɺຊՈͷ StyleSheet.createΑΓ༏ल 67 21:13
68. ୤ग़ϋονͷ ࡞Γ΍͢͞ 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<Props> = ({ 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 ( <View> <div {...getRootProps()} style={{ backgroundColor: isDragActive ? 'lightgray' : ‘gray' }} > <input {...getInputProps()} /> <p>ϑΝΠϧΛ௥Ճ͢Δ (࠷େ500MB·Ͱʣ</p> </div> </View> ); }; React Nativeͷख๏Ͱղܾ͢Δͷ ͕໘౗ʹͳͬͨΒɺϒϥ΢βͷख ๏ʹಀ͛ͯ΋͍͍ ීஈͱҧͬͯϒϦοδ͕͍Βͳ͍ ࣮ՈͷΑ͏ͳ҆৺ײ ϒϥ΢β޲͚ϥΠϒϥϦ 7JFXͷதʹEJWΛஔ͍ͯ΋͍͍ UploadProductDlc.web.tsx 68 21:32
69. ٕज़ॻయWebͰ࣮ࡍʹ࢖͍ͬͯ·͢ 69 21:51
70. Αͦ͞͏ 70
71. ͔͠͠React Native for Web͸ ʮReact Nativeʯ ͱ͍͏໊લͰଛ͕ͪ͠ 71 22:29
72. React NativeϥϯλΠϜͷͨΊͷ πʔϧͩͱצҧ͍͞Εͯ Web։ൃऀʹ͸ݟ޲͖΋͞Εͳ͍ ʢʮຊ຤స౗ͩʯͱ͍͏ẍস·ͰඈΜͰ͘Δ࢝຤ʣ ʢNicolas͕۪ஒͬͯπΠফ͢͠ΔݪҼʣ 72 22:48
73. - 2018.3.6 @Necolas “React Native͕ɺWeb։ൃऀʹͱͬͯ࠷΋೉͠ ͍GUIͷ໰୊ͷଟ͘Λ͢Ͱʹղܾ͍ͯ͠Δ͜ͱ ΛɺͲ͏΍ͬͯWeb։ൃऀʹೲಘͤ͞Δͷ͔ʁ աڈʹ໭ͬͯɺReact DOMͷલʹReact NativeΛ ϦϦʔε͢Δʁ΋ͬͱ؆୯ͳํ๏͸ͳ͍ͷ͔…” 73 23:07 https://twilog.org/Nkzn/date-180306
74. ·໋໊͕͋ѱ͍ • ໊લ͕Ͳ͏ͯ͠΋ΠϩϞϊײΛग़ͯ͠͠·͏ • Nicolas΋໊લͷѱ͞͸Θ͔͍ͬͯΔΑ͏ͩͬͨʦཁग़యʧ • ʮ͍ͬͦReact Nativeଆ໊͕લΛม͑ͯ͘ΕͨΒ͍͍ʯ·Ͱݴͬͯͨ ؾ͕͢Δ 
 ʢUIϥΠϒϥϦͱͯ͠ͷReact Nativeʹผͷ໊લΛ͚ͭͯ΄͍͠ɺ 
 ɹ͘Β͍ͷχϡΞϯεʣ 74 23:26
75. Reactʹ͸GUIπʔϧΩοτ͕ඞཁ 75
76. Reactʹ͸GUIπʔϧΩοτ͕ඞཁ React GUI 76
77. React GUI 77
78. React GUI͸ React Native for Webͷҟੈքసੜ ʢ͔΋͠Εͳ͍ʣ 78 24:42
79. Cύʔτ 79
80. React GUI͸ React Native for Webͷ ϦϒϥϯσΟϯάͳͷ͔ 80
81. Θ͟Θ͟Facebook໊ٛͰग़ͯ͜ΒΕΔͱ ظ଴΋ߴ·Δͱ͍͏΋ͷ 81
82. ظ଴͕ߴ·Γ͗ͯ͢DiscussionΛཱͯͨਓ͕͍·ͨ͠ https://github.com/reactwg/react-18/discussions/71 82
83. ޚେ͔Βͷճ౴ ·ͩݸਓతͳ࣮ݧϓϩδΣΫτͰ͋Δ FBͷ஥ؒͱڞ༗ͨͯ͘͠FBͷϦϙδτϦʹ্͚͛ͨͩ ΦϑΟγϟϧʹͳΔ༧ఆ͸·ͩͳ͍ ͍͔ͭ͘ͷΞΠσΞ͸React Native for WebʹϑΟʔυόοΫͨ͠Γ 
 React NativeνʔϜͱ࿩͠߹ͬͨΓ͍ͯ͠Δ 83 26:17
84. ·ͩReact GUIͷ࣌୅͸དྷͳ͍Β͍͠ 84
85. React GUIʹظ଴͢Δະདྷ 85
86. React Nativeͷ࿮૊ΈͰ͸Ͱ͖ͳ͔ͬͨ͜ͱ • iOS΍Androidͱ͍ͬͨλονσόΠεΛલఏʹ࡞ΒΕͨͨΊɺ 
 ϙΠϯςΟϯάσόΠε΁ͷߟྀ͕͔ͳΓബ͍ • ೖྗͷϑΥʔΧεҠಈ΍ΩʔϘʔυγϣʔτΧοτɺ΢Οϯυ΢αΠ ζͷΧδϡΞϧͳมߋͳͲ΋ಉ༷ • React NativeͷAPI͔Βେ͖͘ҳ୤͢Δ͜ͱ͸Ͱ͖ͳ͍தͰ͸ରԠʹ ݶ౓͕͋ͬͨʢ@types/react-nativeͰܕ෇͚ͯ͠Δ͠Ͷʣ 86 27:14
87. React GUIͳΒͰ͖Δ σεΫτοϓ޲͚Hooksͷݟຊࢢ React Native for WebͰ΋΍Γ͔ͬ ͨΜͩΖ͏ͳ͋…… 87
88. طଘͷ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
89. ΋͔ͯ͠͠ • React NativeνʔϜʹϑΟʔυόοΫ͍ͯ͠Δ಺༰ͱ͍͏ͷ͸ɺ 
 ϙΠϯςΟϯάσόΠε౳ͷσεΫτοϓ޲͚API……ʁ • useHover౳ΛReact NativeຊମʹऔΓࠐ·ͤͯɺReact Native for WebΛΑΓσεΫτοϓ޲͚ʹਐԽͤ͞Δͭ΋ΓͰ͸……ʁ • ͠ΒΜ͚Ͳ 89 28:11
90. React Native for Web 
 ެࣜΞΧ΢ϯτΛνΣοΫ https://twitter.com/ReactWeb 8/27ʹͰ͖ͯͨ @ReactNativeWebʹ͠ͳ͔ͬͨ͋ͨΓ ʹNicolasͷࣥ೦Λײ͡Δ ͍͔ͭReact Native for WebͱReact GUI ͕౷߹ͯ͠React WebʹͳΔΜͩΖ͏͔ 90 28:30
91. ͔͜͜Βઌ͸܅ͷ໨Ͱ͔֬Ίͯ͘Εʂ 91