inflearn logo
็Ÿฅ่ญ˜ๅ…ฑๆœ‰
inflearn logo

Vue.js ๅง‹ใ‚ใ‚‹ - Age of Vue.js

Vue.jsใง็ฐกๅ˜ใซWeb้–‹็™บใŒใงใใ‚‹ใ‚ˆใ†ใ€ๅŸบๆœฌๆฆ‚ๅฟตใจๆ ธๅฟƒๆฉŸ่ƒฝใซใคใ„ใฆๅญฆ็ฟ’ใ—ใ€ๅฎŸ่ฃ…ใ—ใฆใฟใพใ™ใ€‚ ่ฌ›ๅบงใ‚’ๅ—่ฌ›ใ™ใ‚‹ใจใ€Vue.jsใงใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บใ‚’ใ™ใ‚‹ใฎใŒๆฅฝใ—ใใชใ‚‹ใงใ—ใ‚‡ใ†ใ€‚

้›ฃๆ˜“ๅบฆ ๅˆ็ดš

ๅ—่ฌ›ๆœŸ้–“ ็„กๅˆถ้™

JavaScript
JavaScript
Vue.js
Vue.js
JavaScript
JavaScript
Vue.js
Vue.js

ใŠ็Ÿฅใ‚‰ใ›

4 ไปถ

  • captain๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏใฟใ‚“ใชไปฒ่‰ฏใใ—ใฆใ„ใพใ™ใ‹๏ผŸ ๐Ÿ˜„

    ไปŠๅ›žใฏๆ–ฐ่ฆ่ฌ›็พฉใŒไธ€ใค็™บๅฃฒใ•ใ‚Œใฆใ”ๆกˆๅ†…ใ„ใŸใ—ใพใ™ใ€‚

    ไฝœใ‚ŠใชใŒใ‚‰ๅญฆใถใƒชใ‚ขใ‚ฏใƒˆ๏ผšๅŸบ็คŽ

    ใ“ใฎ่ฌ›็พฉใฏ็งใŒ่ฌ›็พฉ่€…ใงใฏใชใใ€ใƒ—ใƒญใƒ‡ใƒฅใƒผใ‚ตใƒผ๏ผ†ใƒ“ใƒ‡ใ‚ช็ทจ้›†่€…ใจใ—ใฆๅ‚ๅŠ ใ—ใพใ—ใŸใ€‚่ฌ›็พฉๅ…จไฝ“ใฎๆง‹ๆˆใŒ็Ÿญใ„ๆฆ‚ๅฟต่ชฌๆ˜Žใจใ‚ฏใ‚คใ‚บใ€ๅฎŸ็ฟ’ไธญๅฟƒใซใชใฃใฆใ„ใ‚‹ใฎใงใ€ใŠใใ‚‰ใ็งใฎ่ฌ›็พฉใŒๅฅฝใใชๆ–นใชใ‚‰ใ“ใฎ่ฌ›็พฉใ‚‚ๆฅฝใ—ใ่žใใ“ใจใŒใงใใ‚‹ใจๆ€ใ„ใพใ™:)

    ็พๅœจใ‚ชใƒผใƒ—ใƒณ่จ˜ๅฟตใง30๏ผ…ๅ‰ฒๅผ•ไธญใชใฎใง่ˆˆๅ‘ณใฎใ‚ใ‚‹ๆ–นใฏไธŠใฎใƒชใƒณใ‚ฏใ‚’ๅ‚่€ƒใซใ—ใฆใปใ—ใ„ใจๆ€ใ„ใพใ™ใ€‚

    ็งใฏไปŠๅนดๅˆใ‚ใฆใฎ่ฌ›็พฉใงJavaScriptใฎใƒฌใƒƒใ‚นใƒณใ‚’ๆบ–ๅ‚™ใ—ใฆใ„ใพใ™ใ€‚

    ใ‚ใ‚ใ€ไปŠๅนดๅˆใ‚ใซVue.jsใ€TypeScriptใชใฉๆ–ฐใ—ใ„ๆŠ€่ก“ใ‚’ๅญฆใถๆ–นใŒๅคšใ„ใงใ—ใ‚‡ใ†ใŒใ€1/31๏ผˆๆœˆ๏ผ‰ใพใง็งใฎ่ฌ›็พฉใ‚’25๏ผ…ๅ‰ฒๅผ•ใ—ใฆใ„ใ‚‹ใฎใงใ€ๅ‘จ่พบใซๅคšใใฎๅบƒๅ ฑใ‚’ใŠ้ก˜ใ„ใ—ใพใ™ใ€‚

    ใใ‚ŒใงใฏใพใŸ่‰ฏใ„ใ‚ณใƒณใƒ†ใƒณใƒ„ใงใ™ใใซใŠไผšใ„ใ—ใพใ—ใ‚‡ใ†ใ€‚
    ใ‚ใ‚ŠใŒใจใ†:)

    ้•ทๆœŸใƒ’ใƒงใ‚ฆใƒ‰ใƒชใƒผใƒ 

    0
  • captain๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏใ‚ญใƒฃใƒ—ใƒ†ใƒณๆฟๆฉ‹ใงใ™:)

    ไปŠๆ—ฅใฏ็š†ใ•ใ‚“ใŒๅฅฝใใชใƒ‹ใƒฅใƒผใ‚น2ใคใ‚’ๆŒใฃใฆใใพใ—ใŸใ€‚

    ่ฌ›็พฉ้–ข้€ฃใฎ่ณช็–‘ๅฟœ็ญ”ใ‚’ใ‚‚ใฃใจๆฅฝใซใ™ใ‚‹ใ“ใจใŒใงใใ‚‹YouTubeใƒใƒฃใƒณใƒใƒซใจVue.jsๆ–ฐ่ฆ่ฌ›็พฉใฎใŠ็Ÿฅใ‚‰ใ›ใงใ™:)

    1. ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บ็›ธ่ซ‡ๆ‰€ YouTubeใƒใƒฃใƒณใƒใƒซ

    ่ฌ›็พฉใ‚’่žใใชใŒใ‚‰ใ†ใพใใ„ใ‹ใชใ‹ใฃใŸใ‚Šใ€ๅญฆใ‚“ใ ๅ†…ๅฎนใ‚’ๅฎŸ้š›ใซ้ฉ็”จใ™ใ‚‹ใจใใซใ†ใพใใ„ใ‹ใชใ„ใ“ใจใŒๅคšใ‹ใฃใŸใงใ—ใ‚‡ใ†ใ‹ใ€‚ไปŠใฏใ‚‚ใฃใจๆฅฝใซใŠไผšใ„ใงใใพใ™ใ€‚ๆฏŽ้€ฑๅœŸๆ›œๆ—ฅๅˆๅพŒ9ๆ™‚30ๅˆ†ใซYouTubeใƒฉใ‚คใƒ–ๆ”พ้€ใ‚’้€ฒ่กŒใ™ใ‚‹ไบˆๅฎšใงใ™ใ€‚ไปฅไธ‹ใฎ่จ˜ไบ‹ใ‚’่ชญใ‚“ใง็›ธ่ซ‡็”ณ่ซ‹ใƒ•ใ‚ฉใƒผใƒ ใซ่จ˜ๅ…ฅใ—ใฆใใ ใ•ใ„ใ€‚็งใฏใƒ“ใƒ‡ใ‚ชใงใ‚ณใƒผใƒ‰ใ‚‚ใ‚‚ใฃใจๆฅฝใซ่ฆ‹ใฆใ€่ณชๅ•ใ‚‚ใ™ใใซ็ญ”ใˆใพใ™๏ผš๏ผ‰

    ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บ็›ธ่ซ‡ๆ‰€็ดนไป‹ๆ–‡

    ใ“ใ†ใ—ใฆๆ”พ้€ใ‚’ใ™ใ‚‹็†็”ฑใฏใ€็งใฎๆŽˆๆฅญใ‚’่žใ„ใฆใใ ใ•ใ‚‹ๆ–นใ€…ใฎๆ‚ฉใฟใ‚„ๆฐ—ใซใชใ‚‹ใ“ใจใ‚’็ด ๆ—ฉใ่งฃๆถˆใ™ใ‚‹ใŸใ‚ใงใ™ใ€‚ใ‚ใ’ใฆใใ ใ•ใ‚‹่ณชๅ•ใ‚’่ฆ‹ใ‚Œใฐใ€ใ—ใฐใ—ใฐใ‚ใ‚ใ€ใ“ใ†ใ„ใ†ๅ†…ๅฎนใฏไป–ใฎๆ–นใซใ‚‚ใŠ็Ÿฅใ‚‰ใ›ใ„ใŸใ ใ‘ใ‚Œใฐใจๆ€ใ„ใพใ™ใ€‚็›ธ่ซ‡ๆ‰€ใซใ‚‚ใฃใจ็ฉๆฅต็š„ใซๆ‚ฉใฟใ‚„่ณชๅ•ใ‚’ใŸใใ•ใ‚“่ผ‰ใ›ใฆใใ‚Œใ‚Œใฐๆ”พ้€ใ‚’่ฆ‹ใฆใ„ใ‚‹ๅคšใใฎๆ–นใ€ใใ—ใฆๆŽˆๆฅญใ‚’่žใ„ใฆไปŠๅพŒๅฎŸ้š›ใฎใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใซ้ฉ็”จใ™ใ‚‹้š›ใซไผผใŸๆ‚ฉใฟใ‚’ใ™ใ‚‹ๆ–นใซๅคงใ„ใซๅฝน็ซ‹ใคใ‚ˆใ†ใงใ™:)

    ๅ…ˆ้€ฑใซๅˆๆ”พ้€ใ‚’่กŒใ„ใพใ—ใŸใŒใ€ใ™ใงใซ30ไบบใ‚’่ถ…ใˆใ‚‹ๆ–นใ€…ใŒ1ๆ™‚้–“ไธ€็ท’ใซใ„ใŸใ ใใพใ—ใŸใ€‚ใฟใ‚“ใชๆดป็™บใซใƒใƒฃใƒƒใƒˆใซๅ‚ๅŠ ใ—ใฆใใ ใ•ใฃใฆๆœฌๅฝ“ใซๆฅฝใ—ใ้€ฒใ‚“ใ ใ‚ˆใ†ใงใ™ใ€‚ใ“ใ‚Œใ‹ใ‚‰ใ‚‚ๆ”พ้€ใงใ‚‚ใฃใจๅคšใใฎๆ–นใ€…ใ‚’ใŠไผšใ„ใงใใŸใ‚‰ใจๆ€ใ„ใพใ™:)

    ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บ็›ธ่ซ‡ๆ‰€1ๅ›ž็›ฎใฎๆ”พ้€ใ‚’ใ‚‚ใ†ไธ€ๅบฆ่ฆ‹ใ‚‹

    2. Typescript with Vue.js ๆ–ฐ่ฆ่ฌ›็พฉใฎใ”ๆกˆๅ†…

    2021ๅนดๅˆใฎ่ฌ›็พฉใงTypescript with Vue.jsๆ–ฐ่ฆ่ฌ›็พฉใ‚’่จญ็ซ‹ใฎไผ‘ๆ—ฅใ”ใ‚ใซ้–‹ๅง‹ใ™ใ‚‹ไบˆๅฎšใงใ™ใ€‚ๅ›ฝๅ†…ใ ใ‘ใงใชใไธ–็•Œไธญใงใ‚‚Vue.jsใจTypeScriptใฎใƒชใƒ•ใ‚กใƒฌใƒณใ‚นใŒใใ‚“ใชใซๅคšใใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚ 2019ๅนดใ‹ใ‚‰่ค‡ๆ•ฐใฎใ‚ตใƒผใƒ“ใ‚นใซ้ฉ็”จใ—ใฆใ„ใŸ็งใฎ็ตŒ้จ“ใ‚’ใ‚‚ใจใซใ€ใƒ“ใƒฅใƒผใงใ‚‚ใ‚ฟใ‚คใƒ—ใ‚นใ‚ฏใƒชใƒ—ใƒˆใ‚’็ฐกๅ˜ใ‹ใคๆฅฝใ—ใๆดป็”จใงใใ‚‹ๆ–นๆณ•ใซใคใ„ใฆใ€ใ™ในใฆใพใจใ‚ใฆใฟใพใ—ใŸใ€‚

    ็งใฏๅ€‹ไบบ็š„ใซ่‰ฏใ„ๆ•™่‚ฒใ‚’ๆไพ›ใ—ใŸใ„ใฎใงใ€ไป–ใฎๅ›ฝใฎVue + Typescriptๆ•™่‚ฒใ‚’ใŸใใ•ใ‚“ๆŽขใ—ใฆใฟใพใ—ใŸใŒใ€ใปใจใ‚“ใฉใ‚ใ‚Šใพใ›ใ‚“ใงใ—ใŸใ€‚ใŠใใ‚‰ใใ“ใ‚“ใชใซๅฎŸ้š›ใฎใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใ‚ณใƒผใƒ‰ใซใ™ใใซ้ฉ็”จใ—ใชใŒใ‚‰ๅญฆใถVue + Typescript่ฌ›็พฉใฏไธ–็•Œๅˆ(?)ใงใฏใชใ„ใ‹ใจๆ€ใ„ใพใ™๏ฝ—๏ฝ—

    ---

    ใใ‚Œใงใฏ่ฟ‘ใ„ใ†ใกใซๆ–ฐใ—ใ„ใƒ‹ใƒฅใƒผใ‚นใงใŠไผšใ„ใ—ใพใ—ใ‚‡ใ†ใ€‚

    ใฟใ‚“ใช้ขจ้‚ชใจใ‚ฆใ‚คใƒซใ‚นใฎไธกๆ–นใซๆณจๆ„ใ—ใฆใใ ใ•ใ„๏ผ :)

    ้•ทๆœŸใƒ’ใƒงใ‚ฆใƒ‰ใƒชใƒผใƒ 

    PS๏ผšใ‚คใƒณใƒ•ใƒฉใ‚นใƒˆใƒฉใ‚ฏใƒใƒฃใซ็Ÿฅ่ญ˜ๅ…ฑๆœ‰่€…ใฎใƒ•ใ‚ฉใƒญใƒผๆฉŸ่ƒฝใŒใ‚ใ‚Šใพใ—ใŸใ€‚ไธ‹ใฎใƒชใƒณใ‚ฏใงใƒ•ใ‚ฉใƒญใƒผใƒœใ‚ฟใƒณใ‚’ๆŠผใ—ใฆใใ ใ•ใ„ใ€‚

    ใƒ•ใ‚ฉใƒญใƒผใ™ใ‚‹ใซใฏใ‚ทใƒงใƒผใƒˆใ‚ซใƒƒใƒˆ

    3
  • captain๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏใ€ใŠไน…ใ—ใถใ‚Šใงใ™ใ€‚

    ใ‚คใƒณใƒ•ใƒฉใฎ็Ÿฅ่ญ˜ๅ…ฑๆœ‰่€…ใฏใ‚ญใƒฃใƒ—ใƒ†ใƒณๆฟๆฉ‹ใงใ™๐Ÿ˜

    ่ชฐใ‚‚ใŒใ‚ณใƒญใƒŠใ‚’ใ‚ˆใ้ฟใ‘ใฆใ„ใพใ™โ€ฆ๏ผŸ๏ผŸ

    1. Vue.jsใ‚ทใƒชใƒผใ‚บใ‚ณใƒผใ‚นๅ…จไฝ“ใฎๅ‰ฒๅผ•

    8/31(ๆœˆ)๏ฝž9/4(้‡‘) 5ๆ—ฅ้–“ใ€่ฃฝ่ฌ›ใฎใ‚ทใƒชใƒผใ‚บๅ…จไฝ“ใŒ25%ๅ‰ฒๅผ•ใจใชใ‚Šใพใ™ใ€‚ใ‚‚ใ—ๅ—่ฌ›ใ‚’ๆ‚ฉใ‚“ใ ่ฌ›็พฉใŒใ‚ใ‚Œใฐใ€ใ“ใฎๆฉŸไผšใซ่ณผๅ…ฅใ™ใ‚‹ใฎใ‚‚ใ„ใ„ใจๆ€ใ„ใพใ™๐Ÿ˜

    โ€ปๅ‰ฒๅผ•ๆœŸ้–“ใฏ้‡‘ๆ›œๆ—ฅใฎๆทฑๅคœใพใงใงใ™ใ€‚

    2. Vue.js ๅญฆ็ฟ’่ณ‡ๆ–™ใ‚ฌใ‚คใƒ‰

    ไปฅๅ‰ใ‹ใ‚‰่ฌ›็พฉใงไฝฟ็”จใ—ใŸๆ•™ๆกˆใ‚’ๅ…ฑๆœ‰ใ™ใ‚‹ใ“ใจใŒใงใใ‚‹ใ‹ใจใŠใฃใ—ใ‚ƒใฃใŸๆ–นใŒๅคšใ‹ใฃใŸใฎใงใ™ใŒใ€ใ—ใฐใ‚‰ใๅ‰ใซ่ฌ›็พฉ็ดนไป‹ใƒšใƒผใ‚ธใซไปฅไธ‹ใฎใ‚ˆใ†ใซVue.jsๅญฆ็ฟ’่ณ‡ๆ–™ใ‚’ๅ…ฌ้–‹ใ—ใฆใŠใใพใ—ใŸใ€‚

    ไธŠ่จ˜ใฎใ‚ตใ‚คใƒˆใซใฏVue.jsใฎๅ…จไฝ“็š„ใชๅ†…ๅฎนใ ใ‘ใงใชใใ€JavaScriptใฎๅŸบๆœฌๆ–‡ๆณ•ใจES6ๆ–‡ๆณ•ใ‚‚ใพใจใ‚ใฆใ‚ใ‚Šใพใ™ใฎใงใ€ๅ—่ฌ›ใ—ใชใŒใ‚‰ไธ€็ท’ใซ่ฆ‹ใฆใฟใ‚‹ใจๅฝนใซ็ซ‹ใคใงใ—ใ‚‡ใ†๐Ÿ˜

    3. ๅ…ฌ้–‹ไบˆๅฎš่ฌ›ๅบง

    Vue.js ใƒญใƒผใƒ‰ใƒžใƒƒใƒ— ๆœ€ๅพŒใฎ่ฌ›ๅบงใ‚’่žใ„ใŸๆ–นใฏใŠๅฑŠใ‘ใ„ใŸใ ใใพใ—ใŸใŒใ€็พๅœจใ€Œใ‚ฟใ‚คใƒ—ใ‚นใ‚ฏใƒชใƒ—ใƒˆ่ฌ›ๅบงใ€ใ‚’ใ”็”จๆ„ใ—ใฆใŠใ‚Šใพใ™ใ€‚ใ‚‚ใจใ‚‚ใจใฏใ‚‚ใ†ๆ—ฉใไธŠๅŠๆœŸใซ่จชใ‚Œใ‚ˆใ†ใจใ—ใพใ—ใŸใŒใ€ใ‚‚ใฃใจ้ข็™ฝใใฆๆœ‰็›Šใช่ฌ›ๅบงใฎใŸใ‚ใซๆบ–ๅ‚™ใ™ใ‚‹ใฎใซๆ™‚้–“ใŒใ‹ใ‹ใฃใฆใ„ใพใ™ใ€‚ๅˆฉ็‚น ใ”ไบ†ๆ‰ฟใŠ้ก˜ใ„ใ—ใ€ใ™ใใซ่‰ฏใ„ใ‚ณใƒณใƒ†ใƒณใƒ„ใงๆŽขใ—ใฆใŠไผšใ„ใ—ใพใ™ใ€‚

    ---

    ใ˜ใ‚ƒใ‚ใฟใ‚“ใชๅ…ƒๆฐ—ใซไปฒ่‰ฏใใ—ใฆใ€ไปŠๅ›žใฎๅ‰ฒๅผ•ๆœŸ้–“ใ‚’ใ†ใพใๆดป็”จใ—ใฆใ„ใŸใ ใ‘ใ‚Œใฐใจๆ€ใ„ใพใ™๐Ÿ˜

    ็งใฏๆฌกใฎ่ฌ›็พฉใงใ™ใใซโ€ฆ๏ผ

    ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™๐Ÿ˜

    ้•ทๆœŸใƒ’ใƒงใ‚ฆใƒ‰ใƒชใƒผใƒ 

    3
  • captain๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏใ€‚ไปŠๅ›ž่ฌ›็พฉใ‚’ๆ–ฐใŸใซ็™บๅฃฒใ—ใŸ่จ˜ๅฟตใงๅ—่ฌ›่ฉ•ใ‚คใƒ™ใƒณใƒˆใ‚’้€ฒ่กŒใ—ใพใ™:)

    ่ฌ›็พฉๅ—่ฌ›ๅพŒ่‰ฏใ‹ใฃใŸ็‚นใซใคใ„ใฆใ€็އ็›ดใซๅ—่ฌ›่ฉ•ใ‚’ๆฎ‹ใ—ใฆใใ ใ•ใฃใŸๆ–นใ€…ใซไธญ็ดš่ฌ›ๅบงๅ—่ฌ›ๅˆธใ‚’ๅทฎใ—ไธŠใ’ใพใ™:)

    ใ‚คใƒ™ใƒณใƒˆๆœŸ้–“ใฏ6ๆœˆ15ๆ—ฅใ‹ใ‚‰7ๆœˆ13ๆ—ฅใพใงใฎๆœˆใงใ™ใ€‚

     

    ๅˆ่จˆ5ๅˆ†ใ‚’้ธๆŠœใ—ใฆใ”ๆกˆๅ†…ใ„ใŸใ—ใพใ™ใฎใงๅคšใใฎใ”ๅ‚ๅŠ ใŠ้ก˜ใ„ใ—ใพใ™๏ผ :)

    ่ฌ›ๅบงใซ้–ขๅฟƒใ‚’ใŠๅฏ„ใ›ใ„ใŸใ ใใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™๏ผ :)

     

     

    2

๏ฟฅ5,524