まず Container より始めよ

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

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

Transcript

1. ·ͣ
   $POUBJOFS
   ΑΓ࢝ΊΑ
   IPOFZ
   :6.&.**OD
   
   

   View Slide

2. ·ͣ $POUBJOFSΑΓ࢝ΊΑ
   • ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ
   • ੹຿Λ෼͚ΔͨΊͷίϯϙʔωϯτ
   ࠶ར༻͚͕ͩίϯϙʔωϯτ͡Όͳ͍
   • DPMPDBUJPOܕͷσΟϨΫτϦߏ଄
   IPPLTVUJMTBUPNTNPMFDVMFT͸ద੾ͳ෼ྨ͡Όͳ͍
   • খ͞ͳ $POUBJOFS
   • 1SFTFOUBUJPOBM$POUBJOFSͷ෼཭Λ࠶ධՁ
   3FBDU4FSWFS $PNQPOFOU ΋͋ΔΑʂ
   • $POUBJOFS Λখ͘͢͞Δઓུͱʮ3FBDUͷྲّྀʯ
   

   View Slide

3. ެࣜ %PD͔ΒֶͿ
   ʮ3FBDUͷྲّྀʯ
   

   View Slide

4. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ
   ίϯϙʔωϯτʹ·ͭΘΔ
   Α͋͘Δצҧ͍
   • ϓϩδΣΫτͷதͰԿ౓΋ग़ͯ͘Δ෦඼
   ྫʮϘλϯʯʮϔομʔʯ
   • औΓѻ͏୯ମͷʮϞϊʯ ओʹϦετ಺
   
   ྫʮهࣄʯʮ঎඼ʯ
   ʜΛڞ௨ԽɾϞσϧԽ͢Δͷʹ࢖͏ΜͰ͠ΐʁ
   ͚ͩ͡Όͳ͍ʂ
   

   View Slide

5. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ
   https://ja.react.dev/learn/thinking-in-react
   

   View Slide

6. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ
   https://ja.react.dev/learn/your-first-
   component#components-all-the-way-down
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
    ංେԽ🤯
    

    View Slide

11. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ
    σΟϨΫτϦߏ଄ྫ /FYUKT ͷ "QQ3PVUFS
    
    app/
    • _components/ ʜ൚༻తͳίϯϙʔωϯτ BUPNNPMFDVMFT
    
    • ஫ΞϯμʔείΞΛ಄ʹ෇͚ΔͱɺϧʔςΟϯάͷର৅֎ʹͳΔ
    • _form/ ʜྫԣஅతͳ GPSNपΓͷϢʔςΟϦςΟ
    • cart/ ʜαΠτͷ /cart ҎԼͷύε
    • page.tsx ʜαΠτͷ /cart ϖʔδͦͷ΋ͷ
    • layout.tsx ʜαΠτͷ /cart ҎԼͷڞ௨ϨΠΞ΢τ
    • product-list.tsx ʜ ProductList ίϯϙʔωϯτ
    • ஫FTMJOUQMVHJOJNQPSUBDDFTTΛ࢖ͬͯ
    QBDLBHFQSJWBUFʹ͢Δ͜ͱͰɺ໊લΛ୹͘Ͱ͖Δ
    

    View Slide

12. ެࣜ %PD͔ΒֶͿʮ3FBDUͷྲّྀʯ
    ݁࿦
    • ίϯϙʔωϯτΛࡉ͔͘෼͚Δ
    • ʮ࠶ར༻͢Δʯͱ͜Ζ͚ͩίϯϙʔωϯτʹ͢Δ༁͡Όͳ͍
    • ίϯϙʔωϯτ಺͕ෳ਺ͷ੹຿ɾଟ͘ͷεςʔτΛ࣋ͬͯ൥ࡶʹͳͬ
    ͨΒɺ୯Ұ੹೚Λҙࣝͯ͠෼ׂ͠Α͏
    • DPMPDBUJPOΛҙࣝͯ͠σΟϨΫτϦΛ෼ׂ͠Α͏
    • ্ͷݪଇΛकΔͱɺPSHBOJTN૬౰ͷίϯϙʔωϯτ͕૿͑Δ
    • ʮϨΠϠʔʯʮཻ౓ʯͷࢥߟʢྫ"UPNJ %FTJHOʣͰ෼ྨ͢Δͱ
    PSHBOJTN͕ͪ͝Όࠞͥʹͳͬͯ͠·͏
    • ͔ͩΒʮͲ͜Ͱ࢖ΘΕΔ͔ʯΛΑ͘ߟ͑ͯσΟϨΫτϦΛ෼ׂ͠Α͏
    

    View Slide

13. খ͞ͳ $POUBJOFS
    

    View Slide

14. খ͞ͳ $POUBJOFS
    1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭
    ̍ͭͷίϯϙʔωϯτΛ
    $POUBJOFS 1SFTFOUBUJPOBM
    ͷ̎ϨΠϠʔʹ෼͚Δ
    ˠ ෆཁ
    શମ$POUBJOFS
    ߏ੒ཁૉ1SFTFOUBUJPOBM
    ͷΑ͏ʹ෼୲͢Δ
    ˠ ༗༻
    1SPEVDU1BHF$POUBJOFS
    1SPEVDU1BHF
    1SPEVDU1BHF
    $PMPS4FMFDU 4J[F4FMFDU
    ࣮࣭తʹόέπϦϨʔ ֤ίϯϙʔωϯτ͕े෼ʹখ͍͞
    

    View Slide

15. খ͞ͳ $POUBJOFS
    $PMPS4FMFDU
    ίϯϙʔωϯτ
    • 63-ͷΫΤϦύϥϝʔλͷ
    ?colorCode=xx ͷ෦෼͕
    มΘͬͨΒɺಡΈऔͬͯ൓ө
    • Ϣʔβʔ͕ΫϦοΫͯ͠৭Λ
    ม͑ͨΒɺ?colorCode=xx Λ
    มߋ SPVUFSSFQMBDF
    
    • બ୒ࢶ͸ 1SPQͰड͚औΔ
    ੡඼ࣸਅ
    Χϥʔ3&%
    αΠζ9-
    1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭
    

    View Slide

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

    View Slide

17. খ͞ͳ $POUBJOFS
    ੡඼ࣸਅ
    Χϥʔ3&%
    αΠζ9-
    $PMPS4FMFDU
    ίϯϙʔωϯτ
    • `value` 1SPQʹ͍ͭͯɺ͍ΘΏΔ
    $POUSPMMFEίϯϙʔωϯτ
    • ʮΰνϟΰνϟʯΛҙࣝ͠ͳ͍
    1SFTFOUBUJPOBM
    ίϯϙʔωϯτ
    1SPEVDU1BHF
    ίϯϙʔωϯτ
    • ϑϨʔϜϫʔΫσʔλऔಘ ґଘ
    ʮΰνϟΰνϟʯΛҾ͖ड͚Δ
    $POUBJOFSίϯϙʔωϯτ
    • ΫΤϦύϥϝʔλ
    • "1*ͱͷ௨৴
    ଘࡏ͢Δ৭ͷબ୒ࢶ
    
    ਌
    ࢠ
    1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭
    

    View Slide

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

    View Slide

19. খ͞ͳ $POUBJOFS
    ੡඼ࣸਅ
    Χϥʔ3&%
    αΠζ9-
    1SFTFOUBUJPOBM
    $MJFOU 4FSWFS
    ྆ํ0,
    $POUBJOFS
    4FSWFS$PNQPOFOU
    %#౳͔ΒͷσʔλऔಘΛҾ͖ड͚Δ
    ਌
    ࢠ
    1SFTFOUBUJPOBMͱ $POUBJOFSͷ෼཭
    

    View Slide

20. খ͞ͳ $POUBJOFS
    େ͖͗͢Δ $POUBJOFS͸খ͘͞෼͚Δ
    %BTICPBSE1BHF D
    
    • ঎඼ҰཡΛऔಘ
    • ࠷৽ͷߪೖཤྺΛऔಘ
    1SPEVDUT4FDUJPO Q
    
    • ঎඼ҰཡΛදࣔ
    3FDFOU1VSDIBTFT4FDUJPO Q
    
    • ࠷৽ͷߪೖཤྺҰཡΛදࣔ
    Q
    ʜ1SFTFOUBUJPOBM
    D
    ʜ$POUBJOFS
    %BTICPBSE1BHF D
    
    1SPEVDUT4FDUJPO D
    
    • ঎඼ҰཡΛऔಘ
    • ͦΕΛදࣔ
    3FDFOU1VSDIBTFT4FDUJPO
    D
    
    • ࠷৽ͷߪೖཤྺҰཡΛදࣔ
    • ͦΕΛදࣔ
    

    View Slide

21. খ͞ͳ $POUBJOFS
    ʮͦΕͧΕͷখ$POUBJOFS͕୯Ұ੹೚ʹͳΔʯ
    ͱ͍͏ϝϦοτ
    • ʮ3FBDUͷྲّྀʯͬΆ͍
    • ʮ঎඼Ұཡʯͷऔಘͱද͕ࣔ
    ࢠ 1SPEVDUT4FDUJPO
    ʹूΊΒΕɺ
    ਌ %BTICPBSE1BHF
    ͷ੹຿΋εϦϜԽ
    େ͖͗͢Δ $POUBJOFS͸খ͘͞෼͚Δ
    %BTICPBSE1BHF DPOUBJOFS
    
    1SPEVDUT4FDUJPO DPOUBJOFS
    
    • ঎඼ҰཡΛऔಘ
    • ͦΕΛදࣔ
    3FDFOU1VSDIBTFT4FDUJPO
    DPOUBJOFS
    
    • ࠷৽ͷߪೖཤྺҰཡΛදࣔ
    • ͦΕΛදࣔ
    

    View Slide

22. খ͞ͳ $POUBJOFS
    ʮϖʔδ୯ҐͰσʔλΛऔಘ͢Δʯ
    ͱ͍͏੍໿ͷఫഇ JO/FYUKT
    
    • HFU4FSWFS4JEF1SPQT
    HFU4UBUJD1SPQT
    ˠ 3FBDU4FSWFS$PNQPOFOUT 34$
    
    • σʔλऔಘͷ୯Ґ͕
    ʮϖʔδ ˠ খ $POUBJOFS 34$
    ʯ
    ʹมΘͬͨ
    • 4VTQFOTFͰ෦෼తͳϩʔσΟϯάද͕ࣔՄೳ
    େ͖͗͢Δ $POUBJOFS͸খ͘͞෼͚Δ
    %BTICPBSE1BHF DPOUBJOFS
    
    1SPEVDUT4FDUJPO DPOUBJOFS
    
    • ঎඼ҰཡΛऔಘ
    • ͦΕΛදࣔ
    3FDFOU1VSDIBTFT4FDUJPO
    DPOUBJOFS
    
    • ࠷৽ͷߪೖཤྺҰཡΛදࣔ
    • ͦΕΛදࣔ
    

    View Slide

23. খ͞ͳ $POUBJOFS
    ஫ҙࣄ߲
    ෼͚͗͢ΔͱϒϥοΫϘοΫεԽͷ͓ͦΕ
    • $PNQPTJUJPO ύλʔϯ children 1SPQ
    
    Λ࢖ͬͯ $POUBJOFSͷҐஔΛઙ͘͢Δ
    • $PNQPTJUJPO͸
    ʮ$MJFOU$PNQ ˠ 4FSWFS$PNQʯ
    ͷ޲͖ʹґଘͯ͠ॻ͚ͳ੍͍໿Λճආ
    ͢Δͷʹ΋໾ཱͭ
    • ˠ ͏·͘׆༻͢Ε͹ɺཧղ͠΍͘͢
    อͬͨ··͔ͳΓࡉ͔͘෼ׂͰ͖Δʂ
    େ͖͗͢Δ $POUBJOFS͸খ͘͞෼͚Δ
    %BTICPBSE1BHF
    1SPEVDU4FDUJPO
    /FX1SPEVDU%JBMPH
    $SFBUF1SPEVDU#VUUPO
    4FSWFS"DUJPOΛݺͼग़͠
    
    

    View Slide

24. ·ͱΊʮ·ͣ $POUBJOFSΑΓ࢝ΊΑʯ
    $PMPDBUJPOݪଇͰσΟϨΫτϦΛ੾ΓɺࢄҳΛ๷͙
    ϖʔδΛػೳ୯ҐͰ෼ׂ͢Δʢ୯ػೳͳΒͦͷ··ʣ
    αʔόʔ͔Βͷσʔλऔಘɾߋ৽୯ҐͰɺ͞Βʹ෼ׂ΋Մೳ
    ͦΕΒʮখ͞ͳ $POUBJOFSʯ͔ΒͳΔߏ଄Λࠎ૊Έͱͯ͠ɺ
    ࡉ͔ͳΠϯλϥΫγϣϯͷ೑෇͚
    BQQDBSU BQQBDDPVOU
    Page
    Section Section
    Button
    Page
    Section
    SubSection Button
    p p
    p
    

    View Slide

25. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    גࣜձࣾΏΊΈ ίʔϙϨʔταΠτ
    https://www.yumemi.co.jp/
    :6.&.**OD
    

    View Slide