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
Vue.js
Search
kazupon
July 11, 2014
Programming
12
11k
Vue.js
天下一クライアントサイドJS MV*フレームワーク武道会資料
kazupon
July 11, 2014
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
530
Vapor Revolution
kazupon
3
3.7k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.4k
Vue.jsエコシステム動向2023
kazupon
17
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
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
250
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Go言語はstack overflowの夢を見るか?
logica0419
0
520
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
iOSでSVG画像を扱う
kishikawakatsumi
0
160
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
180
Featured
See All Featured
Music & Morning Musume
bryan
46
6.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
The Invisible Side of Design
smashingmag
302
51k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Designing Experiences People Love
moore
142
24k
A Tale of Four Properties
chriscoyier
161
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
It's Worth the Effort
3n
187
28k
Writing Fast Ruby
sferik
630
62k
Transcript
Vue.js ఱԼҰΫϥΠΞϯταΠυJS MV*ϑϨʔϜϫʔΫಓձ 2014-07-11 @kazupon
ఱԼҰΫϥΠΞϯταΠυJS MV*ϑϨʔϜϫʔΫಓձ
Vue.jsʹ͍ͭͯ ͬͱڵຯΛ࣋ͬͯΒ͑ΔΑ͏ ͜͜ʹ͖ͬͯ·ͨ͠
ΑΖ͓͘͠ئ͍ਃ্͛͠·͢
About Me • @kazupon • ॴଐɿCUUSOO SYSTEM • ׂɿϦʔυΤϯδχΞ •
ࣄɿ ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺͳͲɺ γεςϜશൠɺ΄΅શ෦ʂ
Vue.jsͱ
Vue.js • γϯϓϧͳܰྔMVVMϥΠϒϥϦ • Angular.js | Knockout.js | Ractive.js |
Rivets.js͔ΒӨڹΛड͚͍ͯΔ • Evan You ࢯ (github:@yyx990803)ʹ Αͬͯ։ൃ • ໊শ࠷ॳSeedͱͯ࢝͠·Γɺ v0.6ͰVue.jsʹ໊শΛϦωʔϜ • ࠷৽Ver: v0.10.5
Vue.jsͷಛ
WebαΠτʹΑΔͱ͜Μͳײ͡ • Simple • Fast • Composable • Compact •
Powerful • Module Friendly WebαΠτ:http://vuejs.org
Simple • mustacheςϯϓϨʔτ͕هࡌ͞ΕͨHTMLͱJSON γϦΞϥΠζͳΦϒδΣΫτΛݩʹɺViewModelΛ ΠϯελϯεԽ͢Δ͚ͩͰಈ࡞ʂ <div id="demo"> <p>{{message}}</p> <input v-model="message">
</div> var demo = new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } }); HTML JS demo.messageΛมߋͯ͠ɺinputλά͔Βมߋ͠ ͯViewModelͱDOMͷಉظ
Fast • BatcherʹΑΔඇಉظͳόονॲཧͰ͕DOMʹ ө͞ΕΔ (benchmark: http://vuejs.org/perf/) Average (Chrome33 | Firefox28
| Safari7)
Composable • ViewModelΛίϯϙʔωϯτͱͯ͠ొ͢Δ͜ͱͰ ϞδϡʔϧԽͯ͠࠶ར༻Ͱ͖Δ var Alert = Vue.extend({ template: ‘<p>{{message}}</p>’,
data: { message: ‘Occured Error !!’ }, methods: { show: function () { ɹɹɹ// … ɹɹ} } }); ! Vue.component(‘my-alert’, Alert); <div v-component=“my-alert”></div> Define & Register component Use component
Compact • αΠζ minify & gzip Ͱ14KB • ଞͷϥΠϒϥϦʹґଘͳ͠
Powerful • HTMLʹॻ͍ͨධՁࣜComputedͳϓϩύςΟ ɺࣗಈతʹґଘ͍ͯ͠ΔมΛݟ͚ͭͯɺΛ ͯ͘͠ΕΔ <div id="demo"> <button v-on="click: onClick">
{{isOwner ? 'owner' : 'guest'}} </button> </div> var toggle = new Vue({ el: '#demo', methods: { onClick: function (e) { this.isOwner = !this.isOwner; } } }); HTML JS
Module friendly • Component, Browserify, Bowerͱ͍ͬͨϞδϡʔϧ ཧγεςϜΛར༻Մೳ
ͱ·͋ ͜Μͳײ͡Ͱ͢
͋ͱ ͦͷଞʹ ॏཁͳͷͱͯ͠
ϓϥάΠϯ • Vue.jsΛ֦ு͍ͨ͠ਓͷͨΊʹϓϥάΠϯ͢ΔAPI Λαϙʔτ͍ͯ͠Δ module.exprots = function (Vue, option) {
// something plugin logic }; var Vue = require(‘vue’); var myplugin = require(‘myplugin’); ! Vue.use(myplugin, { foo: 1 }); Implement plugin Install plugin
͜͜·Ͱͷઆ໌Ͱ Ͳ͏Ͱ͔ͨ͠ʁ ͍͍ͨ͘ͳΓ·͔ͨ͠ʁ
͜Ε·Ͱͷઆ໌ͰVue.js • ϑϨʔϫʔΫͰͳ͘ϥΠϒϥϦײ֮Ͱར༻Ͱ͖ͯɺ • ࡞ͬͨViewModelΛϞδϡʔϧԽͰ͖ͯɺ • ϞδϡʔϧཧγεςϜͱ࿈ܞͰ͖ͯɺ • ඞཁͳػೳϓϥάΠϯͰ֦ுͰ͖Δ ඇৗʹॊೈʹখճΓ͕ޮ͍͘
͍ͭ
ڵຯΛ࣋ͬͨਓ http://vuejs.org ʹΞΫηεͯ͠ GuideʹΛ௨͠ खΛಈ͔͠ͳ͕Β৮ͬͯ༡ͼ·͠ΐ͏ʂ
Α͏ͦ͜……… ʰVue.jsͷੈքʱ …………
Vue.jsͷࠓޙ (ϩʔυϚοϓ) https://github.com/yyx990803/vue/issues/78
Core • v0.11.x • WebComponent ରԠ • Object.observe ରԠ •
͍ͭઌɺnextϒϥϯν͕ΒΕͯɺv0.11͚ͷ ։ൃʢoverhaulͯ͠΄΅full scrach͔Βʣ͕ελʔ τ next ϒϥϯν
Plugins • vue-touch • vue-resource • vue-router • vue-validator •
vue-firebase • vue-import
͓ΘΓʹ
ຊਓͷΛฉ͖͍ͨΒ͍͠
Vue.jsͷΠϕϯτͬͯΔΑ • Vue.js͘͘ձ • ઌʹ̎ճ։࠵ • ຖ݄ୈ1ɾୈ3݄༵ ʹ։࠵͍ͯ͠Δ Έ͍ͨ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ