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

by Yuka O’oka

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ʀТʀA

Slide 8

Slide 8 text

͍ܰύχοΫʹ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ؓ࿩ٳ୊ 3FUVSOUPPVSTVCKFDU

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

•useEffect ʹΑΓɺϥΠϑαΠΫϧϝιου΋࢖ΘΕ ͳ͘ͳΔ •Redux ͕ͳ͘ͳΔ͜ͱ͸ͳ͍ͷͰ͸ɻͨͩ͠ connect() ͷ୅ΘΓʹ useRedux() ͷΑ͏ͳΠϯλʔ ϑΣʔεʹͳΔ  Provide React Hooks · Issue #1063 · reduxjs/react-redux •Hooks ରԠ͕஗ΕͨϥΠϒϥϦ͸ɺͦͷϙδγϣϯ Λ௥ΘΕΔ஍֪มಈ͕ى͖ͦ͏

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

͝ਗ਼ௌ͋Γ͕ͱ͏  ͍͟͝·ͨ͠