Upgrade to Pro — share decks privately, control downloads, hide ads and more …

まず Container より始めよ

honey32
September 25, 2023

まず Container より始めよ

https://yojo.connpass.com/event/294169/ のイベントの登壇資料です。

React のコンポーネント指向開発について、いくつかの誤解があります。(またはかつてありました。)これらの誤解を解きながら、「一つのコンポーネントが複雑で長大になる」「多くのコードジャンプを要して、全体像をつかみにくい」状況に陥らないためのコツを「Container コンポーネント」に着目して解説します。

honey32

September 25, 2023
Tweet

More Decks by honey32

Other Decks in Programming

Transcript

  1. ·ͣ $POUBJOFSΑΓ࢝ΊΑ • ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ • ੹຿Λ෼͚ΔͨΊͷίϯϙʔωϯτ ࠶ར༻͚͕ͩίϯϙʔωϯτ͡Όͳ͍ • DPMPDBUJPOܕͷσΟϨΫτϦߏ଄

    IPPLTVUJMTBUPNTNPMFDVMFT͸ద੾ͳ෼ྨ͡Όͳ͍ • খ͞ͳ $POUBJOFS • 1SFTFOUBUJPOBM$POUBJOFSͷ෼཭Λ࠶ධՁ 3FBDU4FSWFS $PNQPOFOU ΋͋ΔΑʂ • $POUBJOFS Λখ͘͢͞Δઓུͱʮ3FBDUͷྲّྀʯ
  2. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ Button Count Input CartProduct Card CartPage Sticky Buttons

    DIJMESFO ʮߪೖʹਐΉʯϘλϯ Λ্෦ʹݻఆ͢Δ ैདྷܕͷʮ࠶ར༻ʯۦಈͷߏ੒ʢϘτϜΞοϓʣ
  3. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ CartPage CartProduct Card CartProduct List CartProduct CountInput Button

    Sticky Buttons ੹຿ʹΑͬͯ੾Γ෼͚Δߏ੒ʢτοϓμ΢ϯ΋ަ͑Δʣ ബ͍എܠʜ۩ମత ೱ͍എܠʜந৅తɾ࠶ར༻
  4. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ CartPage CartProduct Card CartProduct List CartProduct CountInput Button

    Sticky Buttons $PMPDBUJPOͷσΟϨΫτϦߏ଄ ബ͍എܠʜ۩ମత ೱ͍എܠʜந৅తɾ࠶ར༻ BQQDBSU BQQ@DPNQPOFOUT
  5. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ CartPage CartProduct Card CartProduct List CartProduct CountInput Button

    "UPNJD%FTJHOͰ෼ྨ͢ΔσΟϨΫτϦߏ଄ 🙅 ബ͍എܠʜ۩ମత ೱ͍എܠʜந৅తɾ࠶ར༻ TSD@QBHFT BQQ@BUPNT BQQ@NPMFDVMFT TSD@PSHBOJTNT Ͳͬͪʁ Account Page Account HistorySection Account WhishLists Sticky Buttons ංେԽ🤯
  6. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ σΟϨΫτϦߏ଄ྫ /FYUKT ͷ "QQ3PVUFS app/ • _components/ ʜ൚༻తͳίϯϙʔωϯτ

    BUPNNPMFDVMFT • ஫ΞϯμʔείΞΛ಄ʹ෇͚ΔͱɺϧʔςΟϯάͷର৅֎ʹͳΔ • _form/ ʜྫԣஅతͳ GPSNपΓͷϢʔςΟϦςΟ • cart/ ʜαΠτͷ /cart ҎԼͷύε • page.tsx ʜαΠτͷ /cart ϖʔδͦͷ΋ͷ • layout.tsx ʜαΠτͷ /cart ҎԼͷڞ௨ϨΠΞ΢τ • product-list.tsx ʜ ProductList ίϯϙʔωϯτ • ஫FTMJOUQMVHJOJNQPSUBDDFTTΛ࢖ͬͯ QBDLBHFQSJWBUFʹ͢Δ͜ͱͰɺ໊લΛ୹͘Ͱ͖Δ
  7. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ ݁࿦ • ίϯϙʔωϯτΛࡉ͔͘෼͚Δ • ʮ࠶ར༻͢Δʯͱ͜Ζ͚ͩίϯϙʔωϯτʹ͢Δ༁͡Όͳ͍ • ίϯϙʔωϯτ಺͕ෳ਺ͷ੹຿ɾଟ͘ͷεςʔτΛ࣋ͬͯ൥ࡶʹͳͬ ͨΒɺ୯Ұ੹೚Λҙࣝͯ͠෼ׂ͠Α͏

    • DPMPDBUJPOΛҙࣝͯ͠σΟϨΫτϦΛ෼ׂ͠Α͏ • ্ͷݪଇΛकΔͱɺPSHBOJTN૬౰ͷίϯϙʔωϯτ͕૿͑Δ • ʮϨΠϠʔʯʮཻ౓ʯͷࢥߟʢྫ"UPNJ %FTJHOʣͰ෼ྨ͢Δͱ PSHBOJTN͕ͪ͝Όࠞͥʹͳͬͯ͠·͏ • ͔ͩΒʮͲ͜Ͱ࢖ΘΕΔ͔ʯΛΑ͘ߟ͑ͯσΟϨΫτϦΛ෼ׂ͠Α͏
  8. খ͞ͳ $POUBJOFS 1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭ ̍ͭͷίϯϙʔωϯτΛ $POUBJOFS 1SFTFOUBUJPOBM ͷ̎ϨΠϠʔʹ෼͚Δ ˠ ෆཁ

    શମ$POUBJOFS ߏ੒ཁૉ1SFTFOUBUJPOBM ͷΑ͏ʹ෼୲͢Δ ˠ ༗༻ 1SPEVDU1BHF$POUBJOFS 1SPEVDU1BHF 1SPEVDU1BHF $PMPS4FMFDU 4J[F4FMFDU ࣮࣭తʹόέπϦϨʔ ֤ίϯϙʔωϯτ͕े෼ʹখ͍͞
  9. খ͞ͳ $POUBJOFS $PMPS4FMFDU ίϯϙʔωϯτ • 63-ͷΫΤϦύϥϝʔλͷ ?colorCode=xx ͷ෦෼͕ มΘͬͨΒɺಡΈऔͬͯ൓ө •

    Ϣʔβʔ͕ΫϦοΫͯ͠৭Λ ม͑ͨΒɺ?colorCode=xx Λ มߋ SPVUFSSFQMBDF • બ୒ࢶ͸ 1SPQͰड͚औΔ ੡඼ࣸਅ Χϥʔ3&% αΠζ9- 1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭
  10. খ͞ͳ $POUBJOFS ੡඼ࣸਅ Χϥʔ3&% αΠζ9- $PMPS4FMFDU ίϯϙʔωϯτ • બ୒தͷ৭ͷίʔυ͸ AvalueA

    1SPQͰड͚औΔ • Ϣʔβʔ͕ΫϦοΫͯ͠৭Λ ม͑ͨΒɺ AonValueChange(newValue)A Λݺͼग़͢ • બ୒ࢶ͸ 1SPQͰड͚औΔ 1SPEVDU1BHF ίϯϙʔωϯτ • 63-ͷΫΤϦύϥϝʔλͷ ?colorCode=xx ͷ෦෼͕ มΘͬͨΒɺvalue ʹ൓ө • onValueChange ʹ൓Ԡ͠ ͯɺ?colorCode=xx Λมߋ SPVUFSSFQMBDF • બ୒ࢶ͸ 1SPQͰ౉͢ ਌ ࢠ 1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭
  11. খ͞ͳ $POUBJOFS ੡඼ࣸਅ Χϥʔ3&% αΠζ9- $PMPS4FMFDU ίϯϙʔωϯτ • `value` 1SPQʹ͍ͭͯɺ͍ΘΏΔ

    $POUSPMMFEίϯϙʔωϯτ • ʮΰνϟΰνϟʯΛҙࣝ͠ͳ͍ 1SFTFOUBUJPOBM ίϯϙʔωϯτ 1SPEVDU1BHF ίϯϙʔωϯτ • ϑϨʔϜϫʔΫσʔλऔಘ ґଘ ʮΰνϟΰνϟʯΛҾ͖ड͚Δ $POUBJOFSίϯϙʔωϯτ • ΫΤϦύϥϝʔλ • "1*ͱͷ௨৴ ଘࡏ͢Δ৭ͷબ୒ࢶ ਌ ࢠ 1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭
  12. খ͞ͳ $POUBJOFS ੡඼ࣸਅ Χϥʔ3&% αΠζ9- 1SFTFOUBUJPOBM ˠ l७ਮzԽ • 4UPSZCPPLͰςετ༰қʹ

    • ঢ়ଶɾ৚݅෼ذ͕ෳࡶԽͮ͠Β ͍ $POUBJOFS ˠ lҰཡੑͷ޲্z • ʮΰνϟΰνϟʯΛҰݩతʹ ؅ཧͰ͖ͯɺ ϒϥοΫϘοΫεԽΛ๷͛Δ • l७ਮzͳ΄͏ͷϩδοΫ͸ɺ ࢠʹԡ͠෇͚͍ͯΔͷͰɺ ίʔυ͕୹͘ͳΔ ਌ ࢠ 1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭ ˞ʮΰνϟΰνϟʯΛؚ·ͳ͍ͳΒ VTF4UBUF ͳͲͷϑοΫΛ ࢖ͬͯ΋໰୊ͳ͠ ྫ3BEJY6*
  13. খ͞ͳ $POUBJOFS ੡඼ࣸਅ Χϥʔ3&% αΠζ9- 1SFTFOUBUJPOBM $MJFOU 4FSWFS ྆ํ0, $POUBJOFS

    4FSWFS$PNQPOFOU %#౳͔ΒͷσʔλऔಘΛҾ͖ड͚Δ ਌ ࢠ 1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭
  14. খ͞ͳ $POUBJOFS େ͖͗͢Δ $POUBJOFS͸খ͘͞෼͚Δ %BTICPBSE1BHF D • ঎඼ҰཡΛऔಘ • ࠷৽ͷߪೖཤྺΛऔಘ

    1SPEVDUT4FDUJPO Q • ঎඼ҰཡΛදࣔ 3FDFOU1VSDIBTFT4FDUJPO Q • ࠷৽ͷߪೖཤྺҰཡΛදࣔ Q ʜ1SFTFOUBUJPOBM D ʜ$POUBJOFS %BTICPBSE1BHF D 1SPEVDUT4FDUJPO D • ঎඼ҰཡΛऔಘ • ͦΕΛදࣔ 3FDFOU1VSDIBTFT4FDUJPO D • ࠷৽ͷߪೖཤྺҰཡΛදࣔ • ͦΕΛදࣔ
  15. খ͞ͳ $POUBJOFS ʮͦΕͧΕͷখ$POUBJOFS͕୯Ұ੹೚ʹͳΔʯ ͱ͍͏ϝϦοτ • ʮ3FBDUͷྲّྀʯͬΆ͍ • ʮ঎඼Ұཡʯͷऔಘͱද͕ࣔ ࢠ 1SPEVDUT4FDUJPO

    ʹूΊΒΕɺ ਌ %BTICPBSE1BHF ͷ੹຿΋εϦϜԽ େ͖͗͢Δ $POUBJOFS͸খ͘͞෼͚Δ %BTICPBSE1BHF DPOUBJOFS 1SPEVDUT4FDUJPO DPOUBJOFS • ঎඼ҰཡΛऔಘ • ͦΕΛදࣔ 3FDFOU1VSDIBTFT4FDUJPO DPOUBJOFS • ࠷৽ͷߪೖཤྺҰཡΛදࣔ • ͦΕΛදࣔ
  16. খ͞ͳ $POUBJOFS ʮϖʔδ୯ҐͰσʔλΛऔಘ͢Δʯ ͱ͍͏੍໿ͷఫഇ JO/FYUKT • HFU4FSWFS4JEF1SPQT HFU4UBUJD1SPQT ˠ 3FBDU4FSWFS$PNQPOFOUT

    34$ • σʔλऔಘͷ୯Ґ͕ ʮϖʔδ ˠ খ $POUBJOFS 34$ ʯ ʹมΘͬͨ • 4VTQFOTFͰ෦෼తͳϩʔσΟϯάද͕ࣔՄೳ େ͖͗͢Δ $POUBJOFS͸খ͘͞෼͚Δ %BTICPBSE1BHF DPOUBJOFS 1SPEVDUT4FDUJPO DPOUBJOFS • ঎඼ҰཡΛऔಘ • ͦΕΛදࣔ 3FDFOU1VSDIBTFT4FDUJPO DPOUBJOFS • ࠷৽ͷߪೖཤྺҰཡΛදࣔ • ͦΕΛදࣔ
  17. খ͞ͳ $POUBJOFS ஫ҙࣄ߲ ෼͚͗͢ΔͱϒϥοΫϘοΫεԽͷ͓ͦΕ • $PNQPTJUJPO ύλʔϯ children 1SPQ Λ࢖ͬͯ

    $POUBJOFSͷҐஔΛઙ͘͢Δ • $PNQPTJUJPO͸ ʮ$MJFOU$PNQ ˠ 4FSWFS$PNQʯ ͷ޲͖ʹґଘͯ͠ॻ͚ͳ੍͍໿Λճආ ͢Δͷʹ΋໾ཱͭ • ˠ ͏·͘׆༻͢Ε͹ɺཧղ͠΍͘͢ อͬͨ··͔ͳΓࡉ͔͘෼ׂͰ͖Δʂ େ͖͗͢Δ $POUBJOFS͸খ͘͞෼͚Δ %BTICPBSE1BHF 1SPEVDU4FDUJPO /FX1SPEVDU%JBMPH $SFBUF1SPEVDU#VUUPO 4FSWFS"DUJPOΛݺͼग़͠
  18. ·ͱΊʮ·ͣ $POUBJOFSΑΓ࢝ΊΑʯ  $PMPDBUJPOݪଇͰσΟϨΫτϦΛ੾ΓɺࢄҳΛ๷͙  ϖʔδΛػೳ୯ҐͰ෼ׂ͢Δʢ୯ػೳͳΒͦͷ··ʣ  αʔόʔ͔Βͷσʔλऔಘɾߋ৽୯ҐͰɺ͞Βʹ෼ׂ΋Մೳ  ͦΕΒʮখ͞ͳ

    $POUBJOFSʯ͔ΒͳΔߏ଄Λࠎ૊Έͱͯ͠ɺ ࡉ͔ͳΠϯλϥΫγϣϯͷ೑෇͚ BQQDBSU BQQBDDPVOU Page Section Section Button Page Section SubSection Button p p p