Save 37% off PRO during our Black Friday Sale! »

ハッカソン x Gatsby

1014e57002236d3acf3051fb92d3bda8?s=47 4geru sakisaka
October 12, 2021
17

ハッカソン x Gatsby

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

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

1014e57002236d3acf3051fb92d3bda8?s=128

4geru sakisaka

October 12, 2021
Tweet

Transcript

  1. ϋοΧιϯ x Gatsby ϑϩϯτΤϯυ React LTձ#2 2021/10/13 @4geru

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

  3. Πϕϯτʹ͍ͭͯ

  4. None
  5. None
  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. ςϯϓϨʔτΛ४උͨ͠

  24. None
  25. ςϯϓϨʔτΛ௥Ճ • ͜ͷϖʔδΛݟΕ͹ͳΜͰ΋Ͱ͖Δ • ίϐϖͰίʔυΛॻ͚Δ • αϯϓϧίʔυ͕͋Δ • ࢀߟϖʔδ΁ͷϦϯΫ͕͋Δ •

    Story BookͷΑ͏ͳ׆༻Λͨ͠
  26. ֶͼ ✅ ୹ظؒͰ݁ՌΛग़͢ ɹɾ΍Γ੾Δͱ͜ΖΛܾΊΔ ɹɾνʔϜͷ߹ҙΛͱͬͯΑΓྑ͍ΞΠσΟΞΛग़͢ ɹɹˠPRͷϓϨϏϡʔ֬ೝ͕େ੾ ✅ ϞμϯͳϑϨʔϜϫʔΫΛ࢖͏ ɹɾϝϯόʔؒͷ஌ࣝϨϕϧ /

    ֶशίετ͕ҧ͏ ɹɾϝϯόʔ͕੒௕Ͱ͖ΔϨϕϧͰλεΫΛΞαΠϯ ɹɾΘ͔Βͳ͍ͱ͜Ζ͸ϑΥϩʔʹೖΔ ɹɹɾ࣍͸ࣗ૸Ͱ͖ΔΑ͏ʹϑΥϩʔ͢Δ
  27. ײ૝ ɾٱʑʹϋοΧιϯʹग़Δͱແྗ͕͞Θ͔ͬͯྑ͍ ɹɾॳΊͯͷਓͱνʔϜ૊Ήͷ೉͍͠ ɾϋοΧιϯͬͯ࢓ࣄͷཁૉ͕ڽॖ͞Ε͍ͯΔͳ ɾReact Component͸install͢Δ͚ͩͰಈ͘ͷͰ ɹReactͷԸܙΛڗडͰ͖͍ͯΔ