まず Container より始めよ

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

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

Transcript

1. ·ͣ $POUBJOFS ΑΓ࢝ΊΑ IPOFZ :6.&.*
   *OD 
2. ·ͣ $POUBJOFS
   ΑΓ࢝ΊΑ • ެࣜ %PD
   ͔ΒֶͿʮ3FBDU
   ͷྲّྀʯ • ੹຿Λ෼͚ΔͨΊͷίϯϙʔωϯτ ࠶ར༻͚͕ͩίϯϙʔωϯτ͡Όͳ͍ • DPMPDBUJPO
   ܕͷσΟϨΫτϦߏ଄ IPPLT
   VUJMT
   BUPNT
   NPMFDVMFT
   ͸ద੾ͳ෼ྨ͡Όͳ͍ • খ͞ͳ $POUBJOFS • 1SFTFOUBUJPOBM
   
   $POUBJOFS
   ͷ෼཭Λ࠶ධՁ 3FBDU
   4FSWFS $PNQPOFOU ΋͋ΔΑʂ • $POUBJOFS Λখ͘͢͞Δઓུͱʮ3FBDU
   ͷྲّྀʯ
3. ެࣜ %PD
   ͔ΒֶͿ ʮ3FBDU
   ͷྲّྀʯ
4. ެࣜ %PD
   ͔ΒֶͿʮ3FBDU
   ͷྲّྀʯ ίϯϙʔωϯτʹ·ͭΘΔ Α͋͘Δצҧ͍ • ϓϩδΣΫτͷதͰԿ౓΋ग़ͯ͘Δ෦඼ ྫʮϘλϯʯʮϔομʔʯ • औΓѻ͏୯ମͷʮϞϊʯ ओʹϦετ಺
   ྫʮهࣄʯʮ঎඼ʯ ʜ
   Λڞ௨ԽɾϞσϧԽ͢Δͷʹ࢖͏ΜͰ͠ΐʁ ͚ͩ͡Όͳ͍ʂ
5. ެࣜ %PD
   ͔ΒֶͿʮ3FBDU
   ͷྲّྀʯ https://ja.react.dev/learn/thinking-in-react
6. ެࣜ %PD
   ͔ΒֶͿʮ3FBDU
   ͷྲّྀʯ https://ja.react.dev/learn/your-first- component#components-all-the-way-down
7. ެࣜ %PD
   ͔ΒֶͿʮ3FBDU
   ͷྲّྀʯ Button Count Input CartProduct Card CartPage Sticky Buttons DIJMESFO
   ʮߪೖʹਐΉʯϘλϯ
   Λ্෦ʹݻఆ͢Δ ैདྷܕͷʮ࠶ར༻ʯۦಈͷߏ੒ʢϘτϜΞοϓʣ
8. ެࣜ %PD
   ͔ΒֶͿʮ3FBDU
   ͷྲّྀʯ CartPage CartProduct Card CartProduct List CartProduct CountInput Button Sticky Buttons ੹຿ʹΑͬͯ੾Γ෼͚Δߏ੒ʢτοϓμ΢ϯ΋ަ͑Δʣ ബ͍എܠʜ۩ମత ೱ͍എܠʜந৅తɾ࠶ར༻
9. ެࣜ %PD
   ͔ΒֶͿʮ3FBDU
   ͷྲّྀʯ CartPage CartProduct Card CartProduct List CartProduct CountInput Button Sticky Buttons $PMPDBUJPO
   ͷσΟϨΫτϦߏ଄ ബ͍എܠʜ۩ମత ೱ͍എܠʜந৅తɾ࠶ར༻ BQQDBSU BQQ@DPNQPOFOUT
10. ެࣜ %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 ංେԽ
    🤯
11. ެࣜ %PD
    ͔ΒֶͿʮ3FBDU
    ͷྲّྀʯ σΟϨΫτϦߏ଄ྫ /FYUKT ͷ "QQ
    3PVUFS app/ • _components/ ʜ
    ൚༻తͳίϯϙʔωϯτ BUPN
    
    NPMFDVMFT • ஫
    ΞϯμʔείΞΛ಄ʹ෇͚ΔͱɺϧʔςΟϯάͷର৅֎ʹͳΔ • _form/ ʜ
    ྫ
    ԣஅతͳ GPSN
    पΓͷϢʔςΟϦςΟ • cart/ ʜ
    αΠτͷ /cart ҎԼͷύε • page.tsx ʜ
    αΠτͷ /cart ϖʔδͦͷ΋ͷ • layout.tsx ʜ
    αΠτͷ /cart ҎԼͷڞ௨ϨΠΞ΢τ • product-list.tsx ʜ ProductList ίϯϙʔωϯτ • ஫
    FTMJOUQMVHJOJNQPSUBDDFTT
    Λ࢖ͬͯ QBDLBHFQSJWBUF
    ʹ͢Δ͜ͱͰɺ໊લΛ୹͘Ͱ͖Δ
12. ެࣜ %PD
    ͔ΒֶͿʮ3FBDU
    ͷྲّྀʯ ݁࿦ • ίϯϙʔωϯτΛࡉ͔͘෼͚Δ • ʮ࠶ར༻͢Δʯͱ͜Ζ͚ͩίϯϙʔωϯτʹ͢Δ༁͡Όͳ͍ • ίϯϙʔωϯτ಺͕ෳ਺ͷ੹຿ɾଟ͘ͷεςʔτΛ࣋ͬͯ൥ࡶʹͳͬ ͨΒɺ୯Ұ੹೚Λҙࣝͯ͠෼ׂ͠Α͏ • DPMPDBUJPO
    Λҙࣝͯ͠σΟϨΫτϦΛ෼ׂ͠Α͏ • ্ͷݪଇΛकΔͱɺPSHBOJTN
    ૬౰ͷίϯϙʔωϯτ͕૿͑Δ • ʮϨΠϠʔʯʮཻ౓ʯͷࢥߟʢྫ
    "UPNJ %FTJHOʣͰ෼ྨ͢Δͱ PSHBOJTN
    ͕ͪ͝Όࠞͥʹͳͬͯ͠·͏ • ͔ͩΒʮͲ͜Ͱ࢖ΘΕΔ͔ʯΛΑ͘ߟ͑ͯσΟϨΫτϦΛ෼ׂ͠Α͏
13. খ͞ͳ $POUBJOFS
14. খ͞ͳ $POUBJOFS 1SFTFOUBUJPOBM
    ͱ $POUBJOFS
    ͷ෼཭ ̍ͭͷίϯϙʔωϯτΛ $POUBJOFS 
    1SFTFOUBUJPOBM
    ͷ̎ϨΠϠʔʹ෼͚Δ ˠ ෆཁ શମ
    $POUBJOFS ߏ੒ཁૉ
    1SFTFOUBUJPOBM ͷΑ͏ʹ෼୲͢Δ ˠ ༗༻ 1SPEVDU1BHF$POUBJOFS 1SPEVDU1BHF 1SPEVDU1BHF $PMPS4FMFDU 4J[F4FMFDU ࣮࣭తʹόέπϦϨʔ ֤ίϯϙʔωϯτ͕े෼ʹখ͍͞
15. খ͞ͳ $POUBJOFS $PMPS4FMFDU ίϯϙʔωϯτ • 63-
    ͷΫΤϦύϥϝʔλͷ ?colorCode=xx ͷ෦෼͕ มΘͬͨΒɺಡΈऔͬͯ൓ө • Ϣʔβʔ͕ΫϦοΫͯ͠৭Λ ม͑ͨΒɺ?colorCode=xx Λ มߋ SPVUFSSFQMBDF • બ୒ࢶ͸ 1SPQ
    Ͱड͚औΔ ੡඼ࣸਅ Χϥʔ
    3&% αΠζ
    9- 1SFTFOUBUJPOBM
    ͱ $POUBJOFS
    ͷ෼཭
16. খ͞ͳ $POUBJOFS ੡඼ࣸਅ Χϥʔ
    3&% αΠζ
    9- $PMPS4FMFDU ίϯϙʔωϯτ • બ୒தͷ৭ͷίʔυ͸ AvalueA
    1SPQ
    Ͱड͚औΔ • Ϣʔβʔ͕ΫϦοΫͯ͠৭Λ ม͑ͨΒɺ AonValueChange(newValue)A Λݺͼग़͢ • બ୒ࢶ͸ 1SPQ
    Ͱड͚औΔ 1SPEVDU1BHF ίϯϙʔωϯτ • 63-
    ͷΫΤϦύϥϝʔλͷ ?colorCode=xx ͷ෦෼͕ มΘͬͨΒɺvalue ʹ൓ө • onValueChange ʹ൓Ԡ͠ ͯɺ?colorCode=xx Λมߋ SPVUFSSFQMBDF • બ୒ࢶ͸ 1SPQ
    Ͱ౉͢ ਌ ࢠ 1SFTFOUBUJPOBM
    ͱ $POUBJOFS
    ͷ෼཭
17. খ͞ͳ $POUBJOFS ੡඼ࣸਅ Χϥʔ
    3&% αΠζ
    9- $PMPS4FMFDU ίϯϙʔωϯτ • `value` 1SPQʹ͍ͭͯɺ͍ΘΏΔ $POUSPMMFE
    ίϯϙʔωϯτ • ʮΰνϟΰνϟʯΛҙࣝ͠ͳ͍ 1SFTFOUBUJPOBM ίϯϙʔωϯτ 1SPEVDU1BHF ίϯϙʔωϯτ • ϑϨʔϜϫʔΫ
    σʔλऔಘ ґଘ ʮΰνϟΰνϟʯΛҾ͖ड͚Δ $POUBJOFS
    ίϯϙʔωϯτ • ΫΤϦύϥϝʔλ • "1*
    ͱͷ௨৴ ଘࡏ͢Δ৭ͷબ୒ࢶ ਌ ࢠ 1SFTFOUBUJPOBM
    ͱ $POUBJOFS
    ͷ෼཭
18. খ͞ͳ $POUBJOFS ੡඼ࣸਅ Χϥʔ
    3&% αΠζ
    9- 1SFTFOUBUJPOBM ˠ l७ਮz
    Խ • 4UPSZCPPL
    Ͱςετ༰қʹ • ঢ়ଶɾ৚݅෼ذ͕ෳࡶԽͮ͠Β ͍ $POUBJOFS ˠ lҰཡੑͷ޲্z • ʮΰνϟΰνϟʯΛҰݩతʹ ؅ཧͰ͖ͯɺ ϒϥοΫϘοΫεԽΛ๷͛Δ • l७ਮz
    ͳ΄͏ͷϩδοΫ͸ɺ ࢠʹԡ͠෇͚͍ͯΔͷͰɺ ίʔυ͕୹͘ͳΔ ਌ ࢠ 1SFTFOUBUJPOBM
    ͱ $POUBJOFS
    ͷ෼཭ ˞ʮΰνϟΰνϟʯΛؚ·ͳ͍ͳΒ VTF4UBUF ͳͲͷϑοΫΛ ࢖ͬͯ΋໰୊ͳ͠ ྫ
    3BEJY
    6*
19. খ͞ͳ $POUBJOFS ੡඼ࣸਅ Χϥʔ
    3&% αΠζ
    9- 1SFTFOUBUJPOBM $MJFOU
     4FSWFS ྆ํ0, $POUBJOFS 4FSWFS
    $PNQPOFOU %#౳͔ΒͷσʔλऔಘΛҾ͖ड͚Δ ਌ ࢠ 1SFTFOUBUJPOBM
    ͱ $POUBJOFS
    ͷ෼཭
20. খ͞ͳ $POUBJOFS େ͖͗͢Δ $POUBJOFS
    ͸খ͘͞෼͚Δ %BTICPBSE1BHF D • ঎඼ҰཡΛऔಘ • ࠷৽ͷߪೖཤྺΛऔಘ 1SPEVDUT4FDUJPO Q • ঎඼ҰཡΛදࣔ 3FDFOU1VSDIBTFT4FDUJPO Q • ࠷৽ͷߪೖཤྺҰཡΛදࣔ Q
    ʜ
    1SFTFOUBUJPOBM D
    ʜ
    $POUBJOFS %BTICPBSE1BHF D 1SPEVDUT4FDUJPO D • ঎඼ҰཡΛऔಘ • ͦΕΛදࣔ 3FDFOU1VSDIBTFT4FDUJPO D • ࠷৽ͷߪೖཤྺҰཡΛදࣔ • ͦΕΛදࣔ
21. খ͞ͳ $POUBJOFS ʮͦΕͧΕͷখ$POUBJOFS͕୯Ұ੹೚ʹͳΔʯ ͱ͍͏ϝϦοτ • ʮ3FBDUͷྲّྀʯͬΆ͍ • ʮ঎඼Ұཡʯͷऔಘͱද͕ࣔ ࢠ 1SPEVDUT4FDUJPO ʹूΊΒΕɺ ਌ %BTICPBSE1BHF
    ͷ੹຿΋εϦϜԽ େ͖͗͢Δ $POUBJOFS
    ͸খ͘͞෼͚Δ %BTICPBSE1BHF DPOUBJOFS 1SPEVDUT4FDUJPO DPOUBJOFS • ঎඼ҰཡΛऔಘ • ͦΕΛදࣔ 3FDFOU1VSDIBTFT4FDUJPO DPOUBJOFS • ࠷৽ͷߪೖཤྺҰཡΛදࣔ • ͦΕΛදࣔ
22. খ͞ͳ $POUBJOFS ʮϖʔδ୯ҐͰσʔλΛऔಘ͢Δʯ ͱ͍͏੍໿ͷఫഇ JO
    /FYUKT • HFU4FSWFS4JEF1SPQT 
    HFU4UBUJD1SPQT ˠ 3FBDU
    4FSWFS
    $PNQPOFOUT
    34$ • σʔλऔಘͷ୯Ґ͕ ʮϖʔδ ˠ খ $POUBJOFS
    34$
    ʯ ʹมΘͬͨ • 4VTQFOTFͰ෦෼తͳϩʔσΟϯάද͕ࣔՄೳ େ͖͗͢Δ $POUBJOFS
    ͸খ͘͞෼͚Δ %BTICPBSE1BHF DPOUBJOFS 1SPEVDUT4FDUJPO DPOUBJOFS • ঎඼ҰཡΛऔಘ • ͦΕΛදࣔ 3FDFOU1VSDIBTFT4FDUJPO DPOUBJOFS • ࠷৽ͷߪೖཤྺҰཡΛදࣔ • ͦΕΛදࣔ
23. খ͞ͳ $POUBJOFS ஫ҙࣄ߲ ෼͚͗͢ΔͱϒϥοΫϘοΫεԽͷ͓ͦΕ • $PNQPTJUJPO ύλʔϯ children 1SPQ Λ࢖ͬͯ $POUBJOFS
    ͷҐஔΛઙ͘͢Δ • $PNQPTJUJPO
    ͸ ʮ$MJFOU
    $PNQ ˠ 4FSWFS
    $PNQʯ ͷ޲͖ʹґଘͯ͠ॻ͚ͳ੍͍໿Λճආ ͢Δͷʹ΋໾ཱͭ • ˠ ͏·͘׆༻͢Ε͹ɺཧղ͠΍͘͢ อͬͨ··͔ͳΓࡉ͔͘෼ׂͰ͖Δʂ େ͖͗͢Δ $POUBJOFS
    ͸খ͘͞෼͚Δ %BTICPBSE1BHF 1SPEVDU4FDUJPO /FX1SPEVDU%JBMPH $SFBUF1SPEVDU#VUUPO 4FSWFS
    "DUJPO
    Λݺͼग़͠
24. ·ͱΊʮ·ͣ $POUBJOFS
    ΑΓ࢝ΊΑʯ  $PMPDBUJPO
    ݪଇͰσΟϨΫτϦΛ੾ΓɺࢄҳΛ๷͙  ϖʔδΛػೳ୯ҐͰ෼ׂ͢Δʢ୯ػೳͳΒͦͷ··ʣ  αʔόʔ͔Βͷσʔλऔಘɾߋ৽୯ҐͰɺ͞Βʹ෼ׂ΋Մೳ  ͦΕΒʮখ͞ͳ $POUBJOFSʯ͔ΒͳΔߏ଄Λࠎ૊Έͱͯ͠ɺ ࡉ͔ͳΠϯλϥΫγϣϯͷ೑෇͚ BQQDBSU BQQBDDPVOU Page Section Section Button Page Section SubSection Button p p p
25. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ גࣜձࣾΏΊΈ ίʔϙϨʔταΠτ https://www.yumemi.co.jp/ :6.&.*
    *OD