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

7306d1333cb52f957f87017d175daa43?s=47 Yuka O’oka
November 01, 2018

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

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

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

7306d1333cb52f957f87017d175daa43?s=128

Yuka O’oka

November 01, 2018
Tweet

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. ؓ࿩ٳ୊ 3FUVSOUPPVSTVCKFDU

  13. Recomposeͱ͸ ؔ਺ίϯϙʔωϯτ΍ HOCʢίϯϙʔωϯτΛҾ਺ ʹͱΓɺػೳΛ߹੒ͨ͠৽͍͠ίϯϙʔωϯτΛฦ͢ ؔ਺ʣͷͨΊͷReactϢʔςΟϦςΟɻ ؔ਺ίϯϙʔωϯτʹ-PDBM4UBUF΍ϥΠϑαΠΫϧ ϝιουΛ௥Ճͨ͠Γɺෳ਺ͷ)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. ͝ਗ਼ௌ͋Γ͕ͱ͏
 ͍͟͝·ͨ͠