小さな課題解決から始めるVue.js / Getting started Vue.js for small improvement
by
hypermkt
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
όʔνʔ(.01&1"#0JOD ୈճϖύϘςοΫΧϯϑΝϨϯεʙ7VFKTಛूʙ খ͞ͳ՝ղܾ͔Β࢝ΊΔ7VFKT
Slide 2
Slide 2 text
ιϑτΣΞΤϯδχΞ 4)ࣄۀ෦άʔϖάϧʔϓ όʔνʔ!IZQFSNLU IUUQCMPHIZQFSNLUKQ ࡛ۄݝग़Ͱ͢
Slide 3
Slide 3 text
άʔϖ ॳ৺ऀ͚ϗʔϜϖʔδ࡞αʔϏε ඒ༰ࣨɺҿ৯ళͳͲ༷ʑͳۀछ͕ར༻ αʔϏε։͔࢝Β̔ ϩʔε͓͡͞Μ ϛϯνʔ IUUQTHPPQFKQ
Slide 4
Slide 4 text
͡Ίʹ̏ͭ
Slide 5
Slide 5 text
ରऀ w7VFKTͷಋೖΛݕ౼͍ͯ͠ΔΤϯδχΞɾσβΠφʔ͚ wνʔϜͷΤϯδχΞɾσβΠφʔڞʹ7VFKT͕΄΅ະܦݧ wԿΛ͖͔͚ͬͰಋೖ͠Α͏͔໎͍ͬͯΔ
Slide 6
Slide 6 text
ࠓ͓͢Δ༰ ՝ ՝ղܾ 7VFKTಋೖʹ͚ͯͷ४උ άʔϖͰͷಋೖࣄྫ ·ͱΊ w,1*ɺ+4ίʔυվળͷͨΊʹ7VFKTΛಋೖɾར༻ͨ͠
Slide 7
Slide 7 text
ΰʔϧ wάʔϖͷখ͞ͳಋೖࣄྫ͕ڞ༗͞ΕΔ w7VFKTͷಋೖΛݕ౼͍ͯ͠Δํʑ͕ɺ ·ͣখ͞ͳ՝ղܾ͔ΒνʔϜʹఏҊ͢Δ
Slide 8
Slide 8 text
՝͕̏ͭ
Slide 9
Slide 9 text
՝ νʔϜશһͰ,1*վળ
Slide 10
Slide 10 text
νʔϜશһͰ,1*վળ wલظ͔Β࢝·Δ wظ͝ͱʹྗ͢Δ,1* ͓ਃ͠ࠐΈɺୀձɺܖ ʣΛܾΊΔ wνʔϜશһͰ,1*վળʹऔΓΉ
Slide 11
Slide 11 text
͓ਃ͠ࠐΈʹྗ wνʔϜશһͰ͓ਃ͠ࠐΈ͚ͩʹྗ wୀձɺܖͳͲͷଞ,1*ແࢹ wظతվળͷΈͰதظతͳ։ൃجຊ͠ͳ͍
Slide 12
Slide 12 text
νʔϜશһͰ͓ਃ͠ࠐΈΛഒʹͨ͠ IUUQTTQFBLFSEFDLDPNIZQFSNLUUJNVRVBOZVBOEFPTIFOTJJQNJTIVXPCFJOJTJUBIVB
Slide 13
Slide 13 text
՝ +BWB4DSJQU
Slide 14
Slide 14 text
։ൃελΠϧ wK2VFSZϓϥάΠϯͷΈΛ༻ wύοέʔδཧແ͠ wجຊతʹ֤ϖʔδ͝ͱʹɺ+4ϑΝΠϧΛ༻ҙ
Slide 15
Slide 15 text
νʔϜߏ wΤϯδχΞ໊ wશһK2VFSZΛར༻࣮ͨ͠Մೳ w ݸਓతʹ 7VFKTܦݧऀ໊ wσβΠφʔ໊ wK2VFSZΛར༻ͨ͠ίʔσΟϯά͕ಘҙ໊ w+BWB4DSJQUͷίʔσΟϯά͕ෆಘҙ໊
Slide 16
Slide 16 text
ར༻༻్ wσβΠϯௐɾϨεϙϯγϒԽʹ͏$44ΫϥεͷΓ ସ͑ wόϦσʔγϣϯ w"1*ݺͼग़͠ JG EFWJDFbQD` \ bKTCMPDL` BEE$MBTT QD ^FMTF\ bKTCMPDL` BEE$MBTT TNBSUQIPOF ^
Slide 17
Slide 17 text
՝ wάϩʔόϧԚછ w༻͞Ε͍ͯΔ͔͔Βͳ͍ଟͷK2VFSZϓϥάΠϯ w7JFXͱϩδοΫ͕ࠞࡏͯ͠ϝϯςφϯεੑ͕ѱ͍ w༷ʑͳΠϕϯτ݅ʹΑΓݺͼग़͞ΕΔ$44ΫϥεͷΓ ସ͑ॲཧ͕େଟ
Slide 18
Slide 18 text
Өڹ wόά͕ൃੜ͍͢͠ wίʔυϨϏϡʔࠔ w։ൃεϐʔυԼ
Slide 19
Slide 19 text
՝̏ ڝ߹αʔϏεʹෛ͚ͳ͍6*։ൃ
Slide 20
Slide 20 text
ผϖʔδͰΛ֬ೝ͢ΔελΠϧ
Slide 21
Slide 21 text
ผϖʔδͰΛ֬ೝ͢ΔελΠϧ σβΠϯ͕มΘ͔͔ͬͨΒͳ͍ Ͳ͏දࣔ͞ΕΔͷ͔͔Βͳ͍
Slide 22
Slide 22 text
ϦΞϧλΠϜϓϨϏϡʔ
Slide 23
Slide 23 text
Πϝʔδͱͯ͠
Slide 24
Slide 24 text
·ͱΊ wϏδωεత՝ɿ ɹ,1*վળ ڝ߹αʔϏεʹෛ͚ͳ͍6*։ൃ wٕज़త՝ νʔϜͰͷϑϩϯτΤϯυ։ൃೳྗ
Slide 25
Slide 25 text
՝ղܾ
Slide 26
Slide 26 text
ཁ݅ wΠϕϯτʹԠͨ͡$44ΫϥεͷΓସ͑ wσʔλόΠϯσΟϯά wখنʹར༻Ͱ͖Δ wنͷେ͖ͳΞϓϦέʔγϣϯ։ൃʹରԠ
Slide 27
Slide 27 text
ݕ౼ͨ݁͠Ռ
Slide 28
Slide 28 text
7VFKT͕࠷ద
Slide 29
Slide 29 text
ͳͥ7VFKT͔ wϏϡʔͷมߋʹಛԽ͍ͯ͠Δ wֶशίετ͕͍ wຊޠυΩϡϝϯτ͕͋Δ wγϯϓϧͳߏจ wطଘίʔυʹಋೖ͍͢͠ wσβΠφʔͱڠۀ͍͢͠
Slide 30
Slide 30 text
ͱ͍͑૬ஊͳ͘ ͍͖ͳΓಋೖͰ͖ͳ͍
Slide 31
Slide 31 text
7VFKTಋೖʹ͚ͯͷ४උ
Slide 32
Slide 32 text
આ໌ձɾษڧձΛ࣮ࢪ w7VFKTಋೖઆ໌ձ w+BWB4DSJQUษڧձ w7VFKTϋϯζΦϯ
Slide 33
Slide 33 text
7VFKTಋೖઆ໌ձ wର wνʔϜͷ։ൃऀɺσβΠφʔ͚ w༰ wڝ߹αʔϏεͷڧΈɺզʑͷऑΈΛൺֱ wڝ߹αʔϏεʹෛ͚ͳ͍ػೳΛఏڙ͢ΔͨΊɺ 7VFKTಋೖͷඞཁੑΛઆ໌
Slide 34
Slide 34 text
7VFKTಋೖઆ໌ձ ͔֬ʹݱঢ়ͷ··Ͱ ڝ߹αʔϏεʹউͯͳ͍ طଘػೳʹಋೖ͢Δͱ ݹ͍ϒϥβͷར༻ऀʹӨڹ͕ग़Δ ৽نػೳ։ൃ࣌ྑ͍ ·ͣখنʹ ͬͯΈͯ +BWB4DSJQUෆಘҙͳͷͰ ৺ʢσβΠφʔ
Slide 35
Slide 35 text
+BWB4DSJQUษڧձ wର w+4ίʔσΟϯά͕ෆಘҙͳσβΠφʔ͚ w༰ w+BWB4DSJQUͷجຊతͳจ๏ wK2VFSZΛར༻ͨ͠σβΠϯௐ w+4͕ಘҙͳσβΠφʔʹΑΓिաڈճ࣮ࢪ
Slide 36
Slide 36 text
+BWB4DSJQUษڧձ Ͳ͏ͯ͠ಈ͍͍ͯΔͷ͔ ͔ͬͨ ͔Βͳ͍ॴ ૬ஊͰ͖ͯॿ͔Δ ۀʹ׆͔͍ͤͯͳ͍ͷͰɺ Ͱ͖͍ͯΔ͔ෆ҆ ษڧͷํ͕͔ͬͨ
Slide 37
Slide 37 text
7VFKTϋϯζΦϯ wର wνʔϜ֎ͷ։ൃऀɺσβΠφʔ͚ w༰ w7VFKTͷجຊతͳ͍ํΛϋϯζΦϯܗࣜͰߨٛ w7VFΠϯελϯεͷߏɺWJG WGPS WCJOE WNPEFMͷ͍ํ wճ࣌ؒ w IUUQTHJUIVCDPNIZQFSNLUIZQFSNLUUSFFNBTUFSKBWBTDSJQUWVFKTIBOETPO
Slide 38
Slide 38 text
7VFKTϋϯζΦϯ 7VFKTͷجૅ͔ͬͨʂ ϚχϡΞϧΛݟͳ͕Βग़དྷͦ͏ ํόΠϯσΟϯά͢͝ʔ͍ʂ ʢσβΠφʔʣ "1*͔Βσʔλऔಘ Ͳ͏ͬͯΔͷʁ
Slide 39
Slide 39 text
άʔϖͰͷಋೖࣄྫ
Slide 40
Slide 40 text
ςϯϓϨʔτҰཡը໘ w͓ਃ͠ࠐΈվળͷࢪࡦ wߜΓࠐΈɾฒͼସ͑Λ͚Δ ͜ͱͰɺϢʔβʔͱςϯϓϨʔ τͷϚονϯά্͕͕Ε ͓ਃ͠ࠐΈ͕૿͑ΔͷͰʁ
Slide 41
Slide 41 text
γϯϓϧߏ w$%/ܦ༝ͷ7VFKTΛར༻ w؆қͳ࣮ͳͷͰίϯϙʔωϯτແ͠ wWVFSPVUFS 7VFYෆཁ w"KBYK2VFSZ wߜΓࠐΈpMUFS#Z ฒͼସ͑PSEFS#ZΛར༻ ࣌7VFܥʣ
Slide 42
Slide 42 text
࣮࣌ʹؾΛ͚ͭͨ͜ͱ w୲σβΠφʔʹ7VFKTͷσΟϨΫςΟϒɾ ΠϯελϯεͷߏΛஸೡʹઆ໌ wσβΠφʔ͕ࣗͰௐࠪͰ͖ΔΑ͏ʹຊޠυΩϡϝϯτ ʹ͍ͭͯҊ
Slide 43
Slide 43 text
ฒͼସ͑ɺߜΓࠐΈΛՃ
Slide 44
Slide 44 text
݁Ռ
Slide 45
Slide 45 text
݁Ռ wςϯϓϨʔτ໊ͷΫϦοΫ૿ wݮ wϢʔβʔͱͷϚονϯάʹޭ
Slide 46
Slide 46 text
ςϯϓϨʔτҰཡܦ༝ͷ͓ਃ͠ࠐΈ w$7૿ w$73૿
Slide 47
Slide 47 text
ʲҙʳ ࢪࡦͷಡΈ͕͚ͨͬͨͩͰɺ 7VFKTΛ͔ͬͨΒ,1*͕ ্ͨ͠Θ͚Ͱͳ͍Ͱ͢ɻ
Slide 48
Slide 48 text
͜ͷఔͷػೳͰ͋Ε K2VFSZͰྑ͍ͷͰʁ
Slide 49
Slide 49 text
7VFKTͱK2VFSZͰൺֱͯ͠Έͨ
Slide 50
Slide 50 text
؆୯ͳߜΓࠐΈɺฒͼସ͑ͷαϯϓϧίʔυ 7VFKT൛IUUQTDPEFQFOJPBOPOQFOPF([H& K2VFSZ൛IUUQTDPEFQFOJPBOPOQFOZP[B2C
Slide 51
Slide 51 text
ൺֱϙΠϯτᶃ ϏϡʔͱϩδοΫׂ͕Ͱ͖Δ
Slide 52
Slide 52 text
K2VFSZ w+BWB4DSJQUͱ)5.-͕ີ݁߹ʹͳΔ ڽͬͨσβΠϯͷ߹ɺ+BWB4DSJQUଆͰͷमਖ਼͕खؒʹͳΔ
Slide 53
Slide 53 text
7VFKT w+BWB4DSJQUͱ)5.-͕ࠞ͟Βͳ͍ wςϯϓϨʔτΤϯδϯͷΑ͏ʹѻ͑Δ
Slide 54
Slide 54 text
ൺֱϙΠϯτᶄ )5.-ͷࣗಈඳը
Slide 55
Slide 55 text
K2VFSZ wฒͼସ͑ɾߜΓࠐΈͨ͠Βɺ)5.-ͷඳըॲཧ͕ ඞཁ
Slide 56
Slide 56 text
7VFKT wWGPSσΟϨΫςΟϒΛ͏͜ͱͰฒͼସ͑ɾߜΓࠐΈΛ ͨ͠ΒɺͷมԽΛݕ͠)5.-͕ࣗಈతʹඳը͞ΕΔ ಉظ͢Δ
Slide 57
Slide 57 text
7VFKTΛͬͯྑ͔ͬͨ͜ͱ wϏϡʔͱϩδοΫͷॲཧΛׂग़དྷͨ wςϯϓϨʔτΤϯδϯͷΑ͏ʹ͑ͨ w)5.-ΛݟΕԿ͕ى͖Δ͔͔Δ wσβΠφʔͱڠۀ͍͢͠ w։ൃɾσβΠφʔڞʹগ͠ͷ͍ํͷڞ༗ͷΈͰɺ ܧଓతͳमਖ਼͕Ͱ͖ΔΑ͏ʹͳͬͨ
Slide 58
Slide 58 text
·ͱΊ
Slide 59
Slide 59 text
·ͱΊ w7VFKT,1*վળͳͲখ͞ͳ՝ղܾʹར༻Ͱ͖Δ wখنͳमਖ਼ͰϏϡʔͱϩδοΫΛׂ͢Δ͜ͱͰ Մಡੑ্͕Γ։ൃεϐʔυͷ্ w৽ٕज़ͷಋೖ࣌ʹ՝ɺతΛνʔϜʹ૬ஊ wνʔϜͷٕྔʹ߹Θͤͨษڧձͷ࣮ࢪ͕Φεεϝ