Tweet
Tweet

Slide 1

Slide 1 text

ྩ࿨ͷঢ়ଶ؅ཧ 2022/07/24 jhcoder

Slide 2

Slide 2 text

Agenda - ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ - ঢ়ଶ؅ཧͷભҠ - Redux vs Context API - Redux ͱ Recoil - react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏͢ʍΊ - summary

Slide 3

Slide 3 text

ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ

Slide 4

Slide 4 text

ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ - ϑϩϯτΤϯυք۾Ͱසൟʹඈͼަ͏ϫʔυʮঢ়ଶ؅ཧʯ - ʮঢ়ଶ؅ཧʯͱ͸ɺSPA։ൃʹ͓͍ͯεςʔτϨεʹUIΛ࣮૷͢Δ্Ͱඞͣൃੜ͢Δ ʮͰ͸ɺ Ͳ͜ʹɾͲ͏΍ͬͯঢ়ଶΛ࣋ͭͷ͔ʁʯ

Slide 5

Slide 5 text

SPAओྲྀલͷϑϩϯτΤϯυ

Slide 6

Slide 6 text

ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ ͜ͷࠒ͸σʔλΛ੩తͳHTMLʹม׵͢Δ͚ͩͰγϯϓϧͩͬͨ σʔλΛϧʔϓ΍৚݅෼ذɺม਺ຒࠐΛۦ࢖ͯ͠HTMLʹม׵͢Δͱ͍ͬͨ͜ͱ͕ϝΠϯͩͬ ͨɻ ͜ͷ ViewͷߏஙʹςϯϓϨʔτΤϯδϯͰ͋Δ jsp΍BladeͳͲͱݴΘΕΔٕज़͕࢖ΘΕ͍ͯͨ όοΫΤϯυͷMVCϑϨʔϜϫʔΫ͝ͱʹҟͳΔςϯϓϨʔτΤϯδϯͷه๏Λशಘ͠ͳ͚Ε ͹ͳΒͳ͍ͱ͍͏໰୊΋͋Γͭͭ΋ɺ·͊γϯϓϧͩͬͨɻ =>ͩͬͯ UIͷߏங͕ σʔλͱςϯϓϨʔτΛೖྗ ͱͯ͠ HTMLΛग़ྗ ͢Δ͚ͩͷ ؔ਺తͳ ॲ ཧͷΈͰ׬ྃͰ͖͔ͨΒ

Slide 7

Slide 7 text

࣌୅͸SPA΁

Slide 8

Slide 8 text

ϑϩϯτΤϯυʹ͓͚Δঢ়ଶ؅ཧʹ͍ͭͯ Ϣʔβʔͷϒϥ΢β্ͰಈతʹUI͕มԽ͢Δ ʮUIͷҠΓมΘΓʯ - σʔλΛඇಉظʹड͚औΔ - ϦΞϧλΠϜͳόϦσʔγϣϯ - ϖʔδ಺ͷλϒ੾Γସ͑ ͳͥ͜Ε͕ෳࡶ͞Λ࣋ͬͯ͠·͏ͷ͔ʁ => UIΛมԽͤ͞Δʹ͸1ͭલͷDOMͷঢ়ଶʹखΛ͘Θ͑ଓ͚Δ͜ͱʹͳΔ͔Β => DOMͷ଍͠ࢉ΍Ҿ͖ࢉΛڧ੍͍ͤͯ͞ΔɻUIͱϩδοΫ͕ີ݁߹ͳঢ়ଶɻɻɻ

Slide 9

Slide 9 text

ঢ়ଶ؅ཧͷભҠ

Slide 10

Slide 10 text

ঢ়ଶ؅ཧͷભҠ Reactಋೖ (Flux) SPAͷొ৔ Reduxͱ Presntational Container Components Hooks౸དྷ connect HOC SWR ͱ react-query

Slide 11

Slide 11 text

Reactಋೖ (Flux) - SPA εϚϗͷొ৔ - Ծ૝DOMͱ୯Ұσʔλϑϩʔ https://qiita.com/mizchi/items/4d25bc26def1719d52e6 ReactͱFluxͷࠜఈʹ͋Δɺ୯Ұํ޲ͷσʔλϑϩʔͱͦΕͰ΋એݴతUIɾVirtual DomʹΑΔ ࠩ෼ߋ৽ʹΑͬͯrenderΛ཈੍ՄೳͳΞʔΩςΫνϟ

Slide 12

Slide 12 text

ReduxͱPresntational/Container Components ࡞੒͞ΕΔΞϓϦέʔγϣϯͷڊେԽɺFEΩοπΠ Dan AbramovͷʮPresentational and Container Componentsʯ https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 > Storeʹ઀ଓ͢ΔContainer Component/Presentational ComponentΛ໌֬ʹ෼͚Δํ਑͕ͦ ͷ࣠ͱͳ͓ͬͯΓɺStoreͱConnect͞Εͨ෦෼ΛߜΔ͜ͱͰؔ৺ࣄ͕෼཭Ͱ͖ɺ࠶ར༻ੑ͕ߴ ·Δ

Slide 13

Slide 13 text

Hooks౸དྷ ࠓ·Ͱ͸ connectΛ༻͍͍ͯͨɻHOCͷ૊Έํ͕ओྲྀ͕ͩͬͨ͜Ε͕HooksͰྑ͍ͷͰ͸ͱ ͍ͬͨٞ࿦͕᷿Ͱ࿩୊ɻ ޙड़͢Δ Context APIͷ׆༻ʹΑΔ୤Reduxͱ͍ͬͨ΋ͷ΋ useReducer + useContext Ͱ͞ΑͳΒRedux

Slide 14

Slide 14 text

SWR ͱ react-query Next.jsɹͱͷ૊Έ߹ΘͤͰঢ়ଶ؅ཧ΋ΩϟογϡઓུʹΑ࣮ͬͯݱͰ͖ΔΑ͏ʹͳͬͨɻ ʮ෦෼࠶ඳըස౓ʯ͕ߴ͍ΞϓϦέʔγϣϯʹ࠷ద revalidate option Λௐ੔͢Δ͜ͱͰ࢖༻༻్͸ଟذʹ౉Γ·͢ɻʮpolling Λ༻͍ͯҰఆִؒͰ ࠷৽ͷσʔλΛऔಘ͢Δʯͱ͍͏ۃ୺ͳ͜ͱ͔ΒʮϖʔδΛϦϩʔυ͠ͳ͍ݶΓɺҰ౓fetch͠ ͨσʔλΛ࠶ར༻͠ଓ͚Δʯͱ͍͏Ԡ༻΋ՄೳʹͳΔɻ https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020

Slide 15

Slide 15 text

Redux vs Context API

Slide 16

Slide 16 text

݁ہͲ͏͢Ε͹Α͍ʁ Ͳͬͪ࢖͑͹ྑ͍ʁ

Slide 17

Slide 17 text

݁࿦: ϓϩδΣΫτʹΑΔ

Slide 18

Slide 18 text

Redux vs Context API - ReduxͱContext APIͷҧ͍ - ϝΠϯετϨʔδͷ਺ - Middlewareͷ༗ແ - ෳࡶ͞ - Ͳͷ࣌ͷͲΕΛ࢖͑͹͍͍ͷʁʁ

Slide 19

Slide 19 text

Redux vs Context API ## Redux͕Φεεϝ(redux-toolkit͸࢖͏લఏ) - ΞϓϦέʔγϣϯͷن໛͕େ͖͍ - άϩʔόϧͳstate؅ཧػೳҎ֎ʹ΋ଟ༷ͳػೳ͕΄͍͠(σόοά΍ϩΪϯάͳͲ) - ඇಉظॲཧ͢Δ͜ͱ͕ଟ͍ ## Context API͕Φεεϝ - ΞϓϦέʔγϣϯͷن໛͕େ͖͘ͳ͍ - άϩʔόϧͳstate؅ཧػೳ͚ͩͰे෼ - ඇಉظॲཧ͢Δ͜ͱ͕͋·Γͳ͍

Slide 20

Slide 20 text

ReduxͱRecoil

Slide 21

Slide 21 text

ਅଧRecoil

Slide 22

Slide 22 text

ReduxͱRecoil ݸਓతʹ͸Recoil࢖͏Ͱ໰୊ͳ͍ͱࢥͬͯΔɻҎԼൺֱɻ - ঢ়ଶ - ঢ়ଶͷߋ৽ - ঢ়ଶมԽͷview΁ͷ఻ൖ - ඇಉظॲཧ

Slide 23

Slide 23 text

ReduxͱRecoil - ঢ়ଶ લड़ͨ͠Α͏ʹRedux͸Ұͭͷstore Recoil͸ෳ਺ͷখ͞ͳatoms

Slide 24

Slide 24 text

ReduxͱRecoil - ঢ়ଶͷߋ৽ Redux: actionΛdispatch => reducerͰঢ়ଶ͍͡Δ recoil: atoms Λߋ৽͢Δ → Selector ͕ߋ৽͞ΕΔ ͪͳΈʹrecoil͸SelectorΛ༻͍ΔͷͰґଘؔ܎ͷߋ৽ʹ͓͍ͯ ஋͕ඞཁʹͳͬͨ࣌ʹऔಘ͞ ΕΔͱ͍ͬͨಛ௃΋͋Δɻ

Slide 25

Slide 25 text

ReduxͱRecoil - ঢ়ଶมԽͷview΁ͷ఻ൖ Redux: ඞཁͳ State ΛऔΓग़ͯ͠ɺมԽ͕͋Ε͹ߋ৽͢Δ react-redux Ͱ͸ಛఆͷ State ͕มߋ͞Εͨ࣌ʹ͚ͩ React Component Λ࠶ඳը͢ΔͨΊʹ ʮηϨΫλʔؔ਺ʯΛ༻͍Δɻ

Slide 26

Slide 26 text

ReduxͱRecoil - ঢ়ଶมԽͷview΁ͷ఻ൖ Recoil: ඞཁͳ atoms/Selector ͷΈ Subscribe ͢Δ

Slide 27

Slide 27 text

ReduxͱRecoil - ඇಉظॲཧ Redux: start / done / fail ͷঢ়ଶ͸࣋ͨͳ͍ͱμϝ ඇಉظͳactionΛ࡞Δɻ(https://qiita.com/kentac55/items/8333dbc3f65e50400dd7) Recoil: SelectorΛඇಉظʹ͢Δ

Slide 28

Slide 28 text

ReduxͱRecoil - ͭ·Γ….? ݸਓతʹ͸Recoil - Reduxಉ༷ͷ୯Ұํ޲σʔλϑϩʔͰͷ࣮૷ - Reduxͱൺֱͯ͠ߏ੒͕খ͘͞࢖͍΍͍͢ - Hooksͷ૬ੑ - ΧϓηϧԽ ref: https://tech.kitchhike.com/entry/recoil

Slide 29

Slide 29 text

react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏

Slide 30

Slide 30 text

react-queryͷৄࡉͳॻ͖ํͱ͔͸ׂѪ

Slide 31

Slide 31 text

react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏ - https://tkdodo.eu/blog/react-query-as-a-state-manager > React Query͕࣮ࡍʹ͸σʔλϑΣονϥΠϒϥϦͰ͸ͳ͍ɺඇಉظͷঢ়ଶ؅ཧͰ͋Δ

Slide 32

Slide 32 text

react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏ > React Query is great at managing async state globally in your app, if you let it. Only turn off the refetch f lags if you know that make sense for your use-case, and resist the urge to sync server data to a different state manager. Usually, customizing staleTime is all you need to get a great ux while also being in control of how often background updates happen. ࠶ϑΣονϑϥάΛΦϑʹ͢Ε͹ɺ࢒ͬͨ਺গͳ͍ΫϥΠΞϯτঢ়ଶͷͨΊʹɺRedux΍Recoil ͷผͷঢ়ଶ؅ཧΛ࢖Θͳͯ͘ࡁΉΑ͏ʹͳΔΑͱݴͬͯΔ

Slide 33

Slide 33 text

react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏ ൺֱͱͯ͠ग़ͯ͘Δ SWR - key໊ʹؔͯ͠ react query ͸key໊ͱurl͕෼͔Ε͍ͯΔ SWR͸͜Ε͕ಉ͡

Slide 34

Slide 34 text

react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏ ൺֱͱͯ͠ग़ͯ͘Δ SWR - SWRͱreact query ͷGlobal State get͚ͩͷΩϟογϡ͚ͩΛߟ͑Ε͹ => SWR APIͷΩϟογϯάͷΈɻ global stateʹؔͯ͠͸ContextΛ࡞Δඞཁ͕͋Δɻ react-query ͸ RefetchΈ͍ͨͳॻ͖ํ΋Ͱ͖Δ ɺӬԕʹfetchͤͣɺglobal stateΈ͍ͨͳѻ͍ํ΋Ͱ͖ Δɻ ֦ுੑ͕͋Δͱ͍͏ϝϦοτɻ ͜ΕʹΑΓglobal state ʹؔͯ͠ߟ͑ͳͯ͘ྑ͘ͳΔͷ͕ڧ͍

Slide 35

Slide 35 text

react-query Λঢ়ଶ؅ཧϥΠϒϥϦͱͯ͠࢖͏ ൺֱͱͯ͠ग़ͯ͘Δ SWR - mutateʹؔͯ͠͸ಉ͔͡ʁ(POST method) react-query ʹ͸ useMutation ͕͋Δ SWR΋ mutate() Λ࣋ͭͷͰՄೳ

Slide 36

Slide 36 text

summary - ঢ়ଶ؅ཧϥΠϒϥϦͷબఆ͸ϓϩδΣΫτͷੑ࣭ʹΑͬͯมΘΔ - Redux vs Context API Ͱ͸middlewareΒ΁Μ͕ΩϞʹͳΔ͕ɺRecoil͸set͕ඇಉظͷPromiseΛऔΕΔ ͷͰ redux middleware Ͱଟஈ dispatch ͢ΔΈ͍ͨͳ͜ͱ͸Ͱ͖ͦ͏ - ͱͳΔͱ Recoilʹ܉ഋ্͕Δ͔ʁ(͔ͦ͠͠ͷͨΊʹ͸ promise + suspense ͱͳΓͦ͏ɻ) - (ݱࡏsuspense͸css in jsͱͷ૬ੑ͕ѱ͍ͷͰ ੈͷத͕SSR Streamingʹద߹͢Δ·Ͱ·ͬͨํ͕ྑ͍ ͔ʁ) - Ωϟογϡઓུ͕࢖͑ΔͳΒ SWR or react-query - ͔͠͠ SWR͸ globalͳঢ়ଶΛ࣋ͭͱ͖ʹ୯ମͰ͸ݫ͍͠ͷͰ fetchͤͣglobalͳঢ়ଶΛ࣋ͯΔreact- queryͷํ͕ྑ͖͔ʁ

Slide 37

Slide 37 text

΋͏ͪΐ͍react-query΍suspense΋ ۷ΓԼ͛ͳ͍ͱ͍͚ͳ͍͜ͱ͕ ෼͔ͬͨͷͰͪΐͬͱษڧ͖ͯ͠·͢🙇

Slide 38

Slide 38 text

Ref - https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020 - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 - https://zenn.dev/gagaga/articles/state-management - https://zenn.dev/luvmini511/articles/61e8e54853bc13 - https://mizchi.dev/study-recoil

Slide 39

Slide 39 text

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ