Share
Embed
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: `
{{title}}
` }) 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'
}
}
}
{{ msg }}
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!'
}
});
{{ message }}
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 அج४Λ౿·͑ͨબΛ
·ͱΊ