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

ハッカソン x Gatsby

4geru sakisaka
October 12, 2021
35

ハッカソン x Gatsby

業務でReactを使うことは多いのではないでしょうか?
ハッカソンでReactを使ってみた時にどのような感じになるのか気になりませんか?ReactのGatsbyを利用して、ハッカソンに参加した内容を共有します。

[オンライン開催] #ReactなんでもLT会 #2 https://ncdc-dev.connpass.com/event/223583/ で発表した資料です。

4geru sakisaka

October 12, 2021
Tweet

Transcript

  1. ϋοΧιϯ x Gatsby
    ϑϩϯτΤϯυ React LTձ#2


    2021/10/13


    @4geru

    View Slide

  2. ࣗݾ঺հ
    [email protected]
    !HFSV
    גࣜձࣾϚωʔϑΥϫʔυ
    🤿🖥
    🐼🍣🍺
    ࣾձਓ೥໨ɺΤϯδχΞ

    View Slide

  3. Πϕϯτʹ͍ͭͯ

    View Slide

  4. View Slide

  5. View Slide

  6. ϋοΧιϯͷಛੑ

    View Slide

  7. ϋοΧιϯͷಛੑ(νʔϜϏϧσΟϯά)
    • ͞·͟·ͳόοΫάϥ΢ϯυͷਓ͕ࢀՃ͢Δ


    • ϋοΧιϯॳΊͯ / ϕςϥϯ


    • ΤϯδχΞ / σβΠφʔ / ࢜ۀ͞Μ etc…


    • ϝϯόʔͷϞνϕʔγϣϯ؅ཧ
    ΤϯδχΞ
    ࢜ۀ͞Μ
    σβΠφʔ
    اը

    View Slide

  8. ϋοΧιϯͷಛੑ(اըྗ)
    • ୹࣌ؒͷதͰҙݟΛ·ͱΊΔ͔


    • ͲΜͳൃදΛ͢Δ͔


    • ࢿྉ࡞ΓɾϏδωεϞσϧ


    • Ͳ͜ΛσϞ͢Δ͔


    • Ͳ͜Λ࡞ͬͯɺͲ͜ΛఘΊΔ͔
    ΤϯδχΞ
    ࢜ۀ͞Μ
    σβΠφʔ
    اը

    View Slide

  9. ϋοΧιϯͷಛੑ(։ൃྗ)
    • ୹ظؒͰಈ͘΋ͷΛ࡞Δඞཁ͕͋Δ


    • ϝϯόʔ͕ॻ͚Δ or ಡΊΔ


    • ٕज़తνϟϨϯδ͕ධՁ͞ΕΔ


    • ϫϯϚϯϓϨʔͩͱޙ൒͠ΜͲ͘ͳΔ
    ΤϯδχΞ
    ࢜ۀ͞Μ
    σβΠφʔ
    اը

    View Slide

  10. ੒Ռ෺ʹ͍ͭͯ

    View Slide

  11. ఱؾ x ؍ޫ
    • ΞΠσΟΞ


    • ΞΩωΠλʔΛΦϚʔδϡ


    • ཱྀߦͰ౜ಥͷӍͰ༧ఆ͕௵Εͨ


    • ೔࣌ / ৔ॴ x ఱؾ৘ใ x ࠓͷؾ෼ ͔Β

    ϓϥϯΛఏҊͯ͘͠ΕΔ

    View Slide

  12. ར༻ٕज़
    • React / Gatsby


    • Vercel


    • Tailwindcss / daisyUI


    • wetherNewsAPI

    View Slide

  13. ࣄલʹ४උͨ͜͠ͱ

    View Slide

  14. ࣄલʹ४උͨ͜͠ͱ
    ɾVercelΛར༻ͨ͠σϓϩΠ


    ɾGatsby / Tailwindcss / daisyUI ͷ࣮૷


    ɾςϯϓϨʔτϖʔδͷ࡞੒


    ɾGoogleMapAPIͷར༻ → ຊ൪͸࢖Θͳ͔ͬͨ


    ɾGAS APIͷར༻ → mock͚ͩͰຊ൪͸࢖Θͳ͔ͬͨ


    ɾnotionͰͷࢿྉΛ·ͱΊͨ → εϓϨουγʔτ࠷ڧ

    View Slide

  15. ϝϯόʔߏ੒

    View Slide

  16. ϝϯόʔߏ੒(طଘ3໊ + ৽ن2໊)
    ࣗ෼
    8FCΤϯδχΞ
    ෺ཧ
    ձࣾͷಉظ
    +BWBΤϯδχΞ
    ෺ཧ
    όΠτͷಉظ
    ৽نࣄۀ։ൃ
    ෺ཧ
    "͞Μ
    ্ྲྀ޻ఔ
    ϦϞʔτ
    #͞Μ
    ֶੜ͞Μ
    ϦϞʔτ

    View Slide

  17. ϝϯόʔߏ੒(ΤϯδχΞ3໊ + ϓϥϯφʔ 2໊)
    ࣗ෼
    8FCΤϯδχΞ
    ۀ຿Ͱ3FBDU
    ձࣾͷಉظ
    +BWBΤϯδχΞ
    3FBDUະܦݧ
    όΠτͷಉظ
    ৽نࣄۀ։ൃ
    ϓϥϯφʔ
    "͞Μ
    ্ྲྀ޻ఔ
    3FBDUະܦݧ
    #͞Μ
    ֶੜ͞Μ
    ϓϥϯφʔ

    View Slide

  18. ϝϯόʔߏ੒(ΤϯδχΞͷ୲౰)
    ࣗ෼
    8FCΤϯδχΞ
    શମͷϑΥϩʔ
    ձࣾͷಉظ
    +BWBΤϯδχΞ
    ίΞϩδοΫ
    όΠτͷಉظ
    ৽نࣄۀ։ൃ
    ϓϥϯφʔ
    "͞Μ
    ্ྲྀ޻ఔ
    $446*
    #͞Μ
    ֶੜ͞Μ
    ϓϥϯφʔ

    View Slide

  19. ϋοΧιϯத


    ͏·͘ߦͬͨ͜ͱ

    View Slide

  20. ͏·͘ߦͬͨ͜ͱ1.


    ಈ࡞֬ೝΛͯ͠PRΛ֬ೝ͢Δ

    View Slide

  21. Githubͷࠩ෼Ͱ͸ݟͮΒ͍
    • ͨ͜͠ͱ


    • ෳ਺ͷϖʔδΛ·ͱΊͨ


    • طଘ໰୊ͷίϯϙʔωϯτͷ࡟আ


    • ໰୊఺


    • ίʔυͷมߋ͸Θ͔Δ͕ಈ࡞͸Θ͔Βͳ͍

    View Slide

  22. ϓϨϏϡʔڍಈΛ֬ೝ
    • σάϨʔγϣϯ͕ͳ͍͔֬ೝͰ͖Δ


    • ඇΤϯδχΞ΋ϨϏϡʔͰ͖Δ


    • ϞϒϨϏϡʔͰ͖Δ → ٞ࿦͠΍͍͢


    • ൃදͷΠϝʔδ͕Ͱ͖Δ

    View Slide

  23. ͏·͘ߦͬͨ͜ͱ2.


    ςϯϓϨʔτΛ४උͨ͠

    View Slide

  24. View Slide

  25. ςϯϓϨʔτΛ௥Ճ
    • ͜ͷϖʔδΛݟΕ͹ͳΜͰ΋Ͱ͖Δ


    • ίϐϖͰίʔυΛॻ͚Δ


    • αϯϓϧίʔυ͕͋Δ


    • ࢀߟϖʔδ΁ͷϦϯΫ͕͋Δ


    • Story BookͷΑ͏ͳ׆༻Λͨ͠

    View Slide

  26. ֶͼ
    ✅ ୹ظؒͰ݁ՌΛग़͢


    ɹɾ΍Γ੾Δͱ͜ΖΛܾΊΔ


    ɹɾνʔϜͷ߹ҙΛͱͬͯΑΓྑ͍ΞΠσΟΞΛग़͢


    ɹɹˠPRͷϓϨϏϡʔ֬ೝ͕େ੾


    ✅ ϞμϯͳϑϨʔϜϫʔΫΛ࢖͏


    ɹɾϝϯόʔؒͷ஌ࣝϨϕϧ / ֶशίετ͕ҧ͏


    ɹɾϝϯόʔ͕੒௕Ͱ͖ΔϨϕϧͰλεΫΛΞαΠϯ


    ɹɾΘ͔Βͳ͍ͱ͜Ζ͸ϑΥϩʔʹೖΔ


    ɹɹɾ࣍͸ࣗ૸Ͱ͖ΔΑ͏ʹϑΥϩʔ͢Δ

    View Slide

  27. ײ૝
    ɾٱʑʹϋοΧιϯʹग़Δͱແྗ͕͞Θ͔ͬͯྑ͍


    ɹɾॳΊͯͷਓͱνʔϜ૊Ήͷ೉͍͠


    ɾϋοΧιϯͬͯ࢓ࣄͷཁૉ͕ڽॖ͞Ε͍ͯΔͳ


    ɾReact Component͸install͢Δ͚ͩͰಈ͘ͷͰ


    ɹReactͷԸܙΛڗडͰ͖͍ͯΔ

    View Slide