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

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

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

2e2bdab232daaf7ae69abbce41e5a969?s=128

Yohei Isokawa

October 15, 2017
Tweet

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. γϯάϧϖʔδΞϓϦέʔγϣϯ ʢ4JOHMF1BHF"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 8FCBOJNBUJPOT w

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