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

Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March

Yuka O’oka
November 01, 2018

Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March

React Conf 2018で公式に発表された React Hooks による影響について、今わかっている範囲で個人的にいろいろ考えたものです。

文中で紹介している本『りあクト! TypeScriptで始めるつらくないReact開発』は https://oukayuka.booth.pm/ で好評販売中。

Yuka O’oka

November 01, 2018
Tweet

More Decks by Yuka O’oka

Other Decks in Technology

Transcript

  1. recomposeͱ͸
    Կͩͬͨͷ͔ɺ
    Yuka O’oka @oukayuka
    Hooks
    ·ͨ͸
    ͷശʹ͍ͭͯͷߟ࡯
    ͕։͚ͨύϯυϥ

    View Slide

  2. Who is me?
    ϑϦʔϥϯεͰݱࡏ͸ReactΛઐ໳ʹ͢Δϑϩϯτ
    ΤϯυΤϯδχΞɻ։ൃΛத৺ʹڭҭ΍࠾༻ͷ͓ख఻
    ͍ɺΞδϟΠϧಋೖͳͲ΋੥͚ෛ͍·͢ɻReactྺ͸
    ೥൒΄ͲͰɺͦͷલ͸ओʹRailsͰ͓࢓ࣄΛͯ͠·
    ͨ͠ɻForkwellͷॳ୅ࣄۀ੹೚ऀˍϓϩμΫτϚωʔ
    δϟʔͱ͍͏ܦྺ΋͋Γ·͢ɻ
    େԬ༝Ղ Yuka O'oka

    View Slide

  3. Works
    ʰΓ͋Ϋτʂʱͱ͍͏ React ×
    TypeScriptͷຊ֨తͳೖ໳ॻΛ൦෍
    ͠·ͨ͠ɻ։࠵౰೔෦ɺޙ೔௨
    ൢͰ෦ͷ௨ࢉ໿෦ΛചΓ্
    ͛·ͨ͠ɻ
    ٕज़ॻయ ʹͯɺ
    2018೥10݄8೔ʹ։࠵͞Εͨ
    ۙ͘ɺ঎ۀࢽ൛΋ग़൛༧ఆɻ
    oukayuka.booth.pm
    BOOTH ʹͯݱࡏ΋޷ධൢചதʂ

    View Slide

  4. ReactΛ࢖͏ࡍʹඞཁͱͳΔݴޠɺؔ਺ܕϓϩάϥ
    ϛϯάɺίϯϙʔωϯτͷجຊݪଇͱ͍ͬͨجૅ͔
    Β࢝·Γɺۀ຿༻ͷେن໛։ൃΛߟྀͨ͠ɺ
    3FDPNQPTFΛ࢖ͬͨؔ਺ίϯϙʔωϯτʴHOC
    ͷϓϥΫςΟεʹਐΉͱ͍͏ߏ੒Ͱͨ͠ɻ

    View Slide

  5. React Conf 2018ͰͷެࣜʹΑΔ͜ͷεϐʔνɺಉ࣌
    ʹެ։͞Εͨ16.7.0-alpha.0ʹͯReact HooksͳΔ
    ػೳ͕௥Ճ͞Εͨ͜ͱ͕ൃද͞Ε·ͨ͠ɻ
    ͦΕ͔ΒΘ͔ͣ17೔ޙ…

    View Slide

  6. ͦͯ͠ྲྀΕ͖ͯͨ͜ͷπΠʔτ
    ʮ3FDPNQPTFɺϝϯς΍ΊΔͬͯΑʯ

    View Slide

  7. ʀТʀA

    View Slide

  8. ͍ܰύχοΫʹ

    View Slide

  9. ͦΜͳͱ͖ɺ
    ϙʔϯ̇
    ʮ͑ɺ୭ʁʯ

    View Slide

  10. ·͔͞ͷ%BOઌੜͰͨ͠ʢস
    ࠓճͷมߋͷ͍ͤͰɺ͋ͳͨͷࣥචϓϥϯ
    Λ୆ແ͠ʹͯ͠ΰϝϯͶɻ͍ͩ͡ΐ͏Ϳʁ
    ͦ͏ɺΑ͔ͬͨͰ͢ ??

    View Slide

  11. ͘͢͝ؾݣ͍ͷਓͰͨ͠ʜ
    Dan Abramov ઌੜɺ
    GitHub Issue ͚ͩͰͳ͘ɺ
    Reddit ͷٞ࿦΍ Twitter Ͱ
    ͷ൓Ԡ΋ࡉ͔͘ϑΥϩʔ͠
    ͍ͯͯɺ೔ຊޠͷπΠʔτ
    ʹ·ͰϦϓΛฦͯ͘͠ΕΔ
    Ջਓؾݣ͍ͷਓͰͨ͠ɻ

    View Slide

  12. ؓ࿩ٳ୊
    3FUVSOUPPVSTVCKFDU

    View Slide

  13. Recomposeͱ͸
    ؔ਺ίϯϙʔωϯτ΍ HOCʢίϯϙʔωϯτΛҾ਺
    ʹͱΓɺػೳΛ߹੒ͨ͠৽͍͠ίϯϙʔωϯτΛฦ͢
    ؔ਺ʣͷͨΊͷReactϢʔςΟϦςΟɻ
    ؔ਺ίϯϙʔωϯτʹ-PDBM4UBUF΍ϥΠϑαΠΫϧ
    ϝιουΛ௥Ճͨ͠Γɺෳ਺ͷ)0$Λ߹੒ͯ͠ͻͱ
    ͭʹͨ͠Γͱ͍ͬͨ༻్ʹ࢖ΘΕ͍ͯͨɻ
    IUUQTHJUIVCDPNBDEMJUFSFDPNQPTF

    View Slide

  14. Redux΍React RouterɺFormikɺreact-i18nextͱ
    ͍ͬͨଟ͘ͷαʔυύʔςΟϥΠϒϥϦ͕HOCͰ
    ػೳΛఏڙ͓ͯ͠Γɺؔ਺ίϯϙʔωϯτ + HOC
    + Recomposeͷ૊Έ߹Θͤ͸ɺҙࣝͷߴ͍։ൃऀ
    ͨͪʹͱͬͯమ൘ͱݴͬͯ΋աݴͰ͸ͳ͔ͬͨɻ

    View Slide

  15. ͳͥRecompose͸։ൃΛࢭΊΔͷ͔

    View Slide

  16. Recompose ͷ࡞ऀͰ͋Δ Andrew Clark ͕
    Facebook ʹδϣΠϯͯ͠ Hooks Λ࡞͔ͬͨΒɻ
    Ͳ͏ΓͰ Recompose ͷ withState ͱɺHooks ͷ
    useState ͕ࣅͯΔΘ͚Ͱ͢Ͷɻ

    View Slide

  17. ͦΕͰɺ͜Ε͔ΒͲ͏ͳΔͷʁ
    •ύϯυϥͷശ͸։͔ΕͨͷͰɺ΋͏ޙ໭Γ͸ͳ͍ɻ
    React ք۾͸ࠓޙɺHooks Λத৺ʹ࠶ฤ੒͞ΕΔ
    •HOCɺRender Props ͸ϑΣʔυΞ΢τ͍ͯ͘͠
    •Ϋϥείϯϙʔωϯτ΋ͦͷ͏ͪඇਪ঑ʹͳΓͦ͏ɻ
    ͭ·Γɺ͢΂͕ͯ FʢFunction ComponentʣʹͳΔ
    ݸਓత؍ଌൣғͰͷ༧ଌͰ͕͢ʜ

    View Slide

  18. •useEffect ʹΑΓɺϥΠϑαΠΫϧϝιου΋࢖ΘΕ
    ͳ͘ͳΔ
    •Redux ͕ͳ͘ͳΔ͜ͱ͸ͳ͍ͷͰ͸ɻͨͩ͠
    connect() ͷ୅ΘΓʹ useRedux() ͷΑ͏ͳΠϯλʔ
    ϑΣʔεʹͳΔ

    Provide React Hooks · Issue #1063 · reduxjs/react-redux
    •Hooks ରԠ͕஗ΕͨϥΠϒϥϦ͸ɺͦͷϙδγϣϯ
    Λ௥ΘΕΔ஍֪มಈ͕ى͖ͦ͏

    View Slide

  19. ʮ͜Μͳࠞཚͯͯ͠ React ͍ͩ͡ΐ͏Ϳͳͷʁʯ
    ͜ͷ૽ಈɺ3BJMTΛܥ͔Β࢖͍ͬͯͨࢲʹ͸طࢹײ͕
    ͋Γ·͢ʜɻ

    View Slide

  20. ͪΐ͏Ͳ೥લͷ೥݄೔ɺ3BJMTͷ࡞ऀ
    %BWJE)BOTTPOʢ%))ʣ͸ࣗ਎ͷϒϩάͰɺ࣍ظόʔ
    δϣϯͷ3BJMT͸ɺ౰࣌ʮΩϨΠͳ3BJMTʯͱͯ͠
    ੎ྗΛ৳͹͍ͯͨ͠.FSCͱ౷߹͞Εɺ·ͨ.FSC
    ͷ։ൃऀͨͪ΋3BJMTͷίΞνʔϜʹࢀՃ͢Δ͜ͱʹ
    ͳͬͨͱൃද͠·ͨ͠ɻ
    3BJMTίϛϡχςΟ͸૽વͱͳΓɺ೥͕͔ΓͰ
    ೥݄ʹ͕ϦϦʔε͞ΕΔ·Ͱࠞཚ͕ଓ͖·ͨ͠ɻ

    View Slide

  21. ϦϦʔε͞Εͨ3BJMT͸಺෦࣮૷తʹ͸Ή͠Ζ
    .FSCͱݺͿ΂͖΋ͷͰޙํޓ׵ੑ͸ͳ͍ʹ౳͔ͬ͠
    ͨͷͰ͕͢ɺͦͷ݁Ռɺ3BJMT͸ࠓօ͞Μ͕஌͍ͬͯΔ
    Α͏ͳϞδϡϥϦςΟ͕ߴ͘ɺΫϦʔϯͰɺ3&45GVM
    ͳϑϨʔϜϫʔΫʹੜ·ΕมΘͬͨͷͰͨ͠ɻɻ
    3FBDU΋ɺ3FEVYͷ%BO"CSBNPW΍
    3FDPNQPTFͷ"OESFX$MBSLΛίΞνʔϜʹऔΓ
    ࠐΈɺ͜ΕҎ্ޙͰ͸΋͏ݱ࣮తʹແཧɺͱ͍͏λΠ
    ϛϯάͰେ෯վมΛͿͬ͜ΜͰ͖·ͨ͠ɻ

    View Slide

  22. ͭ·Γɺࠓճͷ૽ಈ͸ΤϙοΫϝΠΩϯάͳϑϨʔ
    ϜϫʔΫ͕ɺ͞ΒͳΔීٴͷͨΊʹӡ໋తʹܦͳ͚
    Ε͹ͳΒͳ͍ɺ
    ͳͷͰ͸ɺͱࢲ͸ࢥ͏ͷͰ͢ɻ
    ೥ʹҰ౓ͷେมֵ

    View Slide

  23. ΫϥείϯϙʔωϯτΛഉͯؔ͠਺ίϯϙʔωϯτͷ
    ΈΛ༻͍ɺίϯϙʔωϯτͷϥΠϑαΠΫϧͰ͸ͳ͘ɺ
    ΑΓ֩৺తͳ)PPLTʹ෭࡞༻Λهड़͢Δͷ͸ɺ
    3FBDUͷୈҰݪଇͰ͋Δʮ%FDMBSFUJWFʢએݴతʣʯ
    ʹཱͪฦͬͯɺΑΓ 3FBDU
    Λγϯϓϧʹ͢Δ΋ͷͩͱ
    ߟ͑·͢ɻ

    View Slide

  24. ʮVTF&⒎FDUͷςετͲ͏΍ͬͯॻ͘ͷʁʯͱ
    ͔ʮDPNQPOFOU8JMM6ONPVOU࢖͑ͳ͍ͱϝϞ
    ϦϦʔΫى͜͢Μ͡Όͳ͍ͷʁʯͱ͍͏໰୊ʹ
    ͍ͭͯ͸ɺ%BOઌੜᐌ͘ʮ͜Ε͔Βߟ͑Δʯ
    ʢসʣͩͦ͏Ͱ͕͢ɺ3BJMTͷ೥ؒͷࠞཚͷ͜
    ͱΛߟ͑Ε͹ɺ3FBDUͷίΞνʔϜ͸΋ͬͱਝ
    ଎ʹࣄଶΛऩଋͯ͘͠ΕΔ΋ͷͱ৴͡·͢ɻ

    View Slide

  25. ʰΓ͋Ϋτʂʱ঎ۀࢽ൛͸ɺ3FBDU)PPLTΛ
    લఏͱͨ͠େ෯࡮৽ʹͳΔ༧ఆɺͱ͍͏͔ͦ͏
    ͤ͟ΔΛಘͳ͍ͷͰɺओཁͳαʔυύʔςΟϥ
    ΠϒϥϦΛؚΊͯҰ௨ΓରԠ͞Εɺϕετϓϥ
    ΫςΟεཱ͕֬͞Εͯɺ͜ͷࠞཚ͕೔΋ૣ͘
    ऩ·ͬͯ͘ΕͨΒ͍͍ͳ͋ɺͱ͍͏ظ଴ؚΈͰ
    ͕͢ʜʜɻ

    View Slide

  26. ͋ͱͰಡΉʗௌ͘
    Making Sense of React Hooks – Dan Abramov – Medium
    27: React Today and Tomorrow with the React Core Team | React Podcast

    View Slide

  27. ͝ਗ਼ௌ͋Γ͕ͱ͏

    ͍͟͝·ͨ͠

    View Slide