ハッカソン 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
   

   View Slide

2. ࣗݾ঺հ
   !@HFSV
   !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