小さな課題解決から始めるVue.js / Getting started Vue.js for small improvement

by hypermkt

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"KBY͸K2VFSZ 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νʔϜͷٕྔʹ߹Θͤͨษڧձͷ࣮ࢪ͕Φεεϝ