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

20210525_react_next.pdf

 20210525_react_next.pdf

ozaki25

May 25, 2021
Tweet

More Decks by ozaki25

Other Decks in Technology

Transcript

  1. 3FBDUͰͰ͖Δ͜ͱ
    /FYUKTͰͰ͖Δ͜ͱ

    View Slide

  2. 3FBDUͰͰ͖Δ͜ͱ

    View Slide

  3. 3FBDUΛ࢖͏ͱԿ͕Ͱ͖Δͷʁ
    w 6*ίϯϙʔωϯτΛ࡞Δ͜ͱ͕Ͱ͖Δ
    w 6*ίϯϙʔωϯτΛ૊Έ߹ΘͤͯΞϓϦΛ࡞Δ͜ͱ͕Ͱ͖Δ

    ϝΠϯͷػೳ͸͜Ε͚ͩʂ
    ଞ͸͓·͚Έ͍ͨͳ΋ͷ
    Ͱ΋͓·͚͕ෳࡶͩͬͨΓ͢Δ

    View Slide

  4. 6*ίϯϙʔωϯτͱ͸ʁ
    w )5.-$44+BWB4DSJQUͷ͔ͨ·Γ

    ίϯϙʔωϯτ͔ΒίϯϙʔωϯτΛݺͼग़ͨ͠Γ͢Δ
    ίϯϙʔωϯτΛ૊Έ߹ΘͤΔ͜ͱͰը໘Λ࡞Δ
    https://stackblitz.com/edit/aa-seminar-react-step2?file=src/App.js

    View Slide

  5. ίϯϙʔωϯτΛ࢖͏͚ͩʁ
    w ੩తͳϖʔδͰ͋Ε͹͜Ε͚ͩͰࡁΉ
    w ࣮ࡍ͸ಈతͳϖʔδ͕ଟ͍ͷͰ͜Ε͚ͩͰ͸෺଍Γͳ͘ͳΔ

    View Slide

  6. ಈతͳ஋ΛຒΊࠐΈ͍ͨ
    w ίϯϙʔωϯτʹຒΊࠐΉσʔλ͕ಈతͳ࣌͸

    Ҿ਺ͱͯ͠౉͠ɺड͚औͬͨ஋ΛຒΊࠐΉ

    ड͚औͬͨ஋Λ
    ຒΊࠐΉ
    ಈతͳ஋͸Ҿ਺Ͱ౉͢
    ಉ͡ίϯϙʔωϯτͰ΋
    දࣔ಺༰͕ҧ͏
    https://stackblitz.com/edit/aa-seminar-react-step3?file=src/components/ListItem/ListItem.js

    View Slide

  7. ঢ়ଶͷมߋΛ؅ཧ͍ͨ͠
    w Ϣʔβͷૢ࡞ͳͲͰมԽ͢Δ஋Λอ͓͖͍࣋ͯͨ࣌͠͸

    VTF4UBUFͰ؅ཧ͢Δ͜ͱ͕Ͱ͖Δ

    ؅ཧ͢Δ஋ͷॳظ஋Λఆٛ
    ؅ཧ͢Δ஋Λߋ৽Ͱ͖Δ
    Ϣʔβͷૢ࡞ ͜͜Ͱ͸ΫϦοΫ
    ΛτϦΨʔʹ
    ؔ਺Λ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
    https://stackblitz.com/edit/aa-seminar-react-step4?file=src/components/Counter/Counter.js

    View Slide

  8. 3FBDUͷͦͷଞͷػೳ
    w ଞʹ΋3FBDU͕ఏڙ͢Δػೳ͸͋Δ͕

    ϝΠϯͲ͜Ζ͸͜Μͳͱ͜Ζ
    w ͦΕҎ֎͸֎෦ϥΠϒϥϦΛ࢖͏͔

    ७ਮͳ+BWB4DSJQUͱͯ͠ॲཧΛॻ͘

    ଞͷػೳ͸ެࣜΨΠυΛࢀߟʹ͍ͯͩ͘͠͞
    IUUQTKBSFBDUKTPSHEPDTIFMMPXPSMEIUNM

    View Slide

  9. ७ਮͳ+BWB4DSJQUͰؤுΔྫ
    w "1*͔ΒσʔλΛऔಘͨ͠ΓσʔλΛૹ৴͢Δॲཧ͸

    ࣗલͰॻ͘ඞཁ͕͋Δ

    ௨৴ॲཧ
    ௨৴ॲཧͰऔಘͨ͠
    σʔλΛTFU͠ը໘ʹදࣔ
    https://stackblitz.com/edit/aa-seminar-react-step5?file=src/components/Articles/Articles.js

    View Slide

  10. w ෳ਺ͷϖʔδͷΞϓϦΛ࡞Γ͍ͨ৔߹SFBDUSPVUFSͳͲͷ

    ϥΠϒϥϦΛ࢖͏ͷ͕ϕλʔ
    ֎෦ϥΠϒϥϦΛ࢖͏ྫ

    63-ʹԠͯ͡දࣔ͢Δ
    ίϯϙʔωϯτΛ੾Γସ͑Δ
    https://stackblitz.com/edit/aa-seminar-react-step6?file=src/routes/router.js

    View Slide

  11. 3FBDUͰͰ͖Δ͜ͱ
    w ίϯϙʔωϯτΛ࡞ͬͯ૊Έ߹ΘͤͯΞϓϦΛ࡞Δ͜ͱ
    w ಈతͳΞϓϦΛ࡞ΔͨΊͷঢ়ଶ؅ཧͳͲ࠷௿ݶͷ͜ͱ
    w ͦΕҎ֎͸७ਮͳ+BWB4DSJQUͰ࣮૷͢Δ͔

    ֎෦ϥΠϒϥϦΛ࢖͏͜ͱʹͳΔ

    View Slide

  12. /FYUKTͰͰ͖Δ͜ͱ

    View Slide

  13. /FYUKTΛ࢖͏ͱԿ͕Ͱ͖Δͷʁ
    w 3FBDUΛ಺แͯ͠ΔͷͰ3FBDUͰͰ͖Δ͜ͱ͸Ͱ͖Δ
    w ઃఆͳ͠ͰࣗಈͰ΍ͬͯ͘ΕΔܥ
    w ίϯϙʔωϯτͷྖҬΛ௒͑ͨܥ

    View Slide

  14. ઃఆͳ͠ͰࣗಈͰ΍ͬͯ͘ΕΔܥ
    w 8FCQBDLͷઃఆΛࣗ෼Ͱ΍Βͳͯ͘Α͍
    w ֤छઃఆΛ؆୯ઃఆͳ͠Ͱ࢖͑Δ
    w 5ZQF4DSJQU
    w $44.PEVMFT
    w 4BTT4$44

    View Slide

  15. ઃఆͳ͠ͰࣗಈͰ΍ͬͯ͘ΕΔܥ
    w ϑΥϧμߏ੒͕ͦͷ··ϧʔςΟϯάʹͳΔ
    w SFBDUSPVUFS͕ෆཁ

    63- ϑΝΠϧ
    VTFST QBHFTVTFSTJOEFYKT
    VTFSTOFX QBHFTVTFSTOFXKT
    VTFST QBHFTVTFSTJOEFYKT
    VTFSTFEJU QBHFTVTFSTFEJUKT

    View Slide

  16. ίϯϙʔωϯτͷྖҬΛ௒͑ͨܥ
    "1*ͷࣗಈੜ੒
    w BQJ഑ԼʹϑΝΠϧΛ࡞Δͱ+40/
    Λฦ͢ΤϯυϙΠϯτʹͳΔ
    ύϑΥʔϚϯε࠷దԽ
    w ը૾αΠζͷࣗಈ࠷దԽ
    w ϦϯΫͷࣗಈઌಡΈ

    443 4FSWFS4JEF3FOEFSJOH

    w αʔόαΠυͰ3FBDUίϯϙʔωϯ
    τΛੜ੒ͯ͠)5.-Λฦ͢͜ͱ͕Ͱ
    ͖Δ
    44( 4UBUJD4JUF(FOFSBUF

    w "1*ͳͲ͔Βऔಘͨ͠σʔλΛຒΊ
    ࠐΜͩঢ়ଶͷ)5.-Λੜ੒Ͱ͖Δ
    w ͍ΘΏΔ+BNTUBDLͰ࢖ΘΕΔ

    View Slide

  17. /FYUKTͰͰ͖Δ͜ͱ
    w 3FBDUʹগ͠ϧʔϧ͕௥Ճ͞ΕΔ͜ͱͰઃఆָ͕ʹͳΔ
    w σΟϨΫτϦߏ੒ϕʔεͷϧʔςΟϯά
    w 5ZQF4DSJQU΍$44.PEVMFTͷઃఆ؆ུԽ
    w ίϯϙʔωϯτͷྖҬΛ௒͑ͨػೳ͕࢖͑Δ
    w "1*ͷੜ੒
    w 44344(

    View Slide

  18. ·ͱΊ

    View Slide

  19. ·ͱΊ
    w 3FBDU͸ίϯϙʔωϯτϥΠϒϥϦ

    ͳͷͰࣗલͰؤுΒͳ͍ͱ͍͚ͳ͍ͱ͜Ζ͕ଟ͍
    w /FYUKT͸3FBDUΑΓറΓ͕গ͠૿͑Δ෼ઃఆͳͲָ͕ʹͳΔ

    ίϯϙʔωϯτͷྖҬΛ௒͍͑ͨΖ͍Ζͳ͜ͱ͕Ͱ͖Δ
    w ϖʔδભҠͷ͋ΔΞϓϦͳΒ/FYUKT͸े෼༗༻
    w 443΍44(ͳͲ͚ͨ͠Ε͹/FYUKT͸ߋʹޮՌత

    View Slide