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

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

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

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