Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

9a6e4623f9314c5e1fc99635ac9617ed?s=128

Yukiya Nakagawa

October 02, 2021
Tweet

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؀ڥΛ࡞Δ ϥΠϒϥϦͰ͋Δ” ͜Ε͸ࣄ࣮Ͱ͸͋Γ·ͤΜ ʢ˞'MVUUFS8FC΍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 "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
  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 "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
  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Ͱ͖ΔΑ͏ʹ͍ͯ͠Δͷ͕&YQP8FC 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ରԠ͕΍Γ΍͍͢Α͏ʹ഑ྀ͢Δ $IBLSB6*ͱͷҧ͍ 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