Tweet
Tweet

Slide 1

Slide 1 text

͍Ζ͍Ζͳʓʓۦಈ։ൃͷ࿩ ͸ͱ (@kthatoto)

Slide 2

Slide 2 text

• Twitterɿ@kthatoto • Vue,Nuxt,React,TypeScript,Ruby, Rails,Go,Firebase,AWS • झຯɿϑοταϧ,Ξχϝ,ϙʔΧʔ, ɹɹɹLTۦಈ։ൃ ࣗݾ঺հ ͸ͱ

Slide 3

Slide 3 text

಺༰ ָ͘͠ษڧ͢Δํ๏

Slide 4

Slide 4 text

ʓʓۦಈ։ൃͱ͸ʁ • ݸਓతʹΑ͘ฉ͘΋ͷͩͱ ʮςετۦಈ։ൃʯͱ͔ʮυϝΠϯۦಈ։ൃʯͱ͔ • ʮςετʯʹΑͬͯʮۦಈʯ͢Δʮ։ൃʯ • ʮςετʯΛॻ͍ͯςετ͕௨ΔΑ͏ʹʮ։ൃʯ • ʓʓۦಈ։ൃɿʓʓΛਖ਼ͱ͢ΔΑ͏ʹ։ൃΛ͢Δ

Slide 5

Slide 5 text

ࠓճ࿩͢ʓʓۦಈ։ൃʹ͍ͭͯ • ଞʹ΋ʮϏϔΠϏΞۦಈ։ൃʯʮνέοτۦಈ։ൃʯ ʮϞσϧۦಈ։ൃʯͳͲ͍Ζ͍Ζ͋Γ·͢ • ͦ͏͍͏೉͍͠࿩͸Ͱ͖ͳ͍͠ͳ͍Ͱ͢ ʮకΊ੾Γۦಈ։ൃʯͳΜ͍ͯ͏΋ͷ΋w

Slide 6

Slide 6 text

ʓʓۦಈ։ൃ ʔ ͦͷ1 ϋοΧιϯۦಈ։ൃ

Slide 7

Slide 7 text

ϋοΧιϯۦಈ։ൃ ʔ ྲྀΕ • "·ͣ" ϋοΧιϯʹԠื͠·͢ (connpassͰʮϋοΧιϯʯͰݕࡧ) ϋοΧιϯͳͷͰۦಈྗൈ܈ɺ͋ͱ͸΍Γ͖ΔͷΈʂ ϋοΧιϯͰͰ͖ͨ΋ͷΛݸਓ։ൃͱͯ͠ଓ͚ͯ։ൃΛଓ͚ͯ΋Α͍ • ࠷ॳ͸νʔϜԠืͰ͖ΔΑ͏ͳΠϕϯτʹ஌Γ߹͍ͱࢀՃʂ • ࣗ෼͕ৄ͘͠ͳ͍/஌Βͳ͍ٕज़Λ࢖͏νϟϯε͕͝Ζ͝Ζ͍ͯ͠Δʂ

Slide 8

Slide 8 text

ϋοΧιϯۦಈ։ൃ ʔ ษڧ๏ʹ͍ͭͯ Ұൠతͳษڧϑϩʔ ʓʓΛษڧ ˠʓʓΛ࢖ͬͯԿ࡞Ζ͏͔ͳʁ ˠ˘˘Λ࡞Ζ͏ʂ ˠʓʓΛ࢖ͬͯ։ൃʂ ϋοΧιϯۦಈͳษڧϑϩʔ ϋοΧιϯࢀՃʂ ˠԿ࡞Ζ͏͔ͳʁ ˠ˘˘Λ࡞Ζ͏ʂ ˠԿͷٕज़࢖͓͏͔ͳʁ ˠ͔ͤͬͩ͘͠˚˚ͷ෦෼ͷ࣮૷ʹ ɹʓʓΛ࢖ͬͯΈΑ͏ʂ ˠ˚˚Λ࣮૷͢ΔͨΊʹʓʓΛௐࠪ ɹ ษڧʹͳΔʂ

Slide 9

Slide 9 text

ϋοΧιϯۦಈ։ൃ ʔ ࣮ྫ1 https://github.com/team-aluminum/super-heisei-mario ࣮ࡍʹϓϨΠͰ͖ΔϦϯΫ͕READMEʹ͋Γ·͢ʂ

Slide 10

Slide 10 text

ϋοΧιϯۦಈ։ൃ ʔ ࣮ྫ1 • Πϕϯτɿฏ੒࠷ޙͷϋοΧιϯ • ɹςʔϚɿʮฏ੒Λָ͘͠ৼΓฦΔ͜ͱ͕Ͱ͖ΔαʔϏε/Ϟϊʯ • ΞΠσΞɿฏ੒ݩ೥ʹొ৔ͨ͠ήʔϜϘʔΠ͔Βۙ೥ͷϋʔυ΁ ɹɹɹɹɹঃʑʹਐԽ͍ͯ͘͠ϚϦΦͷήʔϜ • ֶ΂ͨ͜ͱɾͩ͜ΘΓϙΠϯτ • Vue.js, VuexͷΈͰϚϦΦͷήʔϜΛ࣮૷ • جຊతʹଞͷϥΠϒϥϦ,ήʔϜΤϯδϯͳͲ͸ෆ࢖༻ • ήʔϜͰΑ͋͘Δিಥ൑ఆϩδοΫ(2D)ͷ࣮૷ • ϑϩϯτΤϯυઃܭ

Slide 11

Slide 11 text

ϋοΧιϯۦಈ։ൃ ʔ ࣮ྫ2 https://bonbon-bon.web.app/ https://github.com/kthatoto/shateki-frontend

Slide 12

Slide 12 text

ϋοΧιϯۦಈ։ൃ ʔ ࣮ྫ2 • Πϕϯτɿ͓ຍdeϋοΧιϯ • ɹςʔϚɿʮ԰୆ʯ • ΞΠσΞɿଞͷਓͱҰॹͷ԰୆Ͱ༡ΜͰ͍ΔମݧΛఏڙ͍ͨ͠ ɹɹɹɹɹશһಉ࣌ʹ༡΂ΔΦϯϥΠϯࣹతήʔϜ • ֶ΂ͨ͜ͱɾͩ͜ΘΓϙΠϯτ • Firebase Realtime DatabaseΛར༻ͯ͠ϦΞϧλΠϜ௨৴Λ࣮ݱ • ൓ল఺ • ࣮ࡍʹϓϨΠ͢ΔͨΊʹϩάΠϯ͕ඞཁ (ϥϯΩϯάूܭͷͨΊ) ϩάΠϯ͠ͳͯ͘΋༡΂ΔΑ͏ʹ͢Ε͹Α͔ͬͨ

Slide 13

Slide 13 text

ϋοΧιϯۦಈ։ൃ ʔ ϝϦοτͱσϝϦοτ • ϝϦοτ • ݟͤΔ৔͕͋ΔͷͰϞνϕʔγϣϯʹͳΔ ࣗ෼Ͱ࡞ͬͨ΋ͷΛϓϨθϯ͢Δܦݧ͕ੵΊΔ • ॠൃྗ͕ͭ͘ ࣮૷଎౓ɺ୹ظؒͰͷೱ͍νʔϜ࿈ܞ • ͍Ζ͍Ζͳٕज़Λࢼ͢͜ͱ͕Ͱ͖Δ • σϝϦοτ • جຊతʹϋοΧιϯ͕0͔Βͷελʔτ (ࣗ෼ͷϓϩμΫτΛ੒௕ͤ͞ΒΕ ΔΘ͚Ͱ͸ͳ͍) • ٸ͍Ͱ࡞ΔͨΊઃܭͳͲ͕ૄ͔ʹͳΓ͕ͪ

Slide 14

Slide 14 text

ʓʓۦಈ։ൃ ʔ ͦͷ2 LTۦಈ։ൃ

Slide 15

Slide 15 text

LTۦಈ։ൃ ʔ ྲྀΕ • "·ͣ" LTʹԠื͠·͢ (connpassͰʮLTʯͰݕࡧ) ͦͷ࣌ʹ "·ͣ" LTλΠτϧΛܾΊ·͢ ͦͯ͠େࡶ೺ʹൃද͍ͨ͠಺༰ͷεϥΠυΛ "·ͣ" ࡞Γ·͢ ͦͷεϥΠυΛਖ਼ͱ͢ΔͨΊʹ ࣗ෼ͷ࡞ͬͨLTʹΑͬͯۦಈ͢Δ։ൃΛ࢝Ί·͢ • ্هύλʔϯɿԠืˠλΠτϧܾఆˠεϥΠυ࡞੒ˠ։ൃ • ผύλʔϯ̍ɿԠืˠλΠτϧܾఆˠ։ൃˠͰ͖ͨͱ͜·ͰεϥΠυ࡞੒ • ผύλʔϯ̎ɿԠืˠ։ൃˠͰ͖ͨͱ͜·ͰεϥΠυ࡞੒ˠλΠτϧܾఆ

Slide 16

Slide 16 text

ઌͣԠืΑΓ࢝ΊΑ ("ઌͣᯂΑΓ࢝ΊΑ"෩ʹ)

Slide 17

Slide 17 text

LTۦಈ։ൃ ʔ ྫ • ྫ)ʮHTML,CSS,JSͰి୎࡞ͬͯΈͨʯͱ͍͏λΠτϧͰLTʹԠืɻ ɹɹLTΠϕϯτ͸1िؒޙɻ1िؒͰి୎ͱLTΛ࡞Δɻ ɹɹ22222...ͱೖྗ͢Δͱి୎ͷग़ྗ෦෼ʹɺ ɹɹNyan Cat͕ྲྀΕΔԋग़ΛೖΕΔɻ ɹɹൃද಺༰͸ओʹCSSͰͩ͜Θͬͨ఺ͱJSͰͷ ɹɹܭࢉϩδοΫʹ͍ͭͯɻ࢛ଇԋࢉͷॱংͱ͔ɻ 2222222

Slide 18

Slide 18 text

LTۦಈ։ൃ ʔ ϝϦοτͱσϝϦοτ • ϝϦοτ • ݟͤΔ৔͕͋ΔͷͰϞνϕʔγϣϯʹͳΔɺ ѹ౗తਐḿ ࣗ෼Ͱ࡞ͬͨ΋ͷΛϓϨθϯ͢Δܦݧ͕ੵΊΔ • σϝϦοτ • ։ൃҎ֎ʹεϥΠυΛ࡞Δ͕࣌ؒൃੜͯ͠͠·͏ • ϝϦοτʁ • ൃද಺༰ͷมߋɺ్தΩϟϯηϧ(௚લͰͳ͚Ε͹େ఍)͸Մೳ

Slide 19

Slide 19 text

LTۦಈ։ൃ ʔ ࣮ྫ https://speakerdeck.com/kthatoto/saikyou-houti-game ಺༰ͷมߋ...

Slide 20

Slide 20 text

௕ظతͳϞνϕʔγϣϯ • ֎తཁҼʹΑͬͯϞνϕʔγϣϯΛ࡞͍ͬͯ͘ํ๏ • LTʹਃ͠ࠐΉ,ϋοΧιϯʹਃ͠ࠐΉ • LT͸தظతͳϞνϕʔγϣϯ • ϋοΧιϯ͸୹ظతͳϞνϕʔγϣϯ • ௕ظతͳϞνϕʔγϣϯ͸ʁ • ࣗ෼ͷ࡞Γ͍ͨ΋ͷΛ࡞͍ͬͯ͘ • ໨ඪઃఆ͕ɺʮWebαʔϏε׬੒ʂϦϦʔεʂʯʹͳͬͯ ͠·͏ͱ࠳ં͢Δ͜ͱ͕ଟ͍ (ݸਓͷҙݟͰ͕͢) • ͡Ό͋Ͳ͏͢Δ͔ʁ

Slide 21

Slide 21 text

௕ظతͳϞνϕʔγϣϯ • LTΛར༻͠·͠ΐ͏ʂ • ʓʓ։ൃதͷ˘˘ͷ࿩ • ྫ) ݸਓήʔϜ։ൃதʹCypressͰͷςετΛ ɹ GitHub ActionsͰࣗಈԽͨ͠࿩ • ήʔϜͷ঺հΛͭͭ͠ຊ୊͸։ൃதʹۤ࿑ͨ͜͠ͱͱ͔ ٕज़తʹͩ͜Θͬͨ͜ͱͱ͔ • ໨ඪઃఆΛʮLTͰʓʓʹ͍ͭͯ࿩͢ʂʯʹͯ͠։ൃΛଓ͚ Δ͜ͱͰܧଓతʹখ͞ͳਐḿΛग़͠ଓ͚Δ͜ͱ͕Ͱ͖Δ