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

React Nativeエコシステム概論 / react-native ecosystem

React Nativeエコシステム概論 / react-native ecosystem

NINNO Tech Fest #2でしゃべったLTです

https://ninno-tech-fest.connpass.com/event/226029/

Yukiya Nakagawa

October 22, 2021
Tweet

More Decks by Yukiya Nakagawa

Other Decks in Technology

Transcript

  1. React NativeΤίγεςϜ֓࿦
    NINNO Tech Fest #2
    2021.10.22 Yukiya Nakagawa a.k.a Nkzn

    View Slide

  2. ࣗݾ঺հ
    • ͳ͔͕ΘΏ͖΍ / ͳ͔͟Μ ʢ34ࡀʣ


    • ৽ׁࢢ੢۠ࡏॅ


    • 05݄·Ͱɿ΢Υʔλʔηϧגࣜձࣾ

    06݄͔ΒɿגࣜձࣾOneMile Partners

    11݄͔ΒɿגࣜձࣾϞχΫϧ(↑ͷ࣋ͪג)


    • ࢿ࢈ӡ༻૬ஊαʔϏεͷཪํ

    View Slide

  3. ٕज़ॻయ12͸


    1݄22೔͔Βʂ
    ΈΜͳٕज़ಉਓࢽΛॻ͜͏ʂ


    https://techbookfest.org


    ※ ٕज़ॻయWebαΠτ͸

    ɹGraphQL APIαʔόʔͱ

    ɹReact੡ϑϩϯτΤϯυͰ

    ɹͰ͖͍ͯ·͢

    View Slide

  4. ࠓ೔ͷ͓࿩
    • React NativeΛऔΓר͘؀ڥʹ͍ͭͯ


    • FacebookͷReact NativeνʔϜ͕ίΞϞδϡʔϧͷ։ൃΛ͍ͯ͠Δ


    • ͦΕҎ֎͸ΦϑΟγϟϧͷ׆ಈ΋ίϛϡχςΟϕʔεͰߦΘΕ͍ͯΔ


    • React Native͸ओʹFacebookͰ͸ͳ͍ਓʑʹΑͬͯ੒Γཱ͍ͬͯΔ


    • ໘ന͍ܗͷίϛϡχςΟʹͳ͍ͬͯΔ͜ͱΛ఻͍͑ͨ

    View Slide

  5. λʔήοτ
    • ϞόΠϧΞϓϦΛ࡞ͬͯΈ͍ͨJavaScriptΤϯδχΞ


    • React NativeͷνϡʔτϦΞϧΑΓઌʹਐΉͨΊͷ

    ͱ͔͔ͬΓ͕ཉ͍͠ํ


    • Facebook͕ITٕज़ͷ෼໺ͰࣾձʹͲΜͳߩݙΛ͍ͯ͠Δͷ͔

    ؾʹͳΔํ

    View Slide

  6. React Native
    • Facebook͕։ൃͨ͠ɺϞόΠϧΞϓϦ޲͚ϑϨʔϜϫʔΫ


    • https://reactnative.dev/


    • ReactͰUIΛߏங͢ΔͱɺAndroid SDK΍iOS SDKͷUIϑϨʔϜϫʔΫ
    Ͱը໘ඳը͕ߦΘΕΔ


    • ࠐΈೖͬͨ͜ͱΛ͠ͳ͚Ε͹WebΞϓϦʹ͍ۙ։ൃମݧͰϞόΠϧΞ
    ϓϦΛ࡞ΕΔ

    View Slide

  7. https://reactnative.dev/

    View Slide

  8. React NativeΛܗ࡞Δ΋ͷ
    πʔϧ໊ උߟ
    ݴޠ +BWB4DSJQU
    5ZQF4DSJQU 'MPX 3FBTPO౳Ͱ
    ੩తܕ෇͚͢Δͷ͕Ұൠత
    ݴޠॲཧܥ +BWB4DSJQU$PSF 8FC,JU

    "OESPJEJ04্Ͱ$ϥΠϒϥϦͱ࣮ͯ͠ߦ
    ಠࣗΤϯδϯ)FSNFTΛ։ൃத
    ύοέʔδ
    Ϛωʔδϟ
    /1. :BSO΋Մ
    Ϗϡʔ
    ϑϨʔϜϫʔΫ
    3FBDU ϒϥ΢βͰ࢖ΘΕ͍ͯΔͷͱશ͘ಉ͡΋ͷ
    ϨϯμϦϯά
    Τϯδϯ
    w "OESPJEBOESPJEWJFX BOESPJEXJEHFU
    w J046*,JU
    ಠࣗΩϟϯόεͳͲ͸࢖Θͣʹ
    04ຊདྷͷ6*πʔϧΩοτͰඳը͢Δ

    View Slide

  9. ࢖͑ΔϥΠϒϥϦ
    • NPMͰެ։͞Ε͍ͯΔJavaScript޲͚ϥΠϒϥϦ͕࢖͑Δ


    • ϨϯμϦϯάʹDOMʢHTML༝དྷͷཁૉΛ૊Έ߹ΘͤͨϏϡʔϑϨʔ
    ϜϫʔΫʣΛ࢖͍ͬͯͳ͍ͷͰɺDOM APIʢwindow.documentʣΛ
    ѻ͏ϥΠϒϥϦ͸࢖͑ͳ͍ʢjQueryͱ͔͸μϝʣ


    • @apollo/client΍date-fnsͱ͍ͬͨඇUIͳϥΠϒϥϦ͸ૉ௚ʹ࢖͑Δ

    View Slide

  10. Α͋͘Δೝࣝ
    ʮReact NativeͬͯFacebook͕࡞ͬͯΔΜͰ͠ΐʁʯ
    ͪΐͬͱಛघͳΤίγεςϜͰ


    ͦ͏ͱ΋ݴ͍੾Εͳ͘ͳ͖͍ͬͯͯΔ

    View Slide

  11. React Native v0.60
    • 2019೥7݄ͷόʔδϣϯ


    • 35ݸͷը໘෦඼͕͋ͬͨ

    View Slide

  12. Lean CoreϓϩδΣΫτ
    • React NativeຊମΛখ͘͞͠Α͏ϓϩδΣΫτ

    https://github.com/facebook/react-native/issues/23313


    • ଟ༷ͳը໘෦඼ΛFacebookͷReact NativeνʔϜͷ؅ཧԼͰ

    ϝϯς͢Δͷ͕େมʹͳ͖ͬͯͨ


    • େ൒ͷ෦඼͸׆ൃͳίϛϡχςΟϝϯόʔͷ؅ཧԼʹஔ͍ͨํ͕

    ਝ଎ͳվળɾमਖ਼Λߦ͑Δ͸ͣ

    View Slide

  13. https://reactnative.dev
    3FBDU/BUJWFͷ

    ϑϧλΠϜϝϯόʔ͕͍Δاۀ

    View Slide

  14. React Native v0.66
    • 2021೥10݄ͷόʔδϣϯ


    • 35→24ݸͷμΠΤοτʹ੒ޭ

    View Slide

  15. ίϛϡχςΟ؅ཧԼͰݩؾʹ։ൃ͕ଓ͍͍ͯ·͢

    View Slide

  16. αʔυύʔςΟʹ։ൃΛ೚ͤͯେৎ෉ʁ
    • React Nativeͷ։ൃओମ͸Facebook͔ΒίϛϡχςΟʹҠͬͨ

    “Facebook supported, Community Driven”


    • αʔυύʔςΟͰ͸ͳ͘ʮίϛϡχςΟͰ։ൃΛڧྗʹݗҾ͍ͯ͠Δ
    ਓ෺ / اۀʯͱͯ͠ݟΔ΂͖

    View Slide

  17. ੲ͔ΒRelease Note͸ίϛϡχςΟͷ໾ׂ
    ୅໨ϝϯςφ
    .JDSPTPGUࣾͷ
    LFMTFUࢯ
    ॳ୅ϝϯςφ
    $BMMTUBDLࣾͷ
    HSBCCPVࢯ

    View Slide

  18. ίϛϡχςΟϕʔεͰ޿͕Δ


    React Nativeͷੈք

    View Slide

  19. React Native for Web
    • Twitter WebͰ࢖ΘΕ͍ͯΔϑϨʔϜϫʔΫ


    • ϒϥ΢βͰReact Nativeͱಉཻ͡౓ͷίϯϙʔωϯτ͕ར༻Ͱ͖Δ


    • ৄ͘͠͸React Native MaturiͰ

    ࿩ͨ͠ͷͰݟͯͶ
    https://youtu.be/OGsR3O4qu6s?t=17996

    View Slide

  20. React Native for Windows / macOS
    • Microsoftࣾ੡


    • ϨϯμϦϯάΤϯδϯΛVisual C++ʢଟ෼ʣʹࠩ͠ସ͑ͨ


    • Of
    fi
    ce 365ͷ࣮૷ʹ࢖ΘΕ͍ͯΔ
    https://microsoft.github.io/react-native-windows/

    View Slide

  21. Expo
    • Expoࣾ੡


    • Android΍iOSͷϓϩδΣΫτΛ׬શʹӅṭͨ͠ɺWebΞϓϦέʔ
    γϣϯͷΑ͏ͳ։ൃ؀ڥͰReact NativeΞϓϦ͕࡞ΕΔ


    • React Native for WebΛऔΓࠐΜͩͷͰWebΞϓϦ΋࡞ΕΔ


    • εϚϗʹಈ࡞֬ೝ༻ͷExpo Go͑͞ೖΕΕ͹ɺ

    PCଆʹ͸Android SDK΋iOS SDK΋ೖΕͣʹσόοάͰ͖Δ

    View Slide

  22. ϋϩϫ͕εοΩϦͯ͠ΔͷͰɺNode.js؀ڥ͕͋Δਓ͸৮ͬͯΈͯ΄͍͠

    View Slide

  23. ϒϥ΢βPOJ1BE
    J1IPOF
    1JYFM

    View Slide

  24. ͪΐͬͱ଍͚ͨͩ͠
    export default function App() {


    return (





    Open up App.tsx to start working on your app!







    uri: ‘https://example.com/nkzn.jpg',


    width: 200,


    height: 200,


    }} />











    );


    }

    View Slide

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

    View Slide