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
The Progressive Framework
Search
kazupon
September 02, 2016
Programming
2
2.2k
The Progressive Framework
gotanda.js #5 in toreta
progressive framework for japanese
kazupon
September 02, 2016
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
490
Vapor Revolution
kazupon
3
3.5k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
AIともっと楽するE2Eテスト
myohei
6
2.6k
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
効率的な開発手段として VRTを活用する
ishkawa
0
140
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.6k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
Is Xcode slowly dying out in 2025?
uetyo
1
270
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Documentation Writing (for coders)
carmenintech
72
4.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building an army of robots
kneath
306
45k
Bash Introduction
62gerente
613
210k
Become a Pro
speakerdeck
PRO
29
5.4k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Transcript
Vue.js The Progressive Framework Gotanda.js #5 in TORETA 2016-09-02 @kazupon
Who are you ? https://github.com/kazupon
Vue.js core team member Vue.js-jp organizer
2016-08-12
Release 2.0 RC https://medium.com/the-vue-point/the-state-of-vue-1655e10a340a#.ehysn8dbw
Documentation: WIP http://rc.vuejs.org
Vue.js 2.0 Coming soon … Please Wait
Vue.js ͷঢ়گ
https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.lno4xgowe ࠷ۙߘ͞Εͨϒϩά
৽نϢʔβʔͷֶश͍ͨ͠ͷ
Ϣʔβʔ͕·͍͍͔ͨͨ
Vue.jsͷظͷߴ·Γ ⤴
ΧϯϑΝϨϯε Πϕϯτ
None
Laracon US & Laracon EU
Evan ࢯ͕ొஃʂ
2.0 ͷϦϦʔε ͪԕ͍͠Ͱ͕͢
Progressive Framework
Vue.js ͷॏཁͳίϯηϓτͳͷͰ ࠓ͜Εʹ͍ͭͯ͠·͢
ϑϨʔϜϫʔΫ
None
ϑϨʔϜϫʔΫಓ۩ͱͯ͠։ൃʹ͓͍ͯ ΞϓϦέʔγϣϯͷෳࡶੑΛ ղܾ͢ΔͷͰͳ͚ΕͳΒͳ͍
͔͠͠ͳ͕Β ಓ۩Ͱ͋ΔϑϨʔϜϫʔΫࣗʹ ෳࡶੑ͕ଘࡏ͢Δ
ࢲͨͪΞϓϦέʔγϣϯͷෳࡶੑΛ ղܾ͢ΔͨΊʹ ਖ਼͍͠ϑϨʔϜϫʔΫΛ બ͢Δඞཁ͕͋Δ
• μογϡϘʔυܥͷΑ͏ͳෳࡶͳΞϓϦέʔγϣϯʹର ͯ͠ɺMVCͷΑ͏ͳߏԽ͢ΔͷΛαϙʔτ͠ͳ͍ jQuery ͷΑ͏ͳͷͰ։ൃ͢Δέʔε ෆेͳύλʔϯ
ෆेͳύλʔϯͷϝλϑΝʔ ϚαΧϦͷΈͰϩάϋεͷΑ͏ͳՈΛ ͭ͘ΔΑ͏ͳͷ
• ϖϥΠνͳϥϯσΟϯάϖʔδͷΑ͏ͳΞϓϦέʔγϣ ϯʹରͯ͠ɺMeteor ͷΑ͏ͳϑϧελοΫͳͷΛඋ͑ ͨͷͰ։ൃ͢Δέʔε Overkill ύλʔϯ
Overkill ύλʔϯͷϝλϑΝʔ δϟΠΞϯτφΠϑͰΓΜ͝ͷൽΛ͍ͯ ٯʹέΨΛ͢ΔΑ͏ͳͷ
ϑϨʔϜϫʔΫͱ͍͏ಓ۩ʹ͋Δෳࡶੑ ΞϓϦέʔγϣϯͷෳࡶੑʹରͯ͠ ेʹίετΛࢧ͏͜ͱ͕Ͱ͖ΔͷͰ ͳ͚ΕͳΒͳ͍
͔͠͠ͳ͕Β ࣮ࡍʹݱͰ
Ϗδωεઈ͑ͣมԽ͢Δ • Ϣʔβʔཁͷػೳ֦ுͳͲʹରԠ͢ΔͨΊɺΞϓϦέʔ γϣϯ͠ͳ͚ΕͳΒͳ͍ • αϒϓϩδΣΫτ͕ͨͨ͠ΊɺϝΠϯϓϩδΣΫτ ͔ΒεϐϯΞτͨ͠߹Ͱɺ͍ΛࣦΘͣՃ͞ ͤͳ͚ΕͳΒͳ͍ • αʔϏεͷεέʔϧΞοϓʹ͋ͨͬͯɺαʔϏεΛ
ͭͭ͠։ൃΛҡ࣋ͨ͠··ɺαʔϏεΛͤ͞ ͳ͚ΕͳΒͳ͍
ϑϨʔϜϫʔΫ Ϗδωεʹରͯ͠ॊೈʹ ରԠͰ͖ͳΕ͚ͳΒͳ͍
ϏϡʔίΞ ͜Μͳײ͡Ͱελʔτͯ͠
ϏϡʔίΞ ʴ Φϓγϣϯతͳ ΞϓϦέʔγϣϯ։ൃαϙʔτϥΠϒϥϦ ن͕େ͖͘ͳ͖ͬͯͨ࣌ʹ
αϙʔτ͢ΔϥΠϒϥϦ͕ ͳ͚Ε…
https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.jqxo59evz
http://d.hatena.ne.jp/tomoya/20160403/1459665374
ϑϩϯτΤϯυਏ͍
͜͏ͳΒͳ͍Α͏ʹ ΈΜͳΛ Happy ʹ͍ͨ͠ͷ͕ Evanࢯ͕ఏএ͢Δ֓೦
Progressive Framework
http://ejje.weblio.jp/content/progressive
ΞϓϦέʔγϣϯͷ ஈ֊తͳมԽཁٻʹԠͯ͡ ղܾͰ͖Δํ๏Λఏڙ͢Δ
https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.p
• 1. Declarative Rendering • 2. Component System • 3.
Client-Side Routing • 4. Large-Scale State Management • 5. Build System & Development Experience ྖҬΛ5ͭఆٛ
Declarative Rendering
• JavaScriptʹΑΔDOM ϨϯμϦϯάॲཧతʹߴՁͰഁ յత • σʔλͷঢ়ଶͱDOMͷঢ়ଶΛJavaScriptͰ໋ྩతʹಉظ ͤ͞Δͷ໘ͰΤϥʔ͕ى͖͍͢ DOMϨϯμϦϯά
• ςϯϓϨʔτͰએݴతʹهࡌ͢Δ͚ͩͰɺσʔλมߋ ͷɺϦΞΫςΟϒʹDOMϨϯμϦϯάͯ͘͠ΕΔ • Ϣʔβʔೖྗ༰ɺσʔλʹөͯ͠ಉظͯ͘͠ΕΔ એݴత&ϦΞΫςΟϒϨϯμϦϯά
• script λάͰೖΕΔ͚ͩ։ൃ͢Δ͚ͩ ར༻ํ๏ <script src="vue.js"></script> <script> new Vue({ //
... }) </script>
ϓϩτλΠϓͪΐͬͱͨ͠ ϖϥΠνతͳWebαΠτʹ ͜ΕͰे
Component System
• WebαΠτ͕ஈʑେ͖͘ͳͬͯ͘ΔͱɺUIΛϞδϡʔϧ Խͯ͠࠶ར༻͢Δඞཁ͕Ͱͯ͘Δ ϞδϡʔϧԽͷඞཁੑ
• Vue.js ͕ఏڙ͢Δ UI ϞδϡʔϧԽ͢Δ Component ػೳ Λར༻͢Δ͜ͱͰ࠶ར༻ՄೳʹͳΔ Component
• Vue.js ͷ࡞๏ʹΑͬͯ Component Խͨ͠ΒɺςϯϓϨʔ τʹΧελϜλά (Custome Element) Λهࡌ͢Δ͚ͩ ར༻ํ๏
<side-bar></side-bar> <tabs> <tab>...</tab> <tab>...</tab> </tabs>
• ࢠؒͷ Component ʹ͓͍ͯɺProps ͰσʔλΛ͠ɺ Events ܦ༝ͰσʔλΛड͚औΔ Component ؒͷ௨৴
Component ʹΑͬͯ ϞδϡʔϧԽ͢Δ͜ͱͰ։ൃޮ ֨ஈʹ্
Client-Side Routing
• ͞ΒͳΔϏδωεཁٻʹΑΓΞϓϦέʔγϣϯతͳϞ ϊ͕ཁٻ͞ΕΔΑ͏ʹͳΔ • Single Page Application ͚ͷϥΠϒϥϦͱͯ͠ vue- router
Λఏڙ WebαΠτ͔ΒWebΞϓϦ
Component Λ࠶ར༻͢ܗͰ ΞϓϦԽରԠՄೳ
Large-Scale State Management
• ͞ΒʹWebΞϓϦ͕େنʹͳͬͯ͘ΔͱɺComponent ؒͰঢ়ଶڞ༗ํ๏ɺ࠶ར༻ੑ͕ͱͳͬͯ͘Δ େنWebΞϓϦέʔγϣϯͷ Component Component state state ??? Component
state
• ঢ়ଶཧ͚ͷϥΠϒϥϦͱͯ͠ vuex Λఏڙ Flux σʔλϑϩʔΞʔΩςΫνϟ
vuex Λར༻͢Δ͜ͱͰ طଘͷ Component Λ֦ு͢ΔܗͰ ঢ়ଶΛूதཧ͢Δ͜ͱ͕Ͱ͖Δ
Build System & Development Experience
• WebΞϓϦέʔγϣϯΛ࡞ΔͨΊʹɺϓϩδΣΫτΛ؆ ୯ʹηοτΞοϓ͢ΔੜπʔϧΛఏڙ Scaffold CLI πʔϧͷఏڙ
• Component Խ͢ΔͨΊͷΈఏڙ Single File Component
Single File Component ελΠϧ ςϯϓϨʔτ εΫϦϓτ
• Component & vuex पΓͷσόοάπʔϧΛ Chrome ֦ு Ͱఏڙ σόοάπʔϧ
Vue.js ͕ఏڙ͢Δ։ൃαϙʔτܥͷ πʔϧΛར༻͢Δ͜ͱͰຊ࣭తͰͳ͍ͷʹ ΄ͱΜͲ࣌ؒΛඅ͞ΕΔ͜ͱͳ͘ ܧଓతͳ։ൃʹઐ೦͢Δ͜ͱ͕Ͱ͖Δ
·ͱΊ • Progressive Framework ʹ 5 ͭͷྖҬ͕ఆٛ͞Ε͍ͯΔ • Progressive Framework
ͱมԽ͢ΔϏδωεͷঢ়گʹ Ԡͯ͡ɺVue.jsίΞϥΠϒϥϦͱपลϥΠϒϥϦʹΑͬ ͯɺஈ֊తʹΞϓϦέʔγϣϯΛαϙʔτͰ͖ΔϑϨʔ ϜϫʔΫͰ͋Δ
vuejs-jp slack • URL https://vuejs-jp-slackin.herokuapp.com • Vuejs ຊޠެࣜαΠτܦ༝ͰδϣΠϯͰ͖·͢ http://jp.vuejs.org
Thanks!