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

ハッカソン x Gatsby

4geru sakisaka
October 12, 2021
58

ハッカソン x Gatsby

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

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

4geru sakisaka

October 12, 2021
Tweet

Transcript

  1. ϋοΧιϯͷಛੑ(νʔϜϏϧσΟϯά) • ͞·͟·ͳόοΫάϥ΢ϯυͷਓ͕ࢀՃ͢Δ • ϋοΧιϯॳΊͯ / ϕςϥϯ • ΤϯδχΞ /

    σβΠφʔ / ࢜ۀ͞Μ etc… • ϝϯόʔͷϞνϕʔγϣϯ؅ཧ ΤϯδχΞ ࢜ۀ͞Μ σβΠφʔ اը
  2. ఱؾ x ؍ޫ • ΞΠσΟΞ • ΞΩωΠλʔΛΦϚʔδϡ • ཱྀߦͰ౜ಥͷӍͰ༧ఆ͕௵Εͨ •

    ೔࣌ / ৔ॴ x ఱؾ৘ใ x ࠓͷؾ෼ ͔Β 
 ϓϥϯΛఏҊͯ͘͠ΕΔ
  3. ࣄલʹ४උͨ͜͠ͱ ɾVercelΛར༻ͨ͠σϓϩΠ ɾGatsby / Tailwindcss / daisyUI ͷ࣮૷ ɾςϯϓϨʔτϖʔδͷ࡞੒ ɾGoogleMapAPIͷར༻

    → ຊ൪͸࢖Θͳ͔ͬͨ ɾGAS APIͷར༻ → mock͚ͩͰຊ൪͸࢖Θͳ͔ͬͨ ɾnotionͰͷࢿྉΛ·ͱΊͨ → εϓϨουγʔτ࠷ڧ
  4. ϝϯόʔߏ੒(طଘ3໊ + ৽ن2໊) ࣗ෼ 8FCΤϯδχΞ ෺ཧ ձࣾͷಉظ +BWBΤϯδχΞ ෺ཧ όΠτͷಉظ

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

    όΠτͷಉظ ৽نࣄۀ։ൃ ϓϥϯφʔ "͞Μ ্ྲྀ޻ఔ 3FBDUະܦݧ #͞Μ ֶੜ͞Μ ϓϥϯφʔ
  6. ֶͼ ✅ ୹ظؒͰ݁ՌΛग़͢ ɹɾ΍Γ੾Δͱ͜ΖΛܾΊΔ ɹɾνʔϜͷ߹ҙΛͱͬͯΑΓྑ͍ΞΠσΟΞΛग़͢ ɹɹˠPRͷϓϨϏϡʔ֬ೝ͕େ੾ ✅ ϞμϯͳϑϨʔϜϫʔΫΛ࢖͏ ɹɾϝϯόʔؒͷ஌ࣝϨϕϧ /

    ֶशίετ͕ҧ͏ ɹɾϝϯόʔ͕੒௕Ͱ͖ΔϨϕϧͰλεΫΛΞαΠϯ ɹɾΘ͔Βͳ͍ͱ͜Ζ͸ϑΥϩʔʹೖΔ ɹɹɾ࣍͸ࣗ૸Ͱ͖ΔΑ͏ʹϑΥϩʔ͢Δ