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

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

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

Transcript

1. recomposeͱ͸ Կͩͬͨͷ͔ɺ Yuka O’oka @oukayuka Hooks ·ͨ͸ ͷശʹ͍ͭͯͷߟ࡯ ͕։͚ͨύϯυϥ
2. Who is me? ϑϦʔϥϯεͰݱࡏ͸
   React
   Λઐ໳ʹ͢Δϑϩϯτ ΤϯυΤϯδχΞɻ։ൃΛத৺ʹڭҭ΍࠾༻ͷ͓ख఻ ͍ɺΞδϟΠϧಋೖͳͲ΋੥͚ෛ͍·͢ɻReact
   ྺ͸ ೥൒΄ͲͰɺͦͷલ͸ओʹ
   Rails
   Ͱ͓࢓ࣄΛͯ͠· ͨ͠ɻForkwell
   ͷॳ୅ࣄۀ੹೚ऀˍϓϩμΫτϚωʔ δϟʔͱ͍͏ܦྺ΋͋Γ·͢ɻ େԬ༝Ղ Yuka O'oka
3. Works ʰΓ͋Ϋτʂʱͱ͍͏ React × TypeScript
   ͷຊ֨తͳೖ໳ॻΛ൦෍ ͠·ͨ͠ɻ։࠵౰೔෦ɺޙ೔௨ ൢͰ෦ͷ௨ࢉ໿෦ΛചΓ্ ͛·ͨ͠ɻ ٕज़ॻయ ʹͯɺ 2018೥10݄8೔ʹ։࠵͞Εͨ ۙ͘ɺ঎ۀࢽ൛΋ग़൛༧ఆɻ oukayuka.booth.pm BOOTH ʹͯݱࡏ΋޷ධൢചதʂ
4. React
   Λ࢖͏ࡍʹඞཁͱͳΔݴޠɺؔ਺ܕϓϩάϥ ϛϯάɺίϯϙʔωϯτͷجຊݪଇͱ͍ͬͨجૅ͔ Β࢝·Γɺۀ຿༻ͷେن໛։ൃΛߟྀͨ͠ɺ 3FDPNQPTF
   Λ࢖ͬͨؔ਺ίϯϙʔωϯτʴHOC
   ͷϓϥΫςΟεʹਐΉͱ͍͏ߏ੒Ͱͨ͠ɻ
5. React Conf 2018ͰͷެࣜʹΑΔ͜ͷεϐʔνɺಉ࣌ ʹެ։͞Εͨ16.7.0-alpha.0ʹͯ
   React Hooks
   ͳΔ ػೳ͕௥Ճ͞Εͨ͜ͱ͕ൃද͞Ε·ͨ͠ɻ ͦΕ͔ΒΘ͔ͣ17೔ޙ…
6. ͦͯ͠ྲྀΕ͖ͯͨ͜ͷπΠʔτ ʮ3FDPNQPTFɺϝϯς΍ΊΔͬͯΑʯ
7. ʀТʀA
8. ͍ܰύχοΫʹ
9. ͦΜͳͱ͖ɺ ϙʔϯ̇ ʮ͑ɺ୭ʁʯ
10. ·͔͞ͷ
    %BOઌੜͰͨ͠ʢস ࠓճͷมߋͷ͍ͤͰɺ͋ͳͨͷࣥචϓϥϯ Λ୆ແ͠ʹͯ͠ΰϝϯͶɻ͍ͩ͡ΐ͏Ϳʁ ͦ͏ɺΑ͔ͬͨͰ͢ ??
11. ͘͢͝ؾݣ͍ͷਓͰͨ͠ʜ Dan Abramov ઌੜɺ GitHub Issue ͚ͩͰͳ͘ɺ Reddit ͷٞ࿦΍ Twitter Ͱ ͷ൓Ԡ΋ࡉ͔͘ϑΥϩʔ͠ ͍ͯͯɺ೔ຊޠͷπΠʔτ ʹ·ͰϦϓΛฦͯ͘͠ΕΔ Ջਓؾݣ͍ͷਓͰͨ͠ɻ
12. ؓ࿩ٳ୊ 3FUVSO
    UP
    PVS
    TVCKFDU
13. Recompose
    ͱ͸ ؔ਺ίϯϙʔωϯτ΍ HOCʢίϯϙʔωϯτΛҾ਺ ʹͱΓɺػೳΛ߹੒ͨ͠৽͍͠ίϯϙʔωϯτΛฦ͢ ؔ਺ʣͷͨΊͷ
    React
    ϢʔςΟϦςΟɻ
    ؔ਺ίϯϙʔωϯτʹ
    -PDBM
    4UBUF
    ΍ϥΠϑαΠΫϧ ϝιουΛ௥Ճͨ͠Γɺෳ਺ͷ
    )0$
    Λ߹੒ͯ͠ͻͱ ͭʹͨ͠Γͱ͍ͬͨ༻్ʹ࢖ΘΕ͍ͯͨɻ IUUQTHJUIVCDPNBDEMJUFSFDPNQPTF
14. Redux
    ΍
    React Routerɺ
    Formikɺreact-i18next
    ͱ ͍ͬͨଟ͘ͷαʔυύʔςΟϥΠϒϥϦ͕
    HOC
    Ͱ ػೳΛఏڙ͓ͯ͠Γɺؔ਺ίϯϙʔωϯτ + HOC + Recompose
    ͷ૊Έ߹Θͤ͸ɺҙࣝͷߴ͍։ൃऀ ͨͪʹͱͬͯమ൘ͱݴͬͯ΋աݴͰ͸ͳ͔ͬͨɻ
15. ͳͥ
    Recompose
    ͸։ൃΛࢭΊΔͷ͔
16. Recompose ͷ࡞ऀͰ͋Δ Andrew Clark ͕ Facebook ʹδϣΠϯͯ͠ Hooks Λ࡞͔ͬͨΒɻ Ͳ͏ΓͰ Recompose ͷ withState ͱɺHooks ͷ useState ͕ࣅͯΔΘ͚Ͱ͢Ͷɻ
17. ͦΕͰɺ͜Ε͔ΒͲ͏ͳΔͷʁ •ύϯυϥͷശ͸։͔ΕͨͷͰɺ΋͏ޙ໭Γ͸ͳ͍ɻ React ք۾͸ࠓޙɺHooks Λத৺ʹ࠶ฤ੒͞ΕΔ •HOCɺRender Props ͸ϑΣʔυΞ΢τ͍ͯ͘͠ •Ϋϥείϯϙʔωϯτ΋ͦͷ͏ͪඇਪ঑ʹͳΓͦ͏ɻ ͭ·Γɺ͢΂͕ͯ FʢFunction ComponentʣʹͳΔ ݸਓత؍ଌൣғͰͷ༧ଌͰ͕͢ʜ
18. •useEffect ʹΑΓɺϥΠϑαΠΫϧϝιου΋࢖ΘΕ ͳ͘ͳΔ •Redux ͕ͳ͘ͳΔ͜ͱ͸ͳ͍ͷͰ͸ɻͨͩ͠ connect() ͷ୅ΘΓʹ useRedux() ͷΑ͏ͳΠϯλʔ ϑΣʔεʹͳΔ
 Provide React Hooks · Issue #1063 · reduxjs/react-redux •Hooks ରԠ͕஗ΕͨϥΠϒϥϦ͸ɺͦͷϙδγϣϯ Λ௥ΘΕΔ஍֪มಈ͕ى͖ͦ͏
19. ʮ͜Μͳࠞཚͯͯ͠ React ͍ͩ͡ΐ͏Ϳͳͷʁʯ ͜ͷ૽ಈɺ3BJMT
    Λܥ͔Β࢖͍ͬͯͨࢲʹ͸طࢹײ͕ ͋Γ·͢ʜɻ
20. ͪΐ͏Ͳ೥લͷ೥݄೔ɺ3BJMT
    ͷ࡞ऀ
    %BWJE
    )BOTTPOʢ%))ʣ͸ࣗ਎ͷϒϩάͰɺ࣍ظόʔ δϣϯͷ
    3BJMT
    
    ͸ɺ౰࣌ʮΩϨΠͳ
    3BJMTʯͱͯ͠ ੎ྗΛ৳͹͍ͯͨ͠
    .FSC
    ͱ౷߹͞Εɺ·ͨ
    .FSC
    ͷ։ൃऀͨͪ΋
    3BJMT
    ͷίΞνʔϜʹࢀՃ͢Δ͜ͱʹ ͳͬͨͱൃද͠·ͨ͠ɻ
    3BJMT
    ίϛϡχςΟ͸૽વͱͳΓɺ೥͕͔ΓͰ ೥݄ʹ
    
    ͕ϦϦʔε͞ΕΔ·Ͱࠞཚ͕ଓ͖·ͨ͠ɻ
21. ϦϦʔε͞Εͨ
    3BJMT
    
    ͸಺෦࣮૷తʹ͸Ή͠Ζ
    .FSC
    
    ͱݺͿ΂͖΋ͷͰޙํޓ׵ੑ͸ͳ͍ʹ౳͔ͬ͠ ͨͷͰ͕͢ɺͦͷ݁Ռɺ3BJMT
    ͸ࠓօ͞Μ͕஌͍ͬͯΔ Α͏ͳϞδϡϥϦςΟ͕ߴ͘ɺΫϦʔϯͰɺ3&45GVM
    ͳϑϨʔϜϫʔΫʹੜ·ΕมΘͬͨͷͰͨ͠ɻɻ
    3FBDU
    ΋ɺ3FEVY
    ͷ
    %BO
    "CSBNPW
    ΍
    3FDPNQPTF
    ͷ
    "OESFX
    $MBSL
    ΛίΞνʔϜʹऔΓ ࠐΈɺ͜ΕҎ্ޙͰ͸΋͏ݱ࣮తʹແཧɺͱ͍͏λΠ ϛϯάͰେ෯վมΛͿͬ͜ΜͰ͖·ͨ͠ɻ
22. ͭ·Γɺࠓճͷ૽ಈ͸ΤϙοΫϝΠΩϯάͳϑϨʔ ϜϫʔΫ͕ɺ͞ΒͳΔීٴͷͨΊʹӡ໋తʹܦͳ͚ Ε͹ͳΒͳ͍ɺ ͳͷͰ͸ɺͱࢲ͸ࢥ͏ͷͰ͢ɻ ೥ʹҰ౓ͷେมֵ
23. ΫϥείϯϙʔωϯτΛഉͯؔ͠਺ίϯϙʔωϯτͷ ΈΛ༻͍ɺίϯϙʔωϯτͷϥΠϑαΠΫϧͰ͸ͳ͘ɺ ΑΓ֩৺తͳ
    )PPLT
    ʹ෭࡞༻Λهड़͢Δͷ͸ɺ 3FBDU
    ͷୈҰݪଇͰ͋Δʮ%FDMBSFUJWFʢએݴతʣʯ ʹཱͪฦͬͯɺΑΓ
    3FBDU
    Λγϯϓϧʹ͢Δ΋ͷͩͱ ߟ͑·͢ɻ
24. ʮVTF&⒎FDU
    ͷςετͲ͏΍ͬͯॻ͘ͷʁʯͱ ͔ʮDPNQPOFOU8JMM6ONPVOU
    ࢖͑ͳ͍ͱϝϞ ϦϦʔΫى͜͢Μ͡Όͳ͍ͷʁʯͱ͍͏໰୊ʹ ͍ͭͯ͸ɺ%BOઌੜᐌ͘ʮ͜Ε͔Βߟ͑Δʯ ʢসʣͩͦ͏Ͱ͕͢ɺ3BJMT
    ͷ೥ؒͷࠞཚͷ͜ ͱΛߟ͑Ε͹ɺ3FBDU
    ͷίΞνʔϜ͸΋ͬͱਝ ଎ʹࣄଶΛऩଋͯ͘͠ΕΔ΋ͷͱ৴͡·͢ɻ
25. ʰΓ͋Ϋτʂʱ঎ۀࢽ൛͸ɺ3FBDU
    )PPLT
    Λ લఏͱͨ͠େ෯࡮৽ʹͳΔ༧ఆɺͱ͍͏͔ͦ͏ ͤ͟ΔΛಘͳ͍ͷͰɺओཁͳαʔυύʔςΟϥ ΠϒϥϦΛؚΊͯҰ௨ΓରԠ͞Εɺϕετϓϥ ΫςΟεཱ͕֬͞Εͯɺ͜ͷࠞཚ͕೔΋ૣ͘ ऩ·ͬͯ͘ΕͨΒ͍͍ͳ͋ɺͱ͍͏ظ଴ؚΈͰ ͕͢ʜʜɻ
26. ͋ͱͰಡΉʗௌ͘ Making Sense of React Hooks – Dan Abramov – Medium 27: React Today and Tomorrow with the React Core Team | React Podcast
27. ͝ਗ਼ௌ͋Γ͕ͱ͏
 ͍͟͝·ͨ͠