ハッカソン x Gatsby

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

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

Transcript

1. ϋοΧιϯ x Gatsby ϑϩϯτΤϯυ React LTձ#2 2021/10/13 @4geru
2. ࣗݾ঺հ !@HFSV !HFSV גࣜձࣾϚωʔϑΥϫʔυ
   🤿
   🖥 🐼
   🍣
   🍺 ࣾձਓ೥໨ɺΤϯδχΞ
3. Πϕϯτʹ͍ͭͯ
6. ϋοΧιϯͷಛੑ
7. ϋοΧιϯͷಛੑ(νʔϜϏϧσΟϯά) • ͞·͟·ͳόοΫάϥ΢ϯυͷਓ͕ࢀՃ͢Δ • ϋοΧιϯॳΊͯ / ϕςϥϯ • ΤϯδχΞ / σβΠφʔ / ࢜ۀ͞Μ etc… • ϝϯόʔͷϞνϕʔγϣϯ؅ཧ ΤϯδχΞ ࢜ۀ͞Μ σβΠφʔ اը
8. ϋοΧιϯͷಛੑ(اըྗ) • ୹࣌ؒͷதͰҙݟΛ·ͱΊΔ͔ • ͲΜͳൃදΛ͢Δ͔ • ࢿྉ࡞ΓɾϏδωεϞσϧ • Ͳ͜ΛσϞ͢Δ͔ • Ͳ͜Λ࡞ͬͯɺͲ͜ΛఘΊΔ͔ ΤϯδχΞ ࢜ۀ͞Μ σβΠφʔ اը
9. ϋοΧιϯͷಛੑ(։ൃྗ) • ୹ظؒͰಈ͘΋ͷΛ࡞Δඞཁ͕͋Δ • ϝϯόʔ͕ॻ͚Δ or ಡΊΔ • ٕज़తνϟϨϯδ͕ධՁ͞ΕΔ • ϫϯϚϯϓϨʔͩͱޙ൒͠ΜͲ͘ͳΔ ΤϯδχΞ ࢜ۀ͞Μ σβΠφʔ اը
10. ੒Ռ෺ʹ͍ͭͯ
11. ఱؾ x ؍ޫ • ΞΠσΟΞ • ΞΩωΠλʔΛΦϚʔδϡ • ཱྀߦͰ౜ಥͷӍͰ༧ఆ͕௵Εͨ • ೔࣌ / ৔ॴ x ఱؾ৘ใ x ࠓͷؾ෼ ͔Β 
 ϓϥϯΛఏҊͯ͘͠ΕΔ
12. ར༻ٕज़ • React / Gatsby • Vercel • Tailwindcss / daisyUI • wetherNewsAPI
13. ࣄલʹ४උͨ͜͠ͱ
14. ࣄલʹ४උͨ͜͠ͱ ɾVercelΛར༻ͨ͠σϓϩΠ ɾGatsby / Tailwindcss / daisyUI ͷ࣮૷ ɾςϯϓϨʔτϖʔδͷ࡞੒ ɾGoogleMapAPIͷར༻ → ຊ൪͸࢖Θͳ͔ͬͨ ɾGAS APIͷར༻ → mock͚ͩͰຊ൪͸࢖Θͳ͔ͬͨ ɾnotionͰͷࢿྉΛ·ͱΊͨ → εϓϨουγʔτ࠷ڧ
15. ϝϯόʔߏ੒
16. ϝϯόʔߏ੒(طଘ3໊ + ৽ن2໊) ࣗ෼
    8FCΤϯδχΞ
    ෺ཧ ձࣾͷಉظ
    +BWBΤϯδχΞ
    ෺ཧ όΠτͷಉظ
    ৽نࣄۀ։ൃ
    ෺ཧ "͞Μ
    ্ྲྀ޻ఔ
    ϦϞʔτ #͞Μ
    ֶੜ͞Μ
    ϦϞʔτ
17. ϝϯόʔߏ੒(ΤϯδχΞ3໊ + ϓϥϯφʔ 2໊) ࣗ෼
    8FCΤϯδχΞ
    ۀ຿Ͱ3FBDU ձࣾͷಉظ
    +BWBΤϯδχΞ
    3FBDUະܦݧ όΠτͷಉظ
    ৽نࣄۀ։ൃ
    ϓϥϯφʔ "͞Μ
    ্ྲྀ޻ఔ
    3FBDUະܦݧ #͞Μ
    ֶੜ͞Μ
    ϓϥϯφʔ
18. ϝϯόʔߏ੒(ΤϯδχΞͷ୲౰) ࣗ෼
    8FCΤϯδχΞ
    શମͷϑΥϩʔ ձࣾͷಉظ
    +BWBΤϯδχΞ
    ίΞϩδοΫ όΠτͷಉظ
    ৽نࣄۀ։ൃ
    ϓϥϯφʔ "͞Μ
    ্ྲྀ޻ఔ
    $446* #͞Μ
    ֶੜ͞Μ
    ϓϥϯφʔ
19. ϋοΧιϯத ͏·͘ߦͬͨ͜ͱ
20. ͏·͘ߦͬͨ͜ͱ1. ಈ࡞֬ೝΛͯ͠PRΛ֬ೝ͢Δ
21. Githubͷࠩ෼Ͱ͸ݟͮΒ͍ • ͨ͜͠ͱ • ෳ਺ͷϖʔδΛ·ͱΊͨ • طଘ໰୊ͷίϯϙʔωϯτͷ࡟আ • ໰୊఺ • ίʔυͷมߋ͸Θ͔Δ͕ಈ࡞͸Θ͔Βͳ͍
22. ϓϨϏϡʔڍಈΛ֬ೝ • σάϨʔγϣϯ͕ͳ͍͔֬ೝͰ͖Δ • ඇΤϯδχΞ΋ϨϏϡʔͰ͖Δ • ϞϒϨϏϡʔͰ͖Δ → ٞ࿦͠΍͍͢ • ൃදͷΠϝʔδ͕Ͱ͖Δ
23. ͏·͘ߦͬͨ͜ͱ2. ςϯϓϨʔτΛ४උͨ͠
25. ςϯϓϨʔτΛ௥Ճ • ͜ͷϖʔδΛݟΕ͹ͳΜͰ΋Ͱ͖Δ • ίϐϖͰίʔυΛॻ͚Δ • αϯϓϧίʔυ͕͋Δ • ࢀߟϖʔδ΁ͷϦϯΫ͕͋Δ • Story BookͷΑ͏ͳ׆༻Λͨ͠
26. ֶͼ ✅ ୹ظؒͰ݁ՌΛग़͢ ɹɾ΍Γ੾Δͱ͜ΖΛܾΊΔ ɹɾνʔϜͷ߹ҙΛͱͬͯΑΓྑ͍ΞΠσΟΞΛग़͢ ɹɹˠPRͷϓϨϏϡʔ֬ೝ͕େ੾ ✅ ϞμϯͳϑϨʔϜϫʔΫΛ࢖͏ ɹɾϝϯόʔؒͷ஌ࣝϨϕϧ / ֶशίετ͕ҧ͏ ɹɾϝϯόʔ͕੒௕Ͱ͖ΔϨϕϧͰλεΫΛΞαΠϯ ɹɾΘ͔Βͳ͍ͱ͜Ζ͸ϑΥϩʔʹೖΔ ɹɹɾ࣍͸ࣗ૸Ͱ͖ΔΑ͏ʹϑΥϩʔ͢Δ
27. ײ૝ ɾٱʑʹϋοΧιϯʹग़Δͱແྗ͕͞Θ͔ͬͯྑ͍ ɹɾॳΊͯͷਓͱνʔϜ૊Ήͷ೉͍͠ ɾϋοΧιϯͬͯ࢓ࣄͷཁૉ͕ڽॖ͞Ε͍ͯΔͳ ɾReact Component͸install͢Δ͚ͩͰಈ͘ͷͰ ɹReactͷԸܙΛڗडͰ͖͍ͯΔ