Slide 1

Slide 1 text

41"࣮૷࠷લઢ 101$03/ ޒे઒ɹ༸ฏ ʢ͍͔ͦΘɹΑ͏΁͍ʣ dࠓͲ͖ͷ+4ϑϨʔϜϫʔΫબͼd

Slide 2

Slide 2 text

ࣗݾ঺հ w ޒे઒༸ฏʢΠιοϓʣ  ্ӽࢢࡏॅͷϑϦʔϥϯεΤϯδχΞ  ࢳڕ઒ࢢग़਎ w झຯɿυϩʔϯɺϤʔϤʔɺόε௼Γ w 5XJUUFSɿ!:VIJJTL w IUUQCMPHZVIJJTLDPN

Slide 3

Slide 3 text

ΞδΣϯμ w γϯάϧϖʔδΞϓϦέʔγϣϯͷ͓͞Β͍ w ओཁϑϨʔϜϫʔΫ w 3FBDU w "OHVMBS w 7VFKT w ͦΕͧΕͷબͼͲ͜Ζ

Slide 4

Slide 4 text

γϯάϧϖʔδΞϓϦέʔγϣϯ ʢ4JOHMF1BHF"QQMJDBUJPOʣ

Slide 5

Slide 5 text

IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM

Slide 6

Slide 6 text

w 8FCϖʔδΛ෦෼తʹߋ৽ w දࣔύϑΥʔϚϯεʹ༏Ε͍ͯΔ  w Ϣʔβʔମݧʢ69ʣ͕޲্ɻ

Slide 7

Slide 7 text

'BDFCPPL

Slide 8

Slide 8 text

(PPHMF.BQ

Slide 9

Slide 9 text

ैདྷͷϖʔδભҠͷ8FCΞϓϦέʔγϣϯ ͱൺ΂ͯɺେ෯ʹ࣮૷ίετ͕͔͔Δɻ

Slide 10

Slide 10 text

࣮૷ίετΛԼ͛ΔͨΊɺ ͜͜ʙ̏೥ͰҰؾʹීٴͨ͠ͷ͕ɺ 41"࣮૷ʹಛԽͨ͠ +BWB4DSJQUϑϨʔϜϫʔΫɻ

Slide 11

Slide 11 text

ͦΕͧΕಛ௃΍ػೳ͕ଟ͍ͷͰɺͻͱͭͣͭ ࢼ͍ͯ͘͠ͷ͸͕࣌ؒඞཁɻ

Slide 12

Slide 12 text

ओཁ+BWB4DSJQUϑϨʔϜϫʔΫͷ঺հ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

w 'BDFCPPLࣾ੡ͷ6*ߏங༻ͷϥΠϒϥϦɻ  w ࠓݱࡏੈքͰҰ൪࢖ΘΕ͍ͯΔͱݴͬͯ΋ա ݴͰ͸ͳ͍΄Ͳਓؾɻ  w ϑϨʔϜϫʔΫͰ͸ͳ͘ɺ͋͘·Ͱ΋7JFXΛ ୲౰͢ΔϥΠϒϥϦɻ

Slide 15

Slide 15 text

w ίϯϙʔωϯτࢦ޲

Slide 16

Slide 16 text

ίϯϙʔωϯτɹʹɹঢ়ଶɾػೳΛ࣋ͬͨ෦඼ ίϯϙʔωϯτΛ૊Έ߹Θͤͯ ϖʔδΛߏங͢Δ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

-> import React from 'react'; class Hello extends React.Component { render() { return (

{this.props.message}

); } }

Slide 20

Slide 20 text

w +49 w 9.-Λ֦ுͨ͠+BWB4DSJQUͷதʹ)5.-ίʔ υΛຒΊࠐΉͨΊͷ࢓૊Έ

Slide 21

Slide 21 text

render() { return (

{this.props.text}

); }

Slide 22

Slide 22 text

w 7JSUVBM%0. w 3FBDUͷόοΫΤϯυʹ͋Δ%0.ߏ଄Λந৅ Խͨ͠σʔλߏ଄ IUUQTDBMFOEBSQFSGQMBOFUDPNEJ⒎

Slide 23

Slide 23 text

w σʔλϞσϧͷߏ଄มԽʹ߹Θͤͯ7JSUVBM %0.ͷલޙͷࠩ෼Λࢉग़ w %0.ͷ࠶ඳըΛࠩ෼ͷ͋ͬͨՕॴ͚ͩߦ͏ IUUQTDBMFOEBSQFSGQMBOFUDPNEJ⒎

Slide 24

Slide 24 text

w σʔλϑϩʔΞʔΩςΫνϟͱͯ͠ʮ'MVYʯΛਪ঑ɻ w 'MVY͸ʮσʔλͷྲྀΕΛҰํ޲ʹݶఆ͢Δઃܭύ λʔϯʯ

Slide 25

Slide 25 text

σʔλͷྲྀΕ͕ํ޲ʹͳΔ͜ͱͰɺγϯϓϧʹɻ

Slide 26

Slide 26 text

w 'MVYΛ࣮ݱ͢ΔͨΊʹɺ3FEVYͱ͍͏ঢ়ଶ؅ཧϥ ΠϒϥϦΛ࢖༻͢Δͷ͕ϙϐϡϥʔɻ

Slide 27

Slide 27 text

w ࠷ۙ͸.PC9΋ਓؾɻ'MVYͱ͸ҟͳΔϦΞΫςΟϒ ͳσʔλϑϩʔΛఏڙɻ  γϯϓϧͳ൓໘ɺઃܭྗ͕ඞཁɻ

Slide 28

Slide 28 text

w 3FBDUͷίʔυΛͦͷ··ΞϓϦʹ͢Δ 3FBDU/BUJWFɻ w ͱʹ͔͘ਓؾͳͷͰ8FC্Ͱͷ৘ใ͕ଟ͍ w ؔ࿈ϥΠϒϥϦ΋๛෋ 3FBDUͷϝϦοτ

Slide 29

Slide 29 text

w ඞཁͳ΋ͷΛࣗ෼Ͱ૊Έ߹ΘͤΔඞཁ͕͋Δ ʢϧʔςΟϯά΍"KBYɺσʔλ؅ཧͷϥΠϒ ϥϦͳͲʣ  ˠSFBDUCPJMFSQMBUFɺDSFBUFSFBDUBQQ  ɹ/FYUKT w σβΠφʔ͞Μͱڠۀ͢Δ৔߹ʹɺ+49͕ड ͚ೖΕΒΕͳ͍৔߹͕͋Δ 3FBDUͷσϝϦοτ

Slide 30

Slide 30 text

w ݱࡏͷόʔδϣϯͰ಺෦࣮૷͕ॻ͖׵͑ΒΕͨɻ  ͜Ε͔Βঃʑʹߴ଎Խ͞Ε͍ͯ͘ɻ

Slide 31

Slide 31 text

Angular

Slide 32

Slide 32 text

w "OHVMBS͸ϑϧελοΫͷ+BWB4DSJQUϑϨʔ ϜϫʔΫɻඞཁͳ΋ͷ͸શͯೖͬͯΔɻ

Slide 33

Slide 33 text

w ίϯϙʔωϯτࢦ޲ @Component({ selector: 'my-app', template: `

` }) export class AppComponent { title = 'Hello world!'; }

Slide 34

Slide 34 text

w 7JSUVBM%0.

Slide 35

Slide 35 text

w 8FCඪ४Λҙ͍ࣝͯ͠Δɻ w &DNB4DSJQU w &4.PEVMFT w 8FCBOJNBUJPOT w 8FCDPNQPOFOUT w FUD

Slide 36

Slide 36 text

w "OHVMBSͰ͸5ZQF4DSJQUʢ"MU+4ʣΛ࠾༻ɻ ੩తܕ෇͚Λ෇༩ɻ

Slide 37

Slide 37 text

export class HeroesComponent implements OnInit { count: number; heroes: Hero[]; selectedHero: Hero; constructor(private heroService: HeroService) { } ngOnInit() { this.getHeroes(); } getHeroes(): void { this.heroService.getHeroes().then( heroes => this.heroes = heroes ); } }

Slide 38

Slide 38 text

+BWBͬΆ͍ɻ

Slide 39

Slide 39 text

w ಠࣗͷ)5.-ςϯϓϨʔτγεςϜ

{{hero.name}} details!

id: {{hero.id}}

name:

Slide 40

Slide 40 text

ςϯϓϨʔτߏจɺΩϞ͍

Slide 41

Slide 41 text

w %FQFOEFODZ*OKFDUJPO ґଘੑͷ஫ೖ

Slide 42

Slide 42 text

ڞ௨ॲཧΛఆٛͯ͠ɺ ίϯϙʔωϯτʹ஫ೖ͢Δ͜ͱͰ࠶ར༻Մೳʹ͢Δ IUUQCSBOEPODMBQQDPNXIBUJTEFQFOEFODZJOKFDUJPOBOEXIZJTJUVTFGVM

Slide 43

Slide 43 text

w BOHVMBSDMJʢίϚϯυϥΠϯπʔϧʣ  $-*ͰίʔυΛੜ੒Ͱ͖Δɻ  ϕετϓϥΫςΟεɻ ng new PROJECT-NAME cd PROJECT-NAME ng serve ng generate component my-new-component

Slide 44

Slide 44 text

w όʔδϣϯʹΑͬͯݺͼํ͕ҧ͏ɻ  WY"OHVMBS+4  WYd"OHVMBS  WYd"OHVMBS    ˞8FC্Ͱ৘ใΛ୳͢ͱ͖͸஫ҙɻ

Slide 45

Slide 45 text

w ඞཁͳػೳ͸શͯ༻ҙ͞Ε͍ͯΔ  ༨ܭͳ͜ͱΛߟ͑ͳ͍͍ͯ͘ɻ  w 8FCඪ४ΛҙࣝͰ͖ΔͷͰɺ࠷৽ٕज़Λ࠾༻Ͱ͖Δɻ  ޙʑͷҠߦ͕؆୯  w ϓϩδΣΫτ͝ͱͷϧʔϧԽ͕༰қɻ w ଎͘։ൃΛճͤΔ "OHVMBSͷϝϦοτ

Slide 46

Slide 46 text

w ֶशίετ͕͔͔Δ  ɾ"OHVMBSͷ"1*  ɾ5ZQF4DSJQU  ɾ3Y+4  ɾ4ZTUFNKT  ɾ;POFKT "OHVMBSͷσϝϦοτ

Slide 47

Slide 47 text

w ࠓ݄தʹWʹϝδϟʔΞοϓσʔτɻ w ͱ͖ͬͭͮΒ͍͚Ͳɺݸਓతʹ͸Ұ൪ָ͍͠ϑϨʔ ϜϫʔΫɻ

Slide 48

Slide 48 text

Vue.js

Slide 49

Slide 49 text

w 7VFKT͸.77.ͱ͍͏.7$ͷ೿ੜछΛઃܭج൫ͱ ͯ͠ߏங͞Εͨɺ+BWB4DSJQUϑϨʔϜϫʔΫɻ  w 7VF Ϗϡʔ ͱൃԻɻ  w தࠃͰਓؾɻ೔ຊࠃ಺Ͱ΋ѻ͍΍͍͢ͱਓؾ͕ߴ ·͍ͬͯΔɻ

Slide 50

Slide 50 text

w ίϯϙʔωϯτࢦ޲

export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } }

Slide 51

Slide 51 text

w 7JSUVBM%0.

Slide 52

Slide 52 text

w 7JFXͷϥΠϒϥϦςϯϓϨʔτΤϯδϯͷ૊Έ߹ Θͤ͸ɺ3FBDUͱ"OHVMBSͷதؒɻ  ͍͍ͱ͜औΓɻ hello

{{ item.message }}

Slide 53

Slide 53 text

w TDSJQUλάͰ௚઀ಡΈࠐΊΔ

Slide 54

Slide 54 text

w TDSJQUλάͰ௚઀ಡΈࠐΊΔ

var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } });

Slide 55

Slide 55 text

w ୯ҰϑΝΠϧίϯϙʔωϯτ

…

export default { name: 'app' } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; }

Slide 56

Slide 56 text

w WVFDMJʢίϚϯυϥΠϯπʔϧʣͰ  ͻͳܗੜ੒ɻ $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev

Slide 57

Slide 57 text

w 3FEVYϥΠΫͳʮ7VFYʯͱ͍͏ঢ়ଶ؅ཧϥΠϒϥ ϦΛ࢖͏ͷ͕Ұൠత

Slide 58

Slide 58 text

w 8FFYͰωΠςΟϒΞϓϦ։ൃ΋  ·࣮ͩ༻తͰ͸ͳ͍ײ͡

Slide 59

Slide 59 text

w 443͸/VYUKT  ʢϢχόʔαϧΞϓϦέʔγϣϯ༻ϑϨʔϜϫʔΫʣ

Slide 60

Slide 60 text

w γϯϓϧͰ͋Δ  w খ͍͞ΞϓϦέʔγϣϯͷ։ൃʹ͸Ұ൪ద͍ͯ͠Δ  TDSJQUλάͰಡΈࠐΊ͹࠷௿ݶ࢖͑Δ  w ެࣜͷ೔ຊޠυΩϡϝϯτ͕ͱͯ΋Θ͔Γ΍͍͢  41"࣮૷ॳ৺ऀ޲͖ɻ 7VFKTͷϝϦοτ

Slide 61

Slide 61 text

w ࡢ೥ͷϦϦʔε͔Β͕࣌ؒܦͬͯͳ͍ͷͰɺଞͷϑ ϨʔϜϫʔΫΑΓ΋Ϧιʔε͕·ͩະख़ɻ  ϥΠϒϥϦɾΤσΟλͷαϙʔτ͕ෆ଍ 7VFKTͷσϝϦοτ

Slide 62

Slide 62 text

w γϯϓϧͰѻ͍΍͍͢ͷͰɺ͜Ε͔Β3FBDUΑΓ΋ 7VF͕ਓؾɾधཁ͕ߴ·Δ༧૝ɻ

Slide 63

Slide 63 text

݁ہͲΕ͕͍͍ʁ

Slide 64

Slide 64 text

w ࣮૷ίετΛ཈͍͑ͨ࣌ʹɻ  w %0.Λॻ͖׵͑Δ͜ͱ͕ଟ͍ΞϓϦέʔγϣϯʹ w ಉ͡ػೳͷωΠςΟϒΞϓϦΛ࡞੒͢Δ৔߹ɻ ʢ3FBDU/BUJWFͰΞϓϦ։ൃʣ 3FBDUͷબͼͲ͜Ζ

Slide 65

Slide 65 text

w ػೳΛͻͱ௨Γ֮͑ͯ͠·͑͹ɺ଎͘ݎ࿚ͳΞϓϦ έʔγϣϯߏங͕Ͱ͖Δɻ w େن໛։ൃʹڧ͍ɻ w ؅ཧը໘ͳͲͷσʔλද͕ࣔଟ͍Α͏ͳΞϓϦέʔ γϣϯͱ૬ੑ͕ྑ͍ɻ w ֶशίετ͕ߴ͍ͷͰɺϓϩδΣΫτϝϯόʔͷε Ωϧʹґଘɻ "OHVMBSͷબͼͲ͜Ζ

Slide 66

Slide 66 text

w ϓϩδΣΫτϝϯόʔͷ41"࣮૷ܦݧ͕গͳ ͍৔߹ʹɻ  w খʙେن໛ͷ޿ൣғͷ։ൃͰ࢖͑Δɻ  w 8FCαΠτͷ੍࡞Ͱ΋ޮՌΛൃشɻ  K2VFSZͷ୅ΘΓ 7VFKTͷબͼͲ͜Ζ

Slide 67

Slide 67 text

w ͓͢͢Ίͷൺֱํ๏͸ɺ؆୯ͳΞϓϦέʔγϣϯΛ ֤ϑϨʔϜϫʔΫͰ࡞ͬͯΈΔɻ w 50%0ΞϓϦɺΘ͔Γ΍͍͢ಈ࡞ͷ΋ͷɺ  ෳ਺ը໘ͷϧʔςΟϯάઃఆ w ετʔϦʔϒοΫ  ʢIUUQTTUPSZCPPLKTPSHʣͰࢼͯ͠ΈΔɻ  6*ίϯϙʔωϯτͷ։ൃ؀ڥɻ ϕετϓϥΫςΟε

Slide 68

Slide 68 text

ϓϩδΣΫτͷେ͖͞͸ʁ ͲΕ΄ͲͷظؒͰϝϯςφϯεͰ͖Δ͔ʁ ͢΂ͯͷػೳΛ͸͡ΊʹఆٛͰ͖Δ͔ɺͦΕͱ΋ॊೈੑΛ࣋ͨͤΔ Α͏ཁٻ͞Ε͍ͯΔ͔ ͢΂ͯͷػೳ͕ఆٛ͞Ε͍ͯΔͳΒɺͲΜͳػೳɾೳྗ͕ඞཁ͔ʁ υϝΠϯϞσϧ΍ϏδωεϩδοΫ͸ෳࡶ͔ʁ 8FC͔ϞόΠϧ͔σεΫτοϓ͔ɺͲͷΑ͏ͳϓϥοτϑΥʔϜ͕ λʔήοτ͔ʁ αʔόʔαΠυϨϯμϦϯά͕ඞཁ͔ʁ4&0͸ॏཁ͔ʁ ϦΞϧλΠϜΠϕϯτΛଟ͘ѻ͏͔ʁ ϓϩδΣΫτνʔϜͷਓ਺͸ʁ νʔϜͷ։ൃऀͨͪͷܦݧ஋͸ʁͲͷΑ͏ͳܦྺͳͷ͔ʁ ͦͷ··͙͢ʹ࢖͑ΔίϯϙʔωϯτϥΠϒϥϦʔ͸ͳ͍͔ʁ ൑அج४Λ΋͓ͬͯ͘

Slide 69

Slide 69 text

·ͱΊ

Slide 70

Slide 70 text

w ओཁϑϨʔϜϫʔΫͭ  ɾ3FBDU  ɹॊೈɺϦιʔε͕๛෋ɺωΠςΟϒΞϓϦԽ  ɾ"OHVMBS  ɹ༨ܭͳ͜ͱΛߟ͑ͳ͍͍ͯ͘ɺେن໛։ൃʹڧ͍  ɾ7VFKT  ɹγϯϓϧͰѻ͍΍͍͢ɺͲͷن໛Ͱ΋ରԠͰ͖Δ ·ͱΊ

Slide 71

Slide 71 text

w ͦΕͧΕҰ௕Ұ୹ɻͲΕ͕ྑ͍ͱ͸Ұ֓ʹ͸ݴ͑ͳ͍ w ൑அج४Λ౿·͑ͨબ୒Λ ·ͱΊ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

{this.props.message}

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

{{title}}

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text