Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Πϕϯτʹ͍ͭͯ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ϋοΧιϯͷಛੑ

Slide 7

Slide 7 text

ϋοΧιϯͷಛੑ(νʔϜϏϧσΟϯά) • ͞·͟·ͳόοΫάϥ΢ϯυͷਓ͕ࢀՃ͢Δ • ϋοΧιϯॳΊͯ / ϕςϥϯ • ΤϯδχΞ / σβΠφʔ / ࢜ۀ͞Μ etc… • ϝϯόʔͷϞνϕʔγϣϯ؅ཧ ΤϯδχΞ ࢜ۀ͞Μ σβΠφʔ اը

Slide 8

Slide 8 text

ϋοΧιϯͷಛੑ(اըྗ) • ୹࣌ؒͷதͰҙݟΛ·ͱΊΔ͔ • ͲΜͳൃදΛ͢Δ͔ • ࢿྉ࡞ΓɾϏδωεϞσϧ • Ͳ͜ΛσϞ͢Δ͔ • Ͳ͜Λ࡞ͬͯɺͲ͜ΛఘΊΔ͔ ΤϯδχΞ ࢜ۀ͞Μ σβΠφʔ اը

Slide 9

Slide 9 text

ϋοΧιϯͷಛੑ(։ൃྗ) • ୹ظؒͰಈ͘΋ͷΛ࡞Δඞཁ͕͋Δ • ϝϯόʔ͕ॻ͚Δ or ಡΊΔ • ٕज़తνϟϨϯδ͕ධՁ͞ΕΔ • ϫϯϚϯϓϨʔͩͱޙ൒͠ΜͲ͘ͳΔ ΤϯδχΞ ࢜ۀ͞Μ σβΠφʔ اը

Slide 10

Slide 10 text

੒Ռ෺ʹ͍ͭͯ

Slide 11

Slide 11 text

ఱؾ x ؍ޫ • ΞΠσΟΞ • ΞΩωΠλʔΛΦϚʔδϡ • ཱྀߦͰ౜ಥͷӍͰ༧ఆ͕௵Εͨ • ೔࣌ / ৔ॴ x ఱؾ৘ใ x ࠓͷؾ෼ ͔Β 
 ϓϥϯΛఏҊͯ͘͠ΕΔ

Slide 12

Slide 12 text

ར༻ٕज़ • React / Gatsby • Vercel • Tailwindcss / daisyUI • wetherNewsAPI

Slide 13

Slide 13 text

ࣄલʹ४උͨ͜͠ͱ

Slide 14

Slide 14 text

ࣄલʹ४උͨ͜͠ͱ ɾVercelΛར༻ͨ͠σϓϩΠ ɾGatsby / Tailwindcss / daisyUI ͷ࣮૷ ɾςϯϓϨʔτϖʔδͷ࡞੒ ɾGoogleMapAPIͷར༻ → ຊ൪͸࢖Θͳ͔ͬͨ ɾGAS APIͷར༻ → mock͚ͩͰຊ൪͸࢖Θͳ͔ͬͨ ɾnotionͰͷࢿྉΛ·ͱΊͨ → εϓϨουγʔτ࠷ڧ

Slide 15

Slide 15 text

ϝϯόʔߏ੒

Slide 16

Slide 16 text

ϝϯόʔߏ੒(طଘ3໊ + ৽ن2໊) ࣗ෼ 8FCΤϯδχΞ ෺ཧ ձࣾͷಉظ +BWBΤϯδχΞ ෺ཧ όΠτͷಉظ ৽نࣄۀ։ൃ ෺ཧ "͞Μ ্ྲྀ޻ఔ ϦϞʔτ #͞Μ ֶੜ͞Μ ϦϞʔτ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ϝϯόʔߏ੒(ΤϯδχΞͷ୲౰) ࣗ෼ 8FCΤϯδχΞ શମͷϑΥϩʔ ձࣾͷಉظ +BWBΤϯδχΞ ίΞϩδοΫ όΠτͷಉظ ৽نࣄۀ։ൃ ϓϥϯφʔ "͞Μ ্ྲྀ޻ఔ $446* #͞Μ ֶੜ͞Μ ϓϥϯφʔ

Slide 19

Slide 19 text

ϋοΧιϯத ͏·͘ߦͬͨ͜ͱ

Slide 20

Slide 20 text

͏·͘ߦͬͨ͜ͱ1. ಈ࡞֬ೝΛͯ͠PRΛ֬ೝ͢Δ

Slide 21

Slide 21 text

Githubͷࠩ෼Ͱ͸ݟͮΒ͍ • ͨ͜͠ͱ • ෳ਺ͷϖʔδΛ·ͱΊͨ • طଘ໰୊ͷίϯϙʔωϯτͷ࡟আ • ໰୊఺ • ίʔυͷมߋ͸Θ͔Δ͕ಈ࡞͸Θ͔Βͳ͍

Slide 22

Slide 22 text

ϓϨϏϡʔڍಈΛ֬ೝ • σάϨʔγϣϯ͕ͳ͍͔֬ೝͰ͖Δ • ඇΤϯδχΞ΋ϨϏϡʔͰ͖Δ • ϞϒϨϏϡʔͰ͖Δ → ٞ࿦͠΍͍͢ • ൃදͷΠϝʔδ͕Ͱ͖Δ

Slide 23

Slide 23 text

͏·͘ߦͬͨ͜ͱ2. ςϯϓϨʔτΛ४උͨ͠

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

ςϯϓϨʔτΛ௥Ճ • ͜ͷϖʔδΛݟΕ͹ͳΜͰ΋Ͱ͖Δ • ίϐϖͰίʔυΛॻ͚Δ • αϯϓϧίʔυ͕͋Δ • ࢀߟϖʔδ΁ͷϦϯΫ͕͋Δ • Story BookͷΑ͏ͳ׆༻Λͨ͠

Slide 26

Slide 26 text

ֶͼ ✅ ୹ظؒͰ݁ՌΛग़͢ ɹɾ΍Γ੾Δͱ͜ΖΛܾΊΔ ɹɾνʔϜͷ߹ҙΛͱͬͯΑΓྑ͍ΞΠσΟΞΛग़͢ ɹɹˠPRͷϓϨϏϡʔ֬ೝ͕େ੾ ✅ ϞμϯͳϑϨʔϜϫʔΫΛ࢖͏ ɹɾϝϯόʔؒͷ஌ࣝϨϕϧ / ֶशίετ͕ҧ͏ ɹɾϝϯόʔ͕੒௕Ͱ͖ΔϨϕϧͰλεΫΛΞαΠϯ ɹɾΘ͔Βͳ͍ͱ͜Ζ͸ϑΥϩʔʹೖΔ ɹɹɾ࣍͸ࣗ૸Ͱ͖ΔΑ͏ʹϑΥϩʔ͢Δ

Slide 27

Slide 27 text

ײ૝ ɾٱʑʹϋοΧιϯʹग़Δͱແྗ͕͞Θ͔ͬͯྑ͍ ɹɾॳΊͯͷਓͱνʔϜ૊Ήͷ೉͍͠ ɾϋοΧιϯͬͯ࢓ࣄͷཁૉ͕ڽॖ͞Ε͍ͯΔͳ ɾReact Component͸install͢Δ͚ͩͰಈ͘ͷͰ ɹReactͷԸܙΛڗडͰ͖͍ͯΔ