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

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ϑϨʔϜϫʔΫͷ঺հ

13. None

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

15. w ίϯϙʔωϯτࢦ޲

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

17. None
18. None

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 ൑அج४Λ౿·͑ͨબ୒Λ ·ͱΊ