業務でReactを使うことは多いのではないでしょうか? ハッカソンでReactを使ってみた時にどのような感じになるのか気になりませんか?ReactのGatsbyを利用して、ハッカソンに参加した内容を共有します。
[オンライン開催] #ReactなんでもLT会 #2 https://ncdc-dev.connpass.com/event/223583/ で発表した資料です。
ϋοΧιϯ x GatsbyϑϩϯτΤϯυ React LTձ#22021/10/13@4geru
View Slide
ࣗݾհ[email protected]!HFSVגࣜձࣾϚωʔϑΥϫʔυ🤿🖥🐼🍣🍺ࣾձਓɺΤϯδχΞ
Πϕϯτʹ͍ͭͯ
ϋοΧιϯͷಛੑ
ϋοΧιϯͷಛੑ(νʔϜϏϧσΟϯά)• ͞·͟·ͳόοΫάϥϯυͷਓ͕ࢀՃ͢Δ• ϋοΧιϯॳΊͯ / ϕςϥϯ• ΤϯδχΞ / σβΠφʔ / ࢜ۀ͞Μ etc…• ϝϯόʔͷϞνϕʔγϣϯཧΤϯδχΞ࢜ۀ͞ΜσβΠφʔاը
ϋοΧιϯͷಛੑ(اըྗ)• ࣌ؒͷதͰҙݟΛ·ͱΊΔ͔• ͲΜͳൃදΛ͢Δ͔• ࢿྉ࡞ΓɾϏδωεϞσϧ• Ͳ͜ΛσϞ͢Δ͔• Ͳ͜Λ࡞ͬͯɺͲ͜ΛఘΊΔ͔ΤϯδχΞ࢜ۀ͞ΜσβΠφʔاը
ϋοΧιϯͷಛੑ(։ൃྗ)• ظؒͰಈ͘ͷΛ࡞Δඞཁ͕͋Δ• ϝϯόʔ͕ॻ͚Δ or ಡΊΔ• ٕज़తνϟϨϯδ͕ධՁ͞ΕΔ• ϫϯϚϯϓϨʔͩͱޙ͠ΜͲ͘ͳΔΤϯδχΞ࢜ۀ͞ΜσβΠφʔاը
Ռʹ͍ͭͯ
ఱؾ x ؍ޫ• ΞΠσΟΞ• ΞΩωΠλʔΛΦϚʔδϡ• ཱྀߦͰಥͷӍͰ༧ఆ͕௵Εͨ• ࣌ / ॴ x ఱؾใ x ࠓͷؾ ͔Β ϓϥϯΛఏҊͯ͘͠ΕΔ
ར༻ٕज़• React / Gatsby• Vercel• Tailwindcss / daisyUI• wetherNewsAPI
ࣄલʹ४උͨ͜͠ͱ
ࣄલʹ४උͨ͜͠ͱɾVercelΛར༻ͨ͠σϓϩΠɾGatsby / Tailwindcss / daisyUI ͷ࣮ɾςϯϓϨʔτϖʔδͷ࡞ɾGoogleMapAPIͷར༻ → ຊ൪Θͳ͔ͬͨɾGAS APIͷར༻ → mock͚ͩͰຊ൪Θͳ͔ͬͨɾnotionͰͷࢿྉΛ·ͱΊͨ → εϓϨουγʔτ࠷ڧ
ϝϯόʔߏ
ϝϯόʔߏ(طଘ3໊ + ৽ن2໊)ࣗ8FCΤϯδχΞཧձࣾͷಉظ+BWBΤϯδχΞཧόΠτͷಉظ৽نࣄۀ։ൃཧ"͞Μ্ྲྀఔϦϞʔτ#͞Μֶੜ͞ΜϦϞʔτ
ϝϯόʔߏ(ΤϯδχΞ3໊ + ϓϥϯφʔ 2໊)ࣗ8FCΤϯδχΞۀͰ3FBDUձࣾͷಉظ+BWBΤϯδχΞ3FBDUະܦݧόΠτͷಉظ৽نࣄۀ։ൃϓϥϯφʔ"͞Μ্ྲྀఔ3FBDUະܦݧ#͞Μֶੜ͞Μϓϥϯφʔ
ϝϯόʔߏ(ΤϯδχΞͷ୲)ࣗ8FCΤϯδχΞશମͷϑΥϩʔձࣾͷಉظ+BWBΤϯδχΞίΞϩδοΫόΠτͷಉظ৽نࣄۀ։ൃϓϥϯφʔ"͞Μ্ྲྀఔ$446*#͞Μֶੜ͞Μϓϥϯφʔ
ϋοΧιϯத͏·͘ߦͬͨ͜ͱ
͏·͘ߦͬͨ͜ͱ1.ಈ࡞֬ೝΛͯ͠PRΛ֬ೝ͢Δ
GithubͷࠩͰݟͮΒ͍• ͨ͜͠ͱ• ෳͷϖʔδΛ·ͱΊͨ• طଘͷίϯϙʔωϯτͷআ• • ίʔυͷมߋΘ͔Δ͕ಈ࡞Θ͔Βͳ͍
ϓϨϏϡʔڍಈΛ֬ೝ• σάϨʔγϣϯ͕ͳ͍͔֬ೝͰ͖Δ• ඇΤϯδχΞϨϏϡʔͰ͖Δ• ϞϒϨϏϡʔͰ͖Δ → ͍ٞ͢͠• ൃදͷΠϝʔδ͕Ͱ͖Δ
͏·͘ߦͬͨ͜ͱ2.ςϯϓϨʔτΛ४උͨ͠
ςϯϓϨʔτΛՃ• ͜ͷϖʔδΛݟΕͳΜͰͰ͖Δ• ίϐϖͰίʔυΛॻ͚Δ• αϯϓϧίʔυ͕͋Δ• ࢀߟϖʔδͷϦϯΫ͕͋Δ• Story BookͷΑ͏ͳ׆༻Λͨ͠
ֶͼ✅ ظؒͰ݁ՌΛग़͢ɹɾΓΔͱ͜ΖΛܾΊΔɹɾνʔϜͷ߹ҙΛͱͬͯΑΓྑ͍ΞΠσΟΞΛग़͢ɹɹˠPRͷϓϨϏϡʔ֬ೝ͕େ✅ ϞμϯͳϑϨʔϜϫʔΫΛ͏ɹɾϝϯόʔؒͷࣝϨϕϧ / ֶशίετ͕ҧ͏ɹɾϝϯόʔ͕Ͱ͖ΔϨϕϧͰλεΫΛΞαΠϯɹɾΘ͔Βͳ͍ͱ͜ΖϑΥϩʔʹೖΔɹɹɾ࣍ࣗͰ͖ΔΑ͏ʹϑΥϩʔ͢Δ
ײɾٱʑʹϋοΧιϯʹग़Δͱແྗ͕͞Θ͔ͬͯྑ͍ɹɾॳΊͯͷਓͱνʔϜΉͷ͍͠ɾϋοΧιϯͬͯࣄͷཁૉ͕ڽॖ͞Ε͍ͯΔͳɾReact Componentinstall͢Δ͚ͩͰಈ͘ͷͰɹReactͷԸܙΛڗडͰ͖͍ͯΔ