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

Yukiya Nakagawa

October 02, 2021
Tweet

More Decks by Yukiya Nakagawa

Other Decks in Programming

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