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.7k
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
740
writer.appを支える技術
yuhiisk
0
830
これからはじめるシングルページアプリケーション
yuhiisk
0
620
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
370
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
JAWS Days 2025のインフラ
komakichi
1
100
コードを読んで理解するko build
bells17
1
110
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
AWS Step Functions は CDK で書こう!
konokenj
4
600
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
SwiftUI Viewの責務分離
elmetal
PRO
2
280
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
How GitHub (no longer) Works
holman
314
140k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
The Pragmatic Product Professional
lauravandoore
32
6.4k
A designer walks into a library…
pauljervisheath
205
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Automating Front-end Workflow
addyosmani
1369
200k
Building Your Own Lightsaber
phodgson
104
6.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
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 அج४Λ౿·͑ͨબΛ ·ͱΊ