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

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

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

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

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

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

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

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

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

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

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

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

খ͞ͳ $POUBJOFS

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

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

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

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

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

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

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

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

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

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

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

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