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.6k
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
700
writer.appを支える技術
yuhiisk
0
760
これからはじめるシングルページアプリケーション
yuhiisk
0
570
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
330
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
120
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
Why Prism?
kddnewton
4
1.7k
How to Break into Reading Open Source
kaspth
2
220
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
実践!難読化ガイド
mitchan
0
200
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
150
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
Featured
See All Featured
Designing for humans not robots
tammielis
248
25k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
The Invisible Side of Design
smashingmag
296
50k
How STYLIGHT went responsive
nonsquared
93
5.1k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Thoughts on Productivity
jonyablonski
66
4.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
We Have a Design System, Now What?
morganepeng
48
7.1k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
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 அج४Λ౿·͑ͨબΛ ·ͱΊ