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

    View Slide

  2. Who am I
    • Yukiya Nakagawa a.k.a Nkzn (ͳ͔͟Μ)


    • ৽ׁࡏॅ


    • ೋࣇͷ෕Ͱ࠺ͷ෉ʢࠓ೔΋ϫϯΦϖҭࣇ͋Γ͕ͱ͏🙏ʣ


    • ࢿ࢈ӡ༻͓ख఻͍αʔϏεmoneiroͷITཪํ


    • ٕज़ॻయͷWebϑϩϯτΤϯυˍܾࡁΞϓϦ୲౰


    • React 2015ʙ / React Native 2017ʙ
    2
    0:38

    View Slide

  3. 2݄ʹຊ͕ग़·ͨ͠
    https://amzn.to/3kWRYc0


    • 2018೥຤͔Β2020೥Ն·Ͱ
    CodeZineͰ࿈ࡌ͍ͯͨ͠هࣄͷ૿
    ิվగ൛Ͱ͢


    • ExpoͰReactΛղઆͯ͠·͢


    3
    0:57

    View Slide

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


    • https://droidkaigi.jp/2018/timetable/
    4

    View Slide

  5. React GUI͕࿩୊ʹͳΓ·ͨ͠Ͷ
    5

    View Slide

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

    View Slide

  7. React GUI͞ΘͬͯΈͨ
    7

    View Slide

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

    View Slide

  9. Hooks
    ΞϓϦέʔγϣϯ։ൃͰ஍ຯʹ໾ཱ
    ͪͦ͏


    Ϛ΢ε΍ΩʔϘʔυͷಈ͖Λଊ͑Δ
    API͕๛෋ͳҹ৅
    9
    2:13

    View Slide

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

    View Slide

  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 (




    ref={ref}


    style={{


    width: 200,


    height: 200,


    margin: "50px auto",


    border: "1px solid black",


    backgroundColor: hovered ? "orange" : null


    }}


    />


    );


    }
    • RefྖҬ΁ͷϗόʔΛݕग़
    11

    View Slide

  12. ͓·͚


    useHoverState
    function useHoverState() {


    const [hovered, onHoverChange] = useState(false);


    const ref = useHover({ onHoverChange });


    return [ref, hovered];


    }
    ࢖͍΍͘͢ϥοϓ


    refͱhovered͚ͩެ։
    12

    View Slide

  13. Components
    RNΤϯδχΞ͸ݟ͕֮͑͋Δฒͼ


    StyleSheet΋͋Δ͠ɺ·͋·͋େ఍
    ͷϨΠΞ΢τ͸࡞Εͦ͏


    13
    3:48

    View Slide

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

    View Slide

  15. ਌ͷإΑΓݟͨ


    React NativeͬΆ͞
    export default function App() {


    const [ref, hovered] = useHoverState();


    return (







    ref={ref}


    style={[


    styles.card,


    { backgroundColor: hovered ? "#ffa" : "#fff" }


    ]}


    >










    accessibilityRole="heading"


    accessibilityLevel={3}


    style={styles.title}


    >


    @Nkzn











    Matsuri 2021 Speaker














    );


    }
    • View, Text, Image


    • StyleSheet.create(ޙड़)Ͱ
    ࡞ͬͨstylesΛࢀর


    • ελΠϧΛ഑ྻͰϚʔδ
    15
    4:26

    View Slide

  16. ਌ͷإΑΓݟͨ


    React NativeͬΆ͞
    export default function App() {


    const [ref, hovered] = useHoverState();


    return (







    ref={ref}


    style={[


    styles.card,


    { backgroundColor: hovered ? "#ffa" : "#fff" }


    ]}


    >










    accessibilityRole="heading"


    accessibilityLevel={3}


    style={styles.title}


    >


    @Nkzn











    Matsuri 2021 Speaker














    );


    }
    • View, Text, Image


    • StyleSheet.create(ޙड़)
    Ͱ࡞ͬͨstylesΛࢀর


    • ελΠϧΛ഑ྻͰϚʔδ
    16
    4:45

    View Slide

  17. ਌ͷإΑΓݟͨ


    React NativeͬΆ͞
    export default function App() {


    const [ref, hovered] = useHoverState();


    return (







    ref={ref}


    style={[


    styles.card,


    { backgroundColor: hovered ? "#ffa" : "#fff" }


    ]}


    >










    accessibilityRole="heading"


    accessibilityLevel={3}


    style={styles.title}


    >


    @Nkzn











    Matsuri 2021 Speaker














    );


    }
    • View, Text, Image


    • StyleSheet.create(ޙड़)Ͱ
    ࡞ͬͨstylesΛࢀর


    • ελΠϧΛ഑ྻͰϚʔδ
    17
    5:04

    View Slide

  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

    View Slide

  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

    View Slide

  20. ਌ͷإΑΓ(ུ) thumbImg: {


    width: 100,


    height: 100,


    borderWidth: 1,


    borderColor: "#ccc",


    borderRadius: 50,


    marginRight: 16


    },
    ελΠϧʹ࢖͑Δϓϩύ
    ςΟ͸ϥϯλΠϜґଘ


    shadowܥ͸boxShadow


    ը૾Λؙ͘͢Δͷ͸ׂͱ͍
    ͭ΋௨Γͷ΍Γํ
    20
    6:01

    View Slide

  21. React NativeͬΆ͘UI͕࡞ΕΔ


    ϒϥ΢β޲͚ϥΠϒϥϦͰͨ͠
    21

    View Slide

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

    View Slide

  23. ׬
    23

    View Slide

  24. ׬ Ξόϯऴྃ
    24

    View Slide

  25. ࠓ೔ͷ͓࿩
    • React GUIʹ৮ͬͯΈͨʢࠓऴΘͬͨʣ


    • React Native for Webͱ͸


    • React Native for Web͸ͳͥੜ·Εͨͷ͔


    • React GUIͷ͜Ε͔Β
    25
    7:55

    View Slide

  26. Aύʔτ
    26

    View Slide

  27. React Nativeͱ͍ۙॻ͖ຯͰ


    ϒϥ΢β޲͚ΞϓϦ͕࡞ΕΔੈք


    ૣ͘དྷͯ΄͍͠Ͱ͢ΑͶ
    27

    View Slide

  28. ࣮͸ɺطʹ͋ΔΜͰ͢
    28

    View Slide

  29. React Native for Web
    29

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  33. React Native for WebΛֶͿ͜ͱ͸


    React GUIΛֶͿ͜ͱʹܨ͕Δ
    33

    View Slide

  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

    View Slide

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

    View Slide

  36. ༨ஊɿTwitter Liteͷͦͷޙ
    • ౰ॳ͸εϚϗ޲͚


    → λϒϨοτରԠ


    → σεΫτοϓରԠ


    → ݱࡏͷ twitter.com
    36

    View Slide

  37. React Native for Web͓͞Β͍ᶄ
    • React Nativeͱ΄΅ಉ͡

    ίϯϙʔωϯτͱAPIΛ࣋ͭ

    JavaScript੡ͷUIϥΠϒϥϦ
    37
    11:43

    View Slide

  38. React Native for Webͷ


    Α͋͘Δޡղ
    38

    View Slide

  39. “React Native for Web͸


    ϒϥ΢β্ʹReact Native؀ڥΛ࡞Δ


    ϥΠϒϥϦͰ͋Δ”
    ͜Ε͸ࣄ࣮Ͱ͸͋Γ·ͤΜ
    ʢ˞'MVUUFS8FC΍3FBDU/BUJWF%0.͸গ͚ͩͦ͠ΕͬΆ͍ΞϓϩʔνͰ͢ʣ
    39

    View Slide

  40. ʮReact Nativeʯͷ2ͭͷଆ໘
    • UIϥΠϒϥϦͱͯ͠ͷReact Native


    • ϥϯλΠϜͱͯ͠ͷReact Native
    40
    12:40

    View Slide

  41. UIϥΠϒϥϦͱͯ͠ͷReact Native
    import {


    Image,


    Text,


    View,


    StyleSheet


    } from 'react-native';
    41

    View Slide

  42. UIϥΠϒϥϦͱͯ͠ͷReact Native
    • React੡ͷίϯϙʔωϯτͱɺؔ਺܈ʢAPIʣ


    • ࠷ऴతʹ͸ωΠςΟϒϒϦοδ/JSIΛݺͼग़͢΋ͷͷɺͦΕҎ֎ͷ෦
    ෼͸ී௨ͷJavaScript੡ϥΠϒϥϦ
    42
    13:18

    View Slide

  43. ϥϯλΠϜͱͯ͠ͷReact Native
    • ωΠςΟϒϓϥοτϑΥʔϜͷ্ͰJavaScriptΤϯδϯΛಈ͔͢


    • ϒϦοδ/JSI͔Βͷߋ৽ґཔΛड͚ͯɺωΠςΟϒUIΛߋ৽͢Δ


    • ϒϦοδ/JSI͔Βͷݺͼग़͠Λड͚ͯɺωΠςΟϒॲཧΛ࣮ߦ͢Δ


    • ωΠςΟϒॲཧͷ݁ՌΛJavaScriptଆʹ௨஌͢Δ
    43
    13:37

    View Slide

  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

    View Slide

  45. React Native for Web͕࠶ݱͨ͠΋ͷ
    • UIϥΠϒϥϦͱͯ͠ͷReact Native


    • ϥϯλΠϜͱͯ͠ͷReact Native
    ͪ͜Β
    45

    View Slide

  46. React Native for Webͷਖ਼ମ
    • React Native͸ϥϯλΠϜΛ࠶ݱ͠ͳ͍


    • React Nativeͱಉ໊͡લɾಉ͡propsɾಉ͡ݟͨ໨ͷίϯϙʔωϯτ
    ͕ੜ͍͑ͯΔʢ಺෦࣮૷͸ͨͩͷdiv΍span΍inputʣ


    • React Nativeͱಉ໊͡લɾಉ͡Ҿ਺ɾಉ͡ڍಈͷAPI͕ੜ͍͑ͯΔ


    • ͨ·ͨ·React Nativeͱಉ͡ΠϯλʔϑΣʔεΛ͍࣋ͬͯΔ͚ͩͷɺ
    React Nativeͱ͸ґଘؔ܎ͷͳ͍UIϥΠϒϥϦ
    46
    14:34

    View Slide

  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

    View Slide

  48. ਌ͷإΑΓݟͨ


    React NativeͬΆ͞
    export default function App() {


    const [ref, hovered] = useHoverState();


    return (







    ref={ref}


    style={[


    styles.card,


    { backgroundColor: hovered ? "#ffa" : "#fff" }


    ]}


    >










    accessibilityRole="heading"


    accessibilityLevel={3}


    style={styles.title}


    >


    @Nkzn











    Matsuri 2021 Speaker














    );


    }
    • View, Text, Image


    • StyleSheet.create(ޙड़)Ͱ
    ࡞ͬͨstylesΛࢀর


    • ελΠϧΛ഑ྻͰϚʔδ
    ͜Ε͕3FBDU%0.Ͱ΋ಡΊΔܗʹͳΔΘ͚Ͱ͢
    48

    View Slide

  49. React Native for Webͷਖ਼ମ
    • React Native͸ϥϯλΠϜΛ࠶ݱ͠ͳ͍


    • React Nativeͱಉ໊͡લɾಉ͡propsɾಉ͡ݟͨ໨ͷίϯϙʔωϯτ
    ͕ੜ͍͑ͯΔʢ಺෦࣮૷͸ͨͩͷdiv΍span΍inputʣ


    • React Nativeͱಉ໊͡લɾಉ͡Ҿ਺ɾಉ͡ڍಈͷAPI͕ੜ͍͑ͯΔ


    • ͨ·ͨ·React Nativeͱಉ͡ΠϯλʔϑΣʔεΛ͍࣋ͬͯΔ͚ͩͷɺ
    React Nativeͱ͸ແؔ܎ͷUIϥΠϒϥϦ
    2Ͳ͏΍࣮ͬͯݱ͍ͯ͠Δͷʁ
    49

    View Slide

  50. A. Nicolasͷ౒ྗʹΑͬͯ
    • ͔ͭͯnormalize.cssΛ࡞͍ͬͯͨఔ౓ʹ͸ɺNicolas͸CSSͷঊ


    • ʮScrollViewͷ಺ଆʹpaddingΛ෇͚͍ͨ৔߹͸
    contentContainerStyleΛ࢖͍·͠ΐ͏ʯΈ͍ͨͳڍಈ·Ͱ࠶ݱ͞Εͯ
    ͍ΔʢڪΔ΂͖มଶͰ͋Δʣ


    • Yoga͕ͪΌΜͱϒϥ΢βͷڍಈΛ࠶ݱͯ͘͠Ε͍ͯΔͷ΋େ͖͍
    50
    15:50

    View Slide

  51. React Native for Web͸ͨͩͷUIϥΠϒϥϦ
    import {


    Image,


    Text,


    View,


    StyleSheet


    } from ‘react-native-web’;
    XFCQBDLͷSFTPMWFBMJBT౳Ͱ
    ໊લΛޡຐԽͯ͠lSFBDUOBUJWFzͱͯ͠
    *NQPSUͰ͖ΔΑ͏ʹ͍ͯ͠Δͷ͕&YQP8FC
    51
    16:09

    View Slide

  52. Bύʔτ
    52

    View Slide

  53. React Native for Web͸


    ͳͥੜ·Εͨͷ͔
    53

    View Slide

  54. React NativeΛ


    ϒϥ΢βͰಈ͔͔ͨͬͨ͠
    54

    View Slide

  55. ࢥ͍ग़ͯ͠΄͍͠
    Twitter Lite͸Twitter Webۙ୅ԽPJ


    Twitter͕ࣾRNͷϢʔβʔاۀͩͱ
    ͍͏࿩Λฉ͍ͨ͜ͱ͕͋Δਓ͸ʁ
    55
    17:25

    View Slide

  56. React Native for Webͷ


    Ϟνϕʔγϣϯ
    ※ 2018೥4݄͝ΖʹNicolas͕πΠʔτ͍ͯͨ͠࿩Λݩʹ͍ͯ͠Δͭ΋ΓͰ͕͢ɺ

    ۪ஒࠞ͡Γ͍͔ͩͬͨͤπΠফ͠͞Ε͍ͯΔͷͰɺશମతʹʦཁग़యʧͳ͜ͱΛ͝༰͍ࣻͩ͘͞


    ※ ΋͠ݟ͕֮͑͋Δ࿩ͩͬͨ৔߹͸ɺTwitter౳Ͱʮݟ͕֮͑͋Δʯͱݴ͍͚ͬͯͨͩΔͱخ͍͠Ͱ͢
    56
    17:44

    View Slide

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

    View Slide

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

    View Slide

  59. ΞϓϦΛ࡞ΔͳΒ͜͏͍͏ͷཉ͍͠ΑͶ
    • ೚ҙͷྖҬ಺Λ׳ੑεΫϩʔϧ͍ͨ͠


    • ॲཧ଴ͪͷϓϩάϨεόʔΛग़͍ͨ͠


    • େྔͷσʔλΛলϝϞϦͰදࣔͰ͖ΔϦετػߏ
    ΋ͪΖΜϥΠϒϥϦΛೖΕΕ͹Ͱ͖Δ͚Ͳ
    ͜Μͳ͋Γ;ΕͨػೳΛೖΕΔ͚ͩͳͷʹ
    ϥΠϒϥϦͷબఆ؟͕ඞཁͳͷ͸ɺଟ͘ͷਓʹͱͬͯਏ͍
    59
    18:41

    View Slide

  60. React DOM޲͚ͷ


    ඪ४GUIπʔϧΩοτ͕ཉ͍͠
    ʢjQueryʹର͢ΔjQuery UIΈ͍ͨͳʣ
    60

    View Slide

  61. ͓΍ɺ͜Μͳͱ͜Ζʹ੔ཧ͞ΕͨGUI͕
    • ೚ҙͷྖҬ಺Λ׳ੑεΫϩʔϧ͍ͨ͠


    • → ScrollView


    • ॲཧ଴ͪͷϓϩάϨεόʔΛग़͍ͨ͠


    • → ProgressBar, ActivityIndicator


    • େྔͷσʔλΛলϝϞϦͰදࣔͰ͖ΔϦετػߏ


    • → FlatList
    61
    19:19

    View Slide

  62. React NativeͷAPI͸Α͘Ͱ͖ͯΔʦཁग़యʧ
    • ͦͷདྷྺ͔ΒɺiOS SDKͱAndroid SDKͷ࠷େެ໿Λࢤ޲͍ͯ͠Δ


    • iOSઌߦͰ࡞ΒΕͨͷͰɺ໋໊͕iOSدΓͰ͸͋Δ


    • for Windows΍for macOS͕࣮૷͞Εͨ఺͔Β΋APIσβΠϯͷ൚༻ੑ
    ͕Ӑ͍஌ΕΔʢ΄Μͱ͔……ʁʣ


    • GUIΞϓϦέʔγϣϯ࡞Γʹదͨ͠ϑϨʔϜϫʔΫΛ࡞ΔͳΒɺAPI
    ͱͯ͠React NativeΛਅࣅΔͷ͸ѱ͘ͳ͍Ξϓϩʔν
    62
    19:38

    View Slide

  63. React Native for WebͷϞνϕʔγϣϯ
    React DOM޲͚ͷ


    ඪ४GUIπʔϧΩοτͱͯ͠


    React NativeΫϩʔϯΛ࡞Ζ͏ʂ
    63

    View Slide

  64. ਌ͷإΑΓݟͨ


    React NativeͬΆ͞
    export default function App() {


    const [ref, hovered] = useHoverState();


    return (







    ref={ref}


    style={[


    styles.card,


    { backgroundColor: hovered ? "#ffa" : "#fff" }


    ]}


    >










    accessibilityRole="heading"


    accessibilityLevel={3}


    style={styles.title}


    >


    @Nkzn











    Matsuri 2021 Speaker














    );


    }
    • View, Text, Image


    • StyleSheet.create(ޙड़)Ͱ
    ࡞ͬͨstylesΛࢀর


    • ελΠϧΛ഑ྻͰϚʔδ
    Ͱɺ͜͏ͳͬͨΘ͚
    64

    View Slide

  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

    View Slide

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

    View Slide

  67. StyleSheet
    ελΠϧ͸ՄೳͳݶΓখ͘͞෼ׂ͞
    ΕͯɺελΠϧͷ಺༰͔Βੜ੒͞Ε
    ͨΫϥε໊Λ༩͑ΒΕΔ


    ՄೳͳݶΓॏෳഉআ͞ΕΔͷͰόϯ
    υϧੑೳ͕ߴ͍


    ༗໊ແ࣮Խͨ͠ɺຊՈͷ
    StyleSheet.createΑΓ༏ल
    67
    21:13

    View Slide

  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 = ({


    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 (







    {...getRootProps()}


    style={{ backgroundColor: isDragActive ? 'lightgray' : ‘gray' }}


    >





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








    );


    };
    React Nativeͷख๏Ͱղܾ͢Δͷ
    ͕໘౗ʹͳͬͨΒɺϒϥ΢βͷख
    ๏ʹಀ͛ͯ΋͍͍


    ීஈͱҧͬͯϒϦοδ͕͍Βͳ͍


    ࣮ՈͷΑ͏ͳ҆৺ײ
    ϒϥ΢β޲͚ϥΠϒϥϦ
    7JFXͷதʹEJWΛஔ͍ͯ΋͍͍
    UploadProductDlc.web.tsx
    68
    21:32

    View Slide

  69. ٕज़ॻయWebͰ࣮ࡍʹ࢖͍ͬͯ·͢
    69
    21:51

    View Slide

  70. Αͦ͞͏
    70

    View Slide

  71. ͔͠͠React Native for Web͸


    ʮReact Nativeʯ


    ͱ͍͏໊લͰଛ͕ͪ͠
    71
    22:29

    View Slide

  72. React NativeϥϯλΠϜͷͨΊͷ


    πʔϧͩͱצҧ͍͞Εͯ


    Web։ൃऀʹ͸ݟ޲͖΋͞Εͳ͍


    ʢʮຊ຤స౗ͩʯͱ͍͏ẍস·ͰඈΜͰ͘Δ࢝຤ʣ


    ʢNicolas͕۪ஒͬͯπΠফ͢͠ΔݪҼʣ
    72
    22:48

    View Slide

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

    View Slide

  74. ·໋໊͕͋ѱ͍
    • ໊લ͕Ͳ͏ͯ͠΋ΠϩϞϊײΛग़ͯ͠͠·͏


    • Nicolas΋໊લͷѱ͞͸Θ͔͍ͬͯΔΑ͏ͩͬͨʦཁग़యʧ


    • ʮ͍ͬͦReact Nativeଆ໊͕લΛม͑ͯ͘ΕͨΒ͍͍ʯ·Ͱݴͬͯͨ
    ؾ͕͢Δ

    ʢUIϥΠϒϥϦͱͯ͠ͷReact Nativeʹผͷ໊લΛ͚ͭͯ΄͍͠ɺ

    ɹ͘Β͍ͷχϡΞϯεʣ
    74
    23:26

    View Slide

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

    View Slide

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

    View Slide

  77. React GUI
    77

    View Slide

  78. React GUI͸


    React Native for Webͷҟੈքసੜ


    ʢ͔΋͠Εͳ͍ʣ
    78
    24:42

    View Slide

  79. Cύʔτ
    79

    View Slide

  80. React GUI͸


    React Native for Webͷ


    ϦϒϥϯσΟϯάͳͷ͔
    80

    View Slide

  81. Θ͟Θ͟Facebook໊ٛͰग़ͯ͜ΒΕΔͱ


    ظ଴΋ߴ·Δͱ͍͏΋ͷ
    81

    View Slide

  82. ظ଴͕ߴ·Γ͗ͯ͢DiscussionΛཱͯͨਓ͕͍·ͨ͠


    https://github.com/reactwg/react-18/discussions/71
    82

    View Slide

  83. ޚେ͔Βͷճ౴


    ·ͩݸਓతͳ࣮ݧϓϩδΣΫτͰ͋Δ


    FBͷ஥ؒͱڞ༗ͨͯ͘͠FBͷϦϙδτϦʹ্͚͛ͨͩ


    ΦϑΟγϟϧʹͳΔ༧ఆ͸·ͩͳ͍


    ͍͔ͭ͘ͷΞΠσΞ͸React Native for WebʹϑΟʔυόοΫͨ͠Γ

    React NativeνʔϜͱ࿩͠߹ͬͨΓ͍ͯ͠Δ
    83
    26:17

    View Slide

  84. ·ͩReact GUIͷ࣌୅͸དྷͳ͍Β͍͠
    84

    View Slide

  85. React GUIʹظ଴͢Δະདྷ
    85

    View Slide

  86. React Nativeͷ࿮૊ΈͰ͸Ͱ͖ͳ͔ͬͨ͜ͱ
    • iOS΍Androidͱ͍ͬͨλονσόΠεΛલఏʹ࡞ΒΕͨͨΊɺ

    ϙΠϯςΟϯάσόΠε΁ͷߟྀ͕͔ͳΓബ͍


    • ೖྗͷϑΥʔΧεҠಈ΍ΩʔϘʔυγϣʔτΧοτɺ΢Οϯυ΢αΠ
    ζͷΧδϡΞϧͳมߋͳͲ΋ಉ༷


    • React NativeͷAPI͔Βେ͖͘ҳ୤͢Δ͜ͱ͸Ͱ͖ͳ͍தͰ͸ରԠʹ
    ݶ౓͕͋ͬͨʢ@types/react-nativeͰܕ෇͚ͯ͠Δ͠Ͷʣ
    86
    27:14

    View Slide

  87. React GUIͳΒͰ͖Δ
    σεΫτοϓ޲͚Hooksͷݟຊࢢ


    React Native for WebͰ΋΍Γ͔ͬ
    ͨΜͩΖ͏ͳ͋……
    87

    View Slide

  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

    View Slide

  89. ΋͔ͯ͠͠
    • React NativeνʔϜʹϑΟʔυόοΫ͍ͯ͠Δ಺༰ͱ͍͏ͷ͸ɺ

    ϙΠϯςΟϯάσόΠε౳ͷσεΫτοϓ޲͚API……ʁ


    • useHover౳ΛReact NativeຊମʹऔΓࠐ·ͤͯɺReact Native for
    WebΛΑΓσεΫτοϓ޲͚ʹਐԽͤ͞Δͭ΋ΓͰ͸……ʁ


    • ͠ΒΜ͚Ͳ
    89
    28:11

    View Slide

  90. React Native for Web

    ެࣜΞΧ΢ϯτΛνΣοΫ
    https://twitter.com/ReactWeb


    8/27ʹͰ͖ͯͨ


    @ReactNativeWebʹ͠ͳ͔ͬͨ͋ͨΓ
    ʹNicolasͷࣥ೦Λײ͡Δ


    ͍͔ͭReact Native for WebͱReact GUI
    ͕౷߹ͯ͠React WebʹͳΔΜͩΖ͏͔
    90
    28:30

    View Slide

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

    View Slide