Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPA実装最前線 ~今どきのJSフレームワーク選び~
Search
Yohei Isokawa
October 15, 2017
Programming
2
4.8k
SPA実装最前線 ~今どきのJSフレームワーク選び~
2017/10/14 上越TechMeetup #1 の資料です。
Yohei Isokawa
October 15, 2017
Tweet
Share
More Decks by Yohei Isokawa
See All by Yohei Isokawa
今どきのWebアニメーション実装
yuhiisk
0
790
writer.appを支える技術
yuhiisk
0
880
これからはじめるシングルページアプリケーション
yuhiisk
0
680
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
390
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
エラーって何種類あるの?
kajitack
5
320
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
140
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
エンジニア向け採用ピッチ資料
inusan
0
170
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
GoのGenericsによるslice操作との付き合い方
syumai
3
690
XP, Testing and ninja testing
m_seki
3
210
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
210
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
440
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
694
190k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building an army of robots
kneath
306
45k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Designing for Performance
lara
609
69k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Designing for humans not robots
tammielis
253
25k
BBQ
matthewcrist
89
9.7k
Transcript
41"࣮࠷લઢ 101$03/ ޒेɹ༸ฏ ʢ͍͔ͦΘɹΑ͏͍ʣ dࠓͲ͖ͷ+4ϑϨʔϜϫʔΫબͼd
ࣗݾհ w ޒे༸ฏʢΠιοϓʣ ্ӽࢢࡏॅͷϑϦʔϥϯεΤϯδχΞ ࢳڕࢢग़ w झຯɿυϩʔϯɺϤʔϤʔɺόεΓ w 5XJUUFSɿ!:VIJJTL w
IUUQCMPHZVIJJTLDPN
ΞδΣϯμ w γϯάϧϖʔδΞϓϦέʔγϣϯͷ͓͞Β͍ w ओཁϑϨʔϜϫʔΫ w 3FBDU w "OHVMBS w
7VFKT w ͦΕͧΕͷબͼͲ͜Ζ
γϯάϧϖʔδΞϓϦέʔγϣϯ ʢ4JOHMF1BHF"QQMJDBUJPOʣ
IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
w 8FCϖʔδΛ෦తʹߋ৽ w දࣔύϑΥʔϚϯεʹ༏Ε͍ͯΔ w Ϣʔβʔମݧʢ69ʣ্͕ɻ
'BDFCPPL
(PPHMF.BQ
ैདྷͷϖʔδભҠͷ8FCΞϓϦέʔγϣϯ ͱൺͯɺେ෯ʹ࣮ίετ͕͔͔Δɻ
࣮ίετΛԼ͛ΔͨΊɺ ͜͜ʙ̏ͰҰؾʹීٴͨ͠ͷ͕ɺ 41"࣮ʹಛԽͨ͠ +BWB4DSJQUϑϨʔϜϫʔΫɻ
ͦΕͧΕಛػೳ͕ଟ͍ͷͰɺͻͱͭͣͭ ࢼ͍ͯ͘͠ͷ͕࣌ؒඞཁɻ
ओཁ+BWB4DSJQUϑϨʔϜϫʔΫͷհ
None
w 'BDFCPPLࣾͷ6*ߏங༻ͷϥΠϒϥϦɻ w ࠓݱࡏੈքͰҰ൪ΘΕ͍ͯΔͱݴͬͯա ݴͰͳ͍΄Ͳਓؾɻ w ϑϨʔϜϫʔΫͰͳ͘ɺ͋͘·Ͱ7JFXΛ ୲͢ΔϥΠϒϥϦɻ
w ίϯϙʔωϯτࢦ
ίϯϙʔωϯτɹʹɹঢ়ଶɾػೳΛ࣋ͬͨ෦ ίϯϙʔωϯτΛΈ߹Θͤͯ ϖʔδΛߏங͢Δ
None
None
-> <Hello message="Hello world!" /> import React from 'react'; class
Hello extends React.Component { render() { return ( <div className="hello"> <h1>{this.props.message}</h1> </div> ); } }
w +49 w 9.-Λ֦ுͨ͠+BWB4DSJQUͷதʹ)5.-ίʔ υΛຒΊࠐΉͨΊͷΈ
render() { return ( <div className="button"> <button onClick={function() { alert('click');
}}> {this.props.text} </button> </div> ); }
w 7JSUVBM%0. w 3FBDUͷόοΫΤϯυʹ͋Δ%0.ߏΛந Խͨ͠σʔλߏ IUUQTDBMFOEBSQFSGQMBOFUDPNEJ⒎
w σʔλϞσϧͷߏมԽʹ߹Θͤͯ7JSUVBM %0.ͷલޙͷࠩΛࢉग़ w %0.ͷ࠶ඳըΛࠩͷ͋ͬͨՕॴ͚ͩߦ͏ IUUQTDBMFOEBSQFSGQMBOFUDPNEJ⒎
w σʔλϑϩʔΞʔΩςΫνϟͱͯ͠ʮ'MVYʯΛਪɻ w 'MVYʮσʔλͷྲྀΕΛҰํʹݶఆ͢Δઃܭύ λʔϯʯ
σʔλͷྲྀΕ͕ํʹͳΔ͜ͱͰɺγϯϓϧʹɻ
w 'MVYΛ࣮ݱ͢ΔͨΊʹɺ3FEVYͱ͍͏ঢ়ଶཧϥ ΠϒϥϦΛ༻͢Δͷ͕ϙϐϡϥʔɻ
w ࠷ۙ.PC9ਓؾɻ'MVYͱҟͳΔϦΞΫςΟϒ ͳσʔλϑϩʔΛఏڙɻ γϯϓϧͳ໘ɺઃܭྗ͕ඞཁɻ
w 3FBDUͷίʔυΛͦͷ··ΞϓϦʹ͢Δ 3FBDU/BUJWFɻ w ͱʹ͔͘ਓؾͳͷͰ8FC্Ͱͷใ͕ଟ͍ w ؔ࿈ϥΠϒϥϦ๛ 3FBDUͷϝϦοτ
w ඞཁͳͷΛࣗͰΈ߹ΘͤΔඞཁ͕͋Δ ʢϧʔςΟϯά"KBYɺσʔλཧͷϥΠϒ ϥϦͳͲʣ ˠSFBDUCPJMFSQMBUFɺDSFBUFSFBDUBQQ ɹ/FYUKT w σβΠφʔ͞Μͱڠۀ͢Δ߹ʹɺ+49͕ड ͚ೖΕΒΕͳ͍߹͕͋Δ 3FBDUͷσϝϦοτ
w ݱࡏͷόʔδϣϯͰ෦࣮͕ॻ͖͑ΒΕͨɻ ͜Ε͔ΒঃʑʹߴԽ͞Ε͍ͯ͘ɻ
Angular
w "OHVMBSϑϧελοΫͷ+BWB4DSJQUϑϨʔ ϜϫʔΫɻඞཁͳͷશͯೖͬͯΔɻ
w ίϯϙʔωϯτࢦ @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> ` })
export class AppComponent { title = 'Hello world!'; } <my-app></my-app>
w 7JSUVBM%0.
w 8FCඪ४Λҙ͍ࣝͯ͠Δɻ w &DNB4DSJQU w &4.PEVMFT w 8FCBOJNBUJPOT w
8FCDPNQPOFOUT w FUD
w "OHVMBSͰ5ZQF4DSJQUʢ"MU+4ʣΛ࠾༻ɻ ੩తܕ͚Λ༩ɻ
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 ); } }
+BWBͬΆ͍ɻ
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>
ςϯϓϨʔτߏจɺΩϞ͍
w %FQFOEFODZ*OKFDUJPO ґଘੑͷೖ
ڞ௨ॲཧΛఆٛͯ͠ɺ ίϯϙʔωϯτʹೖ͢Δ͜ͱͰ࠶ར༻Մೳʹ͢Δ IUUQCSBOEPODMBQQDPNXIBUJTEFQFOEFODZJOKFDUJPOBOEXIZJTJUVTFGVM
w BOHVMBSDMJʢίϚϯυϥΠϯπʔϧʣ $-*ͰίʔυΛੜͰ͖Δɻ ϕετϓϥΫςΟεɻ ng new PROJECT-NAME cd PROJECT-NAME ng
serve ng generate component my-new-component
w όʔδϣϯʹΑͬͯݺͼํ͕ҧ͏ɻ WY"OHVMBS+4 WYd"OHVMBS WYd"OHVMBS ˞8FC্ͰใΛ୳͢ͱ͖ҙɻ
w ඞཁͳػೳશͯ༻ҙ͞Ε͍ͯΔ ༨ܭͳ͜ͱΛߟ͑ͳ͍͍ͯ͘ɻ w 8FCඪ४ΛҙࣝͰ͖ΔͷͰɺ࠷৽ٕज़Λ࠾༻Ͱ͖Δɻ ޙʑͷҠߦ͕؆୯ w ϓϩδΣΫτ͝ͱͷϧʔϧԽ͕༰қɻ w ͘։ൃΛճͤΔ
"OHVMBSͷϝϦοτ
w ֶशίετ͕͔͔Δ ɾ"OHVMBSͷ"1* ɾ5ZQF4DSJQU ɾ3Y+4 ɾ4ZTUFNKT ɾ;POFKT "OHVMBSͷσϝϦοτ
w ࠓ݄தʹWʹϝδϟʔΞοϓσʔτɻ w ͱ͖ͬͭͮΒ͍͚ͲɺݸਓతʹҰ൪ָ͍͠ϑϨʔ ϜϫʔΫɻ
Vue.js
w 7VFKT.77.ͱ͍͏.7$ͷੜछΛઃܭج൫ͱ ͯ͠ߏங͞Εͨɺ+BWB4DSJQUϑϨʔϜϫʔΫɻ w 7VF Ϗϡʔ ͱൃԻɻ w தࠃͰਓؾɻຊࠃͰѻ͍͍͢ͱਓؾ͕ߴ ·͍ͬͯΔɻ
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>
w 7JSUVBM%0.
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>
w TDSJQUλάͰಡΈࠐΊΔ <script src="https://unpkg.com/vue"></script>
w TDSJQUλάͰಡΈࠐΊΔ <div id="app"> <p>{{ message }}</p> </div> <script> var
app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
w ୯ҰϑΝΠϧίϯϙʔωϯτ <template> <div id=“app”>…</div> </template> <script> export default {
name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; } </style>
w WVFDMJʢίϚϯυϥΠϯπʔϧʣͰ ͻͳܗੜɻ $ vue init webpack my-project $ cd
my-project $ npm install $ npm run dev
w 3FEVYϥΠΫͳʮ7VFYʯͱ͍͏ঢ়ଶཧϥΠϒϥ ϦΛ͏ͷ͕Ұൠత
w 8FFYͰωΠςΟϒΞϓϦ։ൃ ·࣮ͩ༻తͰͳ͍ײ͡
w 443/VYUKT ʢϢχόʔαϧΞϓϦέʔγϣϯ༻ϑϨʔϜϫʔΫʣ
w γϯϓϧͰ͋Δ w খ͍͞ΞϓϦέʔγϣϯͷ։ൃʹҰ൪ద͍ͯ͠Δ TDSJQUλάͰಡΈࠐΊ࠷ݶ͑Δ w ެࣜͷຊޠυΩϡϝϯτ͕ͱͯΘ͔Γ͍͢ 41"࣮ॳ৺ऀ͖ɻ 7VFKTͷϝϦοτ
w ࡢͷϦϦʔε͔Β͕࣌ؒܦͬͯͳ͍ͷͰɺଞͷϑ ϨʔϜϫʔΫΑΓϦιʔε͕·ͩະख़ɻ ϥΠϒϥϦɾΤσΟλͷαϙʔτ͕ෆ 7VFKTͷσϝϦοτ
w γϯϓϧͰѻ͍͍͢ͷͰɺ͜Ε͔Β3FBDUΑΓ 7VF͕ਓؾɾधཁ͕ߴ·Δ༧ɻ
݁ہͲΕ͕͍͍ʁ
w ࣮ίετΛ͍͑ͨ࣌ʹɻ w %0.Λॻ͖͑Δ͜ͱ͕ଟ͍ΞϓϦέʔγϣϯʹ w ಉ͡ػೳͷωΠςΟϒΞϓϦΛ࡞͢Δ߹ɻ ʢ3FBDU/BUJWFͰΞϓϦ։ൃʣ 3FBDUͷબͼͲ͜Ζ
w ػೳΛͻͱ௨Γ֮͑ͯ͠·͑ɺ͘ݎ࿚ͳΞϓϦ έʔγϣϯߏங͕Ͱ͖Δɻ w େن։ൃʹڧ͍ɻ w ཧը໘ͳͲͷσʔλද͕ࣔଟ͍Α͏ͳΞϓϦέʔ γϣϯͱ૬ੑ͕ྑ͍ɻ w ֶशίετ͕ߴ͍ͷͰɺϓϩδΣΫτϝϯόʔͷε
Ωϧʹґଘɻ "OHVMBSͷબͼͲ͜Ζ
w ϓϩδΣΫτϝϯόʔͷ41"࣮ܦݧ͕গͳ ͍߹ʹɻ w খʙେنͷൣғͷ։ൃͰ͑Δɻ w 8FCαΠτͷ੍࡞ͰޮՌΛൃشɻ K2VFSZͷΘΓ 7VFKTͷબͼͲ͜Ζ
w ͓͢͢Ίͷൺֱํ๏ɺ؆୯ͳΞϓϦέʔγϣϯΛ ֤ϑϨʔϜϫʔΫͰ࡞ͬͯΈΔɻ w 50%0ΞϓϦɺΘ͔Γ͍͢ಈ࡞ͷͷɺ ෳը໘ͷϧʔςΟϯάઃఆ w ετʔϦʔϒοΫ ʢIUUQTTUPSZCPPLKTPSHʣͰࢼͯ͠ΈΔɻ 6*ίϯϙʔωϯτͷ։ൃڥɻ
ϕετϓϥΫςΟε
ϓϩδΣΫτͷେ͖͞ʁ ͲΕ΄ͲͷظؒͰϝϯςφϯεͰ͖Δ͔ʁ ͯ͢ͷػೳΛ͡ΊʹఆٛͰ͖Δ͔ɺͦΕͱॊೈੑΛ࣋ͨͤΔ Α͏ཁٻ͞Ε͍ͯΔ͔ ͯ͢ͷػೳ͕ఆٛ͞Ε͍ͯΔͳΒɺͲΜͳػೳɾೳྗ͕ඞཁ͔ʁ
υϝΠϯϞσϧϏδωεϩδοΫෳࡶ͔ʁ 8FC͔ϞόΠϧ͔σεΫτοϓ͔ɺͲͷΑ͏ͳϓϥοτϑΥʔϜ͕ λʔήοτ͔ʁ αʔόʔαΠυϨϯμϦϯά͕ඞཁ͔ʁ4&0ॏཁ͔ʁ ϦΞϧλΠϜΠϕϯτΛଟ͘ѻ͏͔ʁ ϓϩδΣΫτνʔϜͷਓʁ νʔϜͷ։ൃऀͨͪͷܦݧʁͲͷΑ͏ͳܦྺͳͷ͔ʁ ͦͷ··͙͢ʹ͑ΔίϯϙʔωϯτϥΠϒϥϦʔͳ͍͔ʁ அج४Λ͓ͬͯ͘
·ͱΊ
w ओཁϑϨʔϜϫʔΫͭ ɾ3FBDU ɹॊೈɺϦιʔε͕๛ɺωΠςΟϒΞϓϦԽ ɾ"OHVMBS ɹ༨ܭͳ͜ͱΛߟ͑ͳ͍͍ͯ͘ɺେن։ൃʹڧ͍ ɾ7VFKT ɹγϯϓϧͰѻ͍͍͢ɺͲͷنͰରԠͰ͖Δ ·ͱΊ
w ͦΕͧΕҰҰɻͲΕ͕ྑ͍ͱҰ֓ʹݴ͑ͳ͍ w அج४Λ౿·͑ͨબΛ ·ͱΊ