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

React + Valtio

React + Valtio

At RN LT

@YutamaKotaro

October 03, 2021
Tweet

More Decks by @YutamaKotaro

Other Decks in Programming

Transcript

  1. 3FBDU7BMUJP
    !:VUBNB,PUBSP

    View Slide

  2. 7VFͷੈքʹߦ͖ͬͯ·ͨ͠ʂ
    ͍͍ͳ͊ɾɾͱࢥ͍ͭͭɺ3FBDUͷྑ͞Λ࠶ೝ
    ࣝ͢ΔʹࢸΓɺWBMUJPಋೖΛܾΊͨͷͰฉ͍ͯ͘
    ͍ͩ͞ɻ

    View Slide

  3. 7VFQPJOUGSPNSFBDUVTFS
    ͱʹ͔͘؆ܿʹ͔͚Δ఺͕ඇৗʹΑ͍ɻ
    3FBDU 7VF

    View Slide

  4. 7VFQPJOUGSPNSFBDUVTFS
    ͱʹ͔͘؆ܿʹ͔͚Δ఺͕ඇৗʹΑ͍ɻ
    3FBDU 7VF

    View Slide

  5. 7VFQPJOUGSPNSFBDUVTFS
    ͱʹ͔͘؆ܿʹ͔͚Δ఺͕ඇৗʹΑ͍ɻ
    3FBDU 7VF

    View Slide

  6. 7VFQPJOUGSPNSFBDUVTFS
    + 5
    49͕࠷ߴͳΜͰɾɾɾɻͱ͍͏ҙݟ͕ࢄݟ
    7VF
    1SPQTͰϋϯυ
    ϥΛ౉͢ܗࣜɻ

    View Slide

  7. 7VFQPJOUGSPNSFBDUVTFS
    ݺͼग़͠ݩͰఆٛ΋
    Մೳɻ
    + 5
    49͕࠷ߴͳΜͰɾɾɾɻͱ͍͏ҙݟ͕ࢄݟ

    View Slide

  8. 7VFQPJOUGSPNSFBDUVTFS
    ͱࢸͬͯී௨ʹ࢖͏͜ͱ͕Ͱ͖·͢ɻ
    ͦͷଞɺ$VTUPNIPPLT΍DPOUFYU"1*
    ૬౰ͳ΋ͷ΋͋ͬͨΓɾɾɾɾ
    ͱΓΘ͚ศརͩͬͨͷ͕ɾɾɾ

    View Slide

  9. 3FBDUJWF
    ͱΓΘ͚ศརʹײͨ͡ͷ͸SFBDUJWF
    ͱΓΘ͚ศརʹײͨ͡ͷ
    ͸SFBDUJWF

    View Slide

  10. 7VFQPJOUGSPNSFBDUVTFS
    ඇৗʹ༏Εͨػೳ͕ͨ͘͞Μ͋ΔΜͰ͕͢ɾɾ
    Ұ෦ͷػೳ͸+49Ͱ͸࢖͑ͳ͍ͷͰɺ݁ہ͸

    4'$ʢ4JOHMF'JMF$PNQPOFOU͍ΘΏΔ7VFه

    ʹؼண͠·ͨ͠ʢ๻͸ɻɻɻҰ෦͚ͩKTYΛ࢖͏
    ͷ͸͋Γͩͱࢥ͍·͢ɾɾʣɻ

    View Slide

  11. ΍ͬͺ+49͍͍ͬ͢ΑͶ
    Ͱ΋΍ͬͺ+49͍͍ͬ͢ΑͶɻγϯϓϧͰہॴతͳ
    ར༻΋Ͱ͖ɺίϯϙʔωϯτ࡞੒ͷ೉қ౓͕ͱͯ΋
    Լ͕Γ·͢ɻ
    ͦͯ͠ɺԿΑΓࢥͬͨͷ͸ɺ

    ɹɹʰ؆୯ʹॻ͚Δʱʰγϯϓϧʹॻ͚Δʱ

    ɹɹɹɹɹɹɹɹɹɹɹɹɹΛཱ͍྆ͨ͠ͱʂʂ

    View Slide

  12. ͜ΕΛ+49ΰϦΰϦ؀ڥͰ͔͖͍ͨ
    +49ΰϦΰϦ؀ڥɺͭ·Γ3FBDUͳΜͰ͕͢ɾɾ
    $POUFYU"1*Ͱશମ؅ཧ͢Δͷ͸ͪΐͬͱΊΜͲ͘
    ͍͞͠ɻɻɻ
    3FEVY΍3FDPJMΑΓ΋΋ͬͱ͓खܰʹࣗ༝ʹָ͠
    ͍ͨɻɻɻ

    View Slide

  13. ӡ໋ͷग़ձ͍ʂ
    ୳ͯ͠Έͯͳ͔ͬͨΒ࡞Ζ͏ͱࢥͬͯͨΒɾɾɾ
    7BMUJPʹग़ձ͍·ͨ͠ʂʂ
    ͱͯ΋ૉ੖Β͘͠ײँײܹͰͨ͠ɻ
    ͱ͍͏͜ͱͰ7BMUJP঺հɻ
    ࡞ऀ͸!EBJTI͞Μ

    View Slide

  14. 7BMUJP
    1SPYZΛ׆༻ͨ͠ɺͱʹ͔͘

    ɹɹγϯϓϧͳεςʔτϚωδϝϯτϥΠϒϥϦͰ͢ʂ
    1SPYZΛ࢖͍ͬͯΔͱ͍͏͜ͱ͸ɻɻɻɻ

    ɹɹɹɹɹͦ͏ɺϦΞΫςΟϒͳॻ͖ํ͕Ͱ͖ΔͷͰ͢ɻ

    View Slide

  15. 7BMUJP
    ͜ΕʹΑͬͯɺ͋ͱ͸Ϧ
    ΞΫςΟϒʹίʔυΛॻ
    ͚ͩ͘ɾɾʂʂ
    ೉͍͜͠ͱ͸Կ΋ͳ͓͘
    ޷͖ʹࣗ༝ʹίʔυΛॻ
    ͚ͩ͘ɻ

    View Slide

  16. 7BMUJPGPS"DUJPO
    "DUJPO૬౰ͷ΋ͷ͸
    ؔ਺Λఆٛ͢Δ͚ͩ
    TUBUF΁ͷΞΫηε
    ͳͲ͸ఆٛͨ͠΋ͷ
    ΛಡΈࠐΉ͚ͩͰ
    0,ɻ

    View Slide

  17. 7BMUJPTVCTDSJCF
    Α΋΍3FBDUʹͱͲ·Β
    ͳ͍Ͱ͕͢ɾɾɾ
    αϒεΫϥΠϒ΋؆୯ʹ
    Ͱ͖·͢ɻ

    View Slide

  18. 7BMUJPDPNQVUFE1SPQFSUJFT
    ࢉज़ϓϩύςΟͷఆٛ΋
    Մೳɻ
    ʢ"DUJPOΛTUBUFʹؚ
    ΊΔ͜ͱ΋ՄೳͰ͢ʣ

    View Slide

  19. 7BMUJPBSSBZ
    ࢸͬͯී௨ʹ"SSBZͷૢ࡞
    ΋ߦ͑ΔͷͰɺؾʹ͢Δ͜
    ͱ͸ຊ౰ʹগͳ͍ɻ
    ಺෦ͰύϑΥʔϚϯε;͘
    ΊͪΌΜͱͨ͠ൺֱΛߦͬ
    ͯ͘Ε͍ͯΔɻ

    View Slide

  20. 7BMUJPBSHVNFOUFEVTF4UBUF
    VTF4UBUFΛ֦ு͢
    Δ͜ͱ΋Ͱ͖ͨʂ
    ͓΄ʔʂʂ
    ʢVTF3FBDUJWF͸উख
    ʹ࡞ͬͨ΋ͷͰ͢ʣ

    View Slide

  21. ·ͱΊ
    γϯϓϧʹॻ͚Δʴ؆ૉʹॻ͚Δɹ
    3FBDUͷྑ͞Λ7VFͷྑ͞Λମײ͠ɺ
    ͱ͍͏ਤࣜΛٻΊͨɻ݁Ռ7BMUJPʹग़ձͬͨɻ
    ݁Ռɺ࠷ߴͰͨ͠ʂʂɹ

    View Slide

  22. ݒ೦
    ͱ͸͍͑ɾɾɾ
    γϯϓϧ͗͢ΔͨΊɺνʔϜ։ൃʹ͓͍ͯ͸
    ௚઀TUBUFΛॻ͖׵͑Δ TUBUFΫϥοΧʔ

    ॻ͖ํ͕·ͱ·Βͳ͍ʢDPEFεϓϨομʔʣ
    ͱ͍ͬͨײ͡ʹXBZʹ৐Εͳ͍ͷͰɺ͔ͬ͠Γͱํ
    ਑Λߟ͑ڞ༗͍ͯ͘͠ඞཁ͕͋Δؾ͕͢Δɻ

    View Slide

  23. ͱ͸͍͑ɺ͕͔ͩ͠͠
    ࣗ༝౓͕ݶΓͳ͘ߴ͍ͨΊ
    ࣗ෼Ͱ࡞Γ্ָ͍͛ͯ͘͠Έ
    ੈք؍ͷ࣮ݱ
    ΧελϚΠζੑͷ͔ͨ͞
    ͱ͍ͬͨϚΠϯΫϥϑτతͳָ͠͞͸ਵҰɻ

    View Slide

  24. ༨ஊ
    7BOJMB+4Ͱಈ͘͜ͱ΋Ұͭͷྑ͔͞΋
    QSPYZTUBUFΛ'& #&Ͱ

    ɹɹɹɹɹڞ༗͢ΔͨΊʹ࢖͏ͷ΋͋Γ͔΋ɻɻɻ

    View Slide

  25. ݁࿦ʢݸਓతͳײ૝ʣ
    ͜Ε͸ɺͱͯ΋͍͍΋ͷͩɻ
    εΩϧϨϕϧͷ෯޿͍νʔϜͩͱΉ͔ͳ͍͔΋
    ౷੍ͷͱΕͨνʔϜ͔ݸਓͩͱ޲͘
    ͱʹ͔͘γϯϓϧͳͷͰϙςϯγϟϧ͸ߴ͍͕ɺ
    ͦΕΛҾ͖ग़ͤΔͷ͔͸։ൃऀ࣍ୈɻ

    View Slide