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
jQueryよりVue.jsを使おう
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Takayuki
PRO
June 03, 2018
Technology
0
270
jQueryよりVue.jsを使おう
Takayuki
PRO
June 03, 2018
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel Applications with DDD x Clean Architecture x Vibe Coding
bumptakayuki
PRO
1
98
Laravel × Clean Architecture
bumptakayuki
PRO
1
480
エンジニアのキャリア論
bumptakayuki
PRO
1
240
地方カンファレンス主催のススメ
bumptakayuki
PRO
1
240
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
PRO
2
1.3k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
PRO
0
740
沖縄観光、名物を一挙紹介!
bumptakayuki
PRO
2
730
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
PRO
1
3.1k
flutterでイベントアプリを作ってみた
bumptakayuki
PRO
0
180
Other Decks in Technology
See All in Technology
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
aeonpeople
6
2.5k
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
990
AIエージェントを開発しよう!-AgentCore活用の勘所-
yukiogawa
0
180
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
daitak
1
380
AWS Network Firewall Proxyを触ってみた
nagisa53
1
240
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
torounit
0
190
コンテナセキュリティの最新事情 ~ 2026年版 ~
kyohmizu
2
370
CDKで始めるTypeScript開発のススメ
tsukuboshi
1
500
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
470
配列に見る bash と zsh の違い
kazzpapa3
3
160
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
capytan
6
2.8k
We Built for Predictability; The Workloads Didn’t Care
stahnma
0
140
Featured
See All Featured
How Software Deployment tools have changed in the past 20 years
geshan
0
32k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
120
Into the Great Unknown - MozCon
thekraken
40
2.3k
Designing Experiences People Love
moore
144
24k
Testing 201, or: Great Expectations
jmmastey
46
8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
The Cult of Friendly URLs
andyhume
79
6.8k
The SEO identity crisis: Don't let AI make you average
varn
0
290
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Code Review Best Practice
trishagee
74
20k
Transcript
jQueryよりVue.jsを使おう! 鈴木孝之 2018/06/01
"HFOEB ࣗݾհ K2VFSZͷਏΈ 7VFKTͷϝϦοτ 7VFKTͷಋೖํ๏
0.ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹ ϑϦʔϥϯεΛͬͨޙʹ201711݄ʹԭೄͰىۀɻ
◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4
0.ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕ ◆ࣄۀ༰ ɾۀʹ͓͍ͯͷϑʔυϩεΛແ͘͢ ࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ
4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
0.ࣗݾհ ΪʔΫϋεͱɺओʹΤϯδχΞϓϩάϥ ϚʔΛ৬छͱ͢ΔਓɺWeb͕͖ͳਓͳͲ͕ ڞʹॅΉίϯηϓτܕγΣΞϋεͰ͢ʂ ΤϯδχΞͳͲ͕ଟ͍͜ͱ͔Βॅຽಉ࢜Ͱϓϩ άϥϛϯάΛڭ͑߹ͬͨΓ͠·͢ʂ
K2VFSZͷਏΈ
jQueryؤுΕؤுΔ΄Ͳਏ͘ͳΔ
jQueryؤுΕؤுΔ΄Ͳਏ͘ͳΔ
jQueryؤுΕؤுΔ΄Ͳਏ͘ͳΔ jQueryͰ͜ͷ෦Λऔಘ͢Δ ߹ɺΊͬͪΌɺ͍͠
jQueryؤுΕؤுΔ΄Ͳਏ͘ͳΔ $(“#parent”) .children('child-class') .children(‘child-class') .children('child-class'); Ծͷྫɿ ΊͬͪΌϝιουνΣʔϯ͠·ͬͯ͘ औಘ͠ͳ͍ͱ͍͚ͳ͍
7VFKTͷϝϦοτ
Vue.jsͱ MVCͷੜछͰ͋ΔɺGUIϥΠϒϥϦʹదͨ͠MVVMΛઃܭج൫ͱ ͯ͠ ࠾༻͠ɺߏங͞Ε͍ͯ·͢ɻ MVVMΛ࠾༻͍ͯ͠Δ͜ͱ͕ߏจͷཧղ͢͠͞ʹܨ͕͍ͬͯ· ͢ɻ MVVMΛ࠾༻ͨ͠ϑϨʔϜϫʔΫͰදࣔͦͷͷͰ͋ΔViewɺ දࣔ͢ΔσʔλٴͼσʔλΛૢ࡞͢Δखଓ͖Λͻͱ·ͱΊʹͨ͠ View Model
্͕ͷऀͰ͢ɺͦΕΒΛཧ͢Δίϯτϩʔϥ(Controller) ଘࡏ͢ΔͷͷࠇࢠͷΑ͏ͳଘࡏͰϢʔβ͔ΒӅṭ͞Ε͍ͯΔͨ ΊίʔυΛॻ͘ࡍʹҙࣝ͢Δඞཁ͋Γ·ͤΜɻ
Vue.jsͱ
શϖʔδSPAʹ͠ͳͯ͘ ɺҰ෦͚ͩͷಋೖ͕ Ͱ͖Δʂ େنͳϑϨʔϜϫʔΫͰ͋ΔAngularJSͰɺ AngularJSಠࣗͷϧʔϧʹଇͬͯWEBΞϓϦΛߏ ங͍ͯ͘͠ඞཁ͕͋Γ·͢ɻ ϧʔϧʹଇͬͯ։ൃ͢ΕɺͪΖΜAngularJS ੌ͘ߴ͍ੜ࢈ੑΛൃش͠·͢ɻ ͨͩɺ͜Ε్͕தͰଞͷϑϨʔϜϫʔΫʹΓସ ͕͑Ͱ͖ͳ͍ཧ༝ʹͳ͍ͬͯΔͷͰ͢ɻ
͔͠͠ɺVue.jsͰࣗͷΈͷΓํͰWEBΞ ϓϦΛߏங͍ͯ͘͜͠ͱ͕Ͱ͖·͢ɻɻ ʮֶशޮඇৗʹߴ͍ʯͱݴ͍ Ε·͢ɻ ߏγϯϓϧͰຊޠͷυΩϡ ϝϯτॆ࣮͍ͯ͠ΔͷͰɺֶशί ετ͍Ͱ͢ɻ HTMLɺCSSͱJavaScriptͷجૅΛ ֶश͢Ε͍࢝ΊΔ͜ͱ͕Ͱ͖ ·͢ɻ ಋೖ͕؆୯ʂ ֶशίετ͕͍ 2.ϝϦοτɾಛ γϯϓϧͰࣗ༝͕ߴ ͍ 2 ʙϝϦοτʙ 1 3
-BSBWFMͰͷ7VFKTͷಋೖํ๏
ॳظԽॲཧ
ΤϯτϦʔϙΠϯτ
ΤϯτϦʔϙΠϯτ Ξϯόαμʔ Ϟδϡʔϧ αϓϥΠϠʔ Ϟδϡʔϧ
summary-component chart-component Ϟδϡʔϧ
summary-component Ϟδϡʔϧ