SPA実装最前線 ~今どきのJSフレームワーク選び~

2017/10/14 上越TechMeetup #1 の資料です。

Transcript

1. 41"࣮૷࠷લઢ 101$03/
   ޒे઒ɹ༸ฏ
   ʢ͍͔ͦΘɹΑ͏΁͍ʣ d
   ࠓͲ͖ͷ+4ϑϨʔϜϫʔΫબͼ
   d
2. ࣗݾ঺հ w ޒे઒
   ༸ฏʢΠιοϓʣ
 
   ্ӽࢢࡏॅͷϑϦʔϥϯεΤϯδχΞ
 
   ࢳڕ઒ࢢग़਎
   w झຯɿυϩʔϯɺϤʔϤʔɺόε௼Γ
   w 5XJUUFSɿ!:VIJJTL
   w IUUQCMPHZVIJJTLDPN
3. ΞδΣϯμ w γϯάϧϖʔδΞϓϦέʔγϣϯͷ͓͞Β͍
   w ओཁϑϨʔϜϫʔΫ
   w 
   3FBDU
   w 
   "OHVMBS
   w 
   7VFKT
   w ͦΕͧΕͷબͼͲ͜Ζ
4. γϯάϧϖʔδΞϓϦέʔγϣϯ
   ʢ4JOHMF
   1BHF
   "QQMJDBUJPOʣ
5. IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
6. w 8FCϖʔδΛ෦෼తʹߋ৽
   w දࣔύϑΥʔϚϯεʹ༏Ε͍ͯΔ
 w Ϣʔβʔମݧʢ69ʣ͕޲্ɻ
7. 'BDFCPPL
8. (PPHMF
   .BQ
9. ैདྷͷϖʔδભҠͷ8FCΞϓϦέʔγϣϯ
   ͱൺ΂ͯɺେ෯ʹ࣮૷ίετ͕͔͔Δɻ
10. ࣮૷ίετΛԼ͛ΔͨΊɺ
    ͜͜ʙ̏೥ͰҰؾʹීٴͨ͠ͷ͕ɺ
    41"࣮૷ʹಛԽͨ͠
    +BWB4DSJQUϑϨʔϜϫʔΫɻ
11. ͦΕͧΕಛ௃΍ػೳ͕ଟ͍ͷͰɺͻͱͭͣͭ ࢼ͍ͯ͘͠ͷ͸͕࣌ؒඞཁɻ
12. ओཁ+BWB4DSJQUϑϨʔϜϫʔΫͷ঺հ
14. w 'BDFCPPLࣾ੡ͷ6*ߏங༻ͷϥΠϒϥϦɻ
 w ࠓݱࡏੈքͰҰ൪࢖ΘΕ͍ͯΔͱݴͬͯ΋ա ݴͰ͸ͳ͍΄Ͳਓؾɻ
 w ϑϨʔϜϫʔΫͰ͸ͳ͘ɺ͋͘·Ͱ΋7JFXΛ ୲౰͢ΔϥΠϒϥϦɻ
    
15. w ίϯϙʔωϯτࢦ޲
16. ίϯϙʔωϯτɹʹɹঢ়ଶɾػೳΛ࣋ͬͨ෦඼ ίϯϙʔωϯτΛ૊Έ߹Θͤͯ
    ϖʔδΛߏங͢Δ
19. -> <Hello message="Hello world!" /> import React from 'react'; class Hello extends React.Component { render() { return ( <div className="hello"> <h1>{this.props.message}</h1> </div> ); } }
20. w +49
    w 9.-Λ֦ுͨ͠+BWB4DSJQUͷதʹ)5.-ίʔ υΛຒΊࠐΉͨΊͷ࢓૊Έ
21. render() { return ( <div className="button"> <button onClick={function() { alert('click'); }}> {this.props.text} </button> </div> ); }
22. w 7JSUVBM
    %0.
    w 3FBDUͷόοΫΤϯυʹ͋Δ%0.ߏ଄Λந৅ Խͨ͠σʔλߏ଄ IUUQTDBMFOEBSQFSGQMBOFUDPNEJ⒎
23. w σʔλϞσϧͷߏ଄มԽʹ߹Θͤͯ7JSUVBM
    %0.ͷલޙͷࠩ෼Λࢉग़
    w %0.ͷ࠶ඳըΛࠩ෼ͷ͋ͬͨՕॴ͚ͩߦ͏ IUUQTDBMFOEBSQFSGQMBOFUDPNEJ⒎
24. w σʔλϑϩʔΞʔΩςΫνϟͱͯ͠ʮ'MVYʯΛਪ঑ɻ w 'MVY͸ʮσʔλͷྲྀΕΛҰํ޲ʹݶఆ͢Δઃܭύ λʔϯʯ
25. σʔλͷྲྀΕ͕ํ޲ʹͳΔ͜ͱͰɺγϯϓϧʹɻ
26. w 'MVYΛ࣮ݱ͢ΔͨΊʹɺ3FEVYͱ͍͏ঢ়ଶ؅ཧϥ ΠϒϥϦΛ࢖༻͢Δͷ͕ϙϐϡϥʔɻ
27. w ࠷ۙ͸.PC9΋ਓؾɻ'MVYͱ͸ҟͳΔϦΞΫςΟϒ ͳσʔλϑϩʔΛఏڙɻ
 γϯϓϧͳ൓໘ɺઃܭྗ͕ඞཁɻ
28. w 3FBDUͷίʔυΛͦͷ··ΞϓϦʹ͢Δ 3FBDU
    /BUJWFɻ
    w ͱʹ͔͘ਓؾͳͷͰ8FC্Ͱͷ৘ใ͕ଟ͍
    w ؔ࿈ϥΠϒϥϦ΋๛෋ 3FBDUͷϝϦοτ
29. w ඞཁͳ΋ͷΛࣗ෼Ͱ૊Έ߹ΘͤΔඞཁ͕͋Δ ʢϧʔςΟϯά΍"KBYɺσʔλ؅ཧͷϥΠϒ ϥϦͳͲʣ

    ˠ
    SFBDUCPJMFSQMBUFɺDSFBUFSFBDUBQQ
 ɹ
    
    /FYUKT
    w σβΠφʔ͞Μͱڠۀ͢Δ৔߹ʹɺ+49͕ड ͚ೖΕΒΕͳ͍৔߹͕͋Δ 3FBDUͷσϝϦοτ
30. w ݱࡏͷόʔδϣϯͰ಺෦࣮૷͕ॻ͖׵͑ΒΕͨɻ
 ͜Ε͔Βঃʑʹߴ଎Խ͞Ε͍ͯ͘ɻ
31. Angular
32. w "OHVMBS͸ϑϧελοΫͷ+BWB4DSJQUϑϨʔ ϜϫʔΫɻඞཁͳ΋ͷ͸શͯೖͬͯΔɻ
33. w ίϯϙʔωϯτࢦ޲ @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> ` }) export class AppComponent { title = 'Hello world!'; } <my-app></my-app>
34. w 7JSUVBM
    %0.
35. w 8FCඪ४Λҙ͍ࣝͯ͠Δɻ
    w 
    &DNB4DSJQU
    w 
    &4
    .PEVMFT
    w 
    8FC
    BOJNBUJPOT
    w 
    8FC
    DPNQPOFOUT
    w FUD
36. w "OHVMBSͰ͸5ZQF4DSJQUʢ"MU+4ʣΛ࠾༻ɻ ੩తܕ෇͚Λ෇༩ɻ
37. 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 ); } }
38. +BWBͬΆ͍ɻ
39. w ಠࣗͷ)5.-ςϯϓϨʔτγεςϜ <h2>{{hero.name}} details!</h2> <div><img [src]="imagePath" /></div> <div><label (click)=“selectHero()">id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div>
40. ςϯϓϨʔτߏจɺΩϞ͍
41. w %FQFOEFODZ
    *OKFDUJPO
    ґଘੑͷ஫ೖ
42. ڞ௨ॲཧΛఆٛͯ͠ɺ
    ίϯϙʔωϯτʹ஫ೖ͢Δ͜ͱͰ࠶ར༻Մೳʹ͢Δ IUUQCSBOEPODMBQQDPNXIBUJTEFQFOEFODZJOKFDUJPOBOEXIZJTJUVTFGVM
43. w BOHVMBSDMJʢίϚϯυϥΠϯπʔϧʣ
 $-*ͰίʔυΛੜ੒Ͱ͖Δɻ

    
    ϕετϓϥΫςΟεɻ ng new PROJECT-NAME cd PROJECT-NAME ng serve ng generate component my-new-component
44. w όʔδϣϯʹΑͬͯݺͼํ͕ҧ͏ɻ
 WY
    
    "OHVMBS+4
 WYd
    
    "OHVMBS
 WYd
    
    "OHVMBS
 
 ˞8FC্Ͱ৘ใΛ୳͢ͱ͖͸஫ҙɻ
45. w ඞཁͳػೳ͸શͯ༻ҙ͞Ε͍ͯΔ

    
    ༨ܭͳ͜ͱΛߟ͑ͳ͍͍ͯ͘ɻ
 w 8FCඪ४ΛҙࣝͰ͖ΔͷͰɺ࠷৽ٕज़Λ࠾༻Ͱ͖Δɻ

    
    ޙʑͷҠߦ͕؆୯
 w ϓϩδΣΫτ͝ͱͷϧʔϧԽ͕༰қɻ
    w ଎͘։ൃΛճͤΔ "OHVMBSͷϝϦοτ
46. w ֶशίετ͕͔͔Δ
 ɾ"OHVMBSͷ"1*
 ɾ5ZQF4DSJQU
 ɾ3Y+4
 ɾ4ZTUFNKT
 ɾ;POFKT "OHVMBSͷσϝϦοτ
47. w ࠓ݄தʹWʹϝδϟʔΞοϓσʔτɻ
    w ͱ͖ͬͭͮΒ͍͚Ͳɺݸਓతʹ͸Ұ൪ָ͍͠ϑϨʔ ϜϫʔΫɻ
48. Vue.js
49. w 7VFKT͸.77.ͱ͍͏.7$ͷ೿ੜछΛઃܭج൫ͱ ͯ͠ߏங͞Εͨɺ+BWB4DSJQUϑϨʔϜϫʔΫɻ
 w 7VF Ϗϡʔ ͱൃԻɻ
 w தࠃͰਓؾɻ೔ຊࠃ಺Ͱ΋ѻ͍΍͍͢ͱਓؾ͕ߴ ·͍ͬͯΔɻ
50. w ίϯϙʔωϯτࢦ޲ <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <hello></hello>
51. w 7JSUVBM
    %0.
52. w 7JFXͷϥΠϒϥϦ ςϯϓϨʔτΤϯδϯͷ૊Έ߹ Θͤ͸ɺ3FBDUͱ"OHVMBSͷதؒɻ
 ͍͍ͱ͜औΓɻ <span v-bind:title="message">hello</span> <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
53. w TDSJQUλάͰ௚઀ಡΈࠐΊΔ <script src="https://unpkg.com/vue"></script>
54. w TDSJQUλάͰ௚઀ಡΈࠐΊΔ <div id="app"> <p>{{ message }}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
55. w ୯ҰϑΝΠϧίϯϙʔωϯτ <template> <div id=“app”>…</div> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; } </style>
56. w WVFDMJʢίϚϯυϥΠϯπʔϧʣͰ
 ͻͳܗੜ੒ɻ $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev
57. w 3FEVYϥΠΫͳ
    ʮ7VFYʯͱ͍͏ঢ়ଶ؅ཧϥΠϒϥ ϦΛ࢖͏ͷ͕Ұൠత
58. w 8FFYͰωΠςΟϒΞϓϦ։ൃ΋

    
    ·࣮ͩ༻తͰ͸ͳ͍ײ͡
59. w 443͸/VYUKT
 ʢϢχόʔαϧΞϓϦέʔγϣϯ༻ϑϨʔϜϫʔΫʣ
60. w γϯϓϧͰ͋Δ
 w খ͍͞ΞϓϦέʔγϣϯͷ։ൃʹ͸Ұ൪ద͍ͯ͠Δ

    
    TDSJQUλάͰಡΈࠐΊ͹࠷௿ݶ࢖͑Δ
 w ެࣜͷ೔ຊޠυΩϡϝϯτ͕ͱͯ΋Θ͔Γ΍͍͢

    
    41"࣮૷ॳ৺ऀ޲͖ɻ 7VFKTͷϝϦοτ
61. w ࡢ೥ͷϦϦʔε͔Β͕࣌ؒܦͬͯͳ͍ͷͰɺଞͷϑ ϨʔϜϫʔΫΑΓ΋Ϧιʔε͕·ͩະख़ɻ

    
    ϥΠϒϥϦɾΤσΟλͷαϙʔτ͕ෆ଍ 7VFKTͷσϝϦοτ
62. w γϯϓϧͰѻ͍΍͍͢ͷͰɺ͜Ε͔Β3FBDUΑΓ΋ 7VF͕ਓؾɾधཁ͕ߴ·Δ༧૝ɻ
63. ݁ہͲΕ͕͍͍ʁ
64. w ࣮૷ίετΛ཈͍͑ͨ࣌ʹɻ
 w %0.Λॻ͖׵͑Δ͜ͱ͕ଟ͍ΞϓϦέʔγϣϯʹ
    w ಉ͡ػೳͷωΠςΟϒΞϓϦΛ࡞੒͢Δ৔߹ɻ ʢ3FBDU
    /BUJWFͰΞϓϦ։ൃʣ 3FBDUͷબͼͲ͜Ζ
65. w ػೳΛͻͱ௨Γ֮͑ͯ͠·͑͹ɺ଎͘ݎ࿚ͳΞϓϦ έʔγϣϯߏங͕Ͱ͖Δɻ
    w େن໛։ൃʹڧ͍ɻ
    w ؅ཧը໘ͳͲͷσʔλද͕ࣔଟ͍Α͏ͳΞϓϦέʔ γϣϯͱ૬ੑ͕ྑ͍ɻ
    w ֶशίετ͕ߴ͍ͷͰɺϓϩδΣΫτϝϯόʔͷε Ωϧʹґଘɻ "OHVMBSͷબͼͲ͜Ζ
66. w ϓϩδΣΫτϝϯόʔͷ41"࣮૷ܦݧ͕গͳ ͍৔߹ʹɻ
 w খʙେن໛ͷ޿ൣғͷ։ൃͰ࢖͑Δɻ
 w 8FCαΠτͷ੍࡞Ͱ΋ޮՌΛൃشɻ
 K2VFSZͷ୅ΘΓ 7VFKTͷબͼͲ͜Ζ
67. w ͓͢͢Ίͷൺֱํ๏͸ɺ؆୯ͳΞϓϦέʔγϣϯΛ ֤ϑϨʔϜϫʔΫͰ࡞ͬͯΈΔɻ
    w 50%0ΞϓϦɺΘ͔Γ΍͍͢ಈ࡞ͷ΋ͷɺ
 ෳ਺ը໘ͷϧʔςΟϯάઃఆ
    w ετʔϦʔϒοΫ
 ʢIUUQTTUPSZCPPLKTPSHʣͰࢼͯ͠ΈΔɻ
 
    6*ίϯϙʔωϯτͷ։ൃ؀ڥɻ ϕετϓϥΫςΟε
68.  ϓϩδΣΫτͷେ͖͞͸ʁ
     ͲΕ΄ͲͷظؒͰϝϯςφϯεͰ͖Δ͔ʁ
     ͢΂ͯͷػೳΛ͸͡ΊʹఆٛͰ͖Δ͔ɺͦΕͱ΋ॊೈੑΛ࣋ͨͤΔ Α͏ཁٻ͞Ε͍ͯΔ͔
     ͢΂ͯͷػೳ͕ఆٛ͞Ε͍ͯΔͳΒɺͲΜͳػೳɾೳྗ͕ඞཁ͔ʁ
     υϝΠϯϞσϧ΍ϏδωεϩδοΫ͸ෳࡶ͔ʁ
     8FC͔ϞόΠϧ͔σεΫτοϓ͔ɺͲͷΑ͏ͳϓϥοτϑΥʔϜ͕ λʔήοτ͔ʁ
     αʔόʔαΠυϨϯμϦϯά͕ඞཁ͔ʁ
    4&0͸ॏཁ͔ʁ
     ϦΞϧλΠϜΠϕϯτΛଟ͘ѻ͏͔ʁ
     ϓϩδΣΫτνʔϜͷਓ਺͸ʁ
     νʔϜͷ։ൃऀͨͪͷܦݧ஋͸ʁ
    ͲͷΑ͏ͳܦྺͳͷ͔ʁ
     ͦͷ··͙͢ʹ࢖͑ΔίϯϙʔωϯτϥΠϒϥϦʔ͸ͳ͍͔ʁ ൑அج४Λ΋͓ͬͯ͘
69. ·ͱΊ
70. w ओཁϑϨʔϜϫʔΫͭ
 ɾ3FBDU
 ɹ
    
    ॊೈɺϦιʔε͕๛෋ɺωΠςΟϒΞϓϦԽ
 ɾ"OHVMBS
 ɹ
    
    ༨ܭͳ͜ͱΛߟ͑ͳ͍͍ͯ͘ɺେن໛։ൃʹڧ͍
 ɾ7VFKT
 ɹ
    
    γϯϓϧͰѻ͍΍͍͢ɺͲͷن໛Ͱ΋ରԠͰ͖Δ ·ͱΊ
71. w ͦΕͧΕҰ௕Ұ୹ɻͲΕ͕ྑ͍ͱ͸Ұ֓ʹ͸ݴ͑ͳ͍
    w ൑அج४Λ౿·͑ͨબ୒Λ ·ͱΊ