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超入門(ライブ)/ Vue.js introduction(Live Coding)
Search
果物リン
January 26, 2019
Technology
0
470
Vue.js超入門(ライブ)/ Vue.js introduction(Live Coding)
意外と刺さるのでは?ということで #sakenight6 でVue.jsのライブコーディングをやってみました
果物リン
January 26, 2019
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
41
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
87
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
780
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
900
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
160
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
170
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
460
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
610
EDRの検知の仕組みと検知回避について
chayakonanaika
12
4.9k
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
AIエージェント元年@日本生成AIユーザ会
shukob
1
220
OPENLOGI Company Profile for engineer
hr01
1
20k
Goで作って学ぶWebSocket
ryuichi1208
3
2.8k
php-conference-nagoya-2025
fuwasegu
0
150
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
730
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
For a Future-Friendly Web
brad_frost
176
9.6k
The Cult of Friendly URLs
andyhume
78
6.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Speed Design
sergeychernyshev
27
810
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
Vue.js超入門(ライブ) ՌϦϯ@FruitRiin 2019/01/26 ʲୈ6ճʳϑϩϯτΤϯυ× ϏΞόογϡ ॳ৺ऀษڧձ in৽॓
#sakenight6
自己紹介 - 果物リン • Twitter/Github/Qiita@FruitRiin • ݄͔̎ΒגࣜձࣾΏΊΈͰϑϩϯτΤϯδχΞ • લ৬αʔόʔαΠυΤϯδχΞʢPHPʣ •
Vue͍͍ͧʂ
私的HotNews Azusa Colors ͷ16:9ςʔϚ͕Ϛʔδ͞Ε·ͨ͠
લஔ͖͜͜·Ͱ
Vue.jsの良さをもっと広めたい! • ͷͰϥΠϒίʔσΟϯά͠Α͏ʂˡΠϚίί • جຊͷςϯϓϨʔτߏจͷհ • ͬͯΔਓʹใྔօແ • νϡʔτϦΞϧ͘Β͍ •
ฉ͖͍ͨਓ͓Δʁ
Vue.jsって? • ̏େϑϩϯτΤϯυϑϨʔϜϫʔΫͷͻͱͭ • ViewʢݟͨʣͱModelʢσʔλʣΛ͍͍ײ͡ʹ • MVVMΞʔΩςΫνϟ • HTMLʹv-◦◦◦ͬͯॻ͘ͱΑ͠ͳʹͯ͘͠ΕΔ •
σΟϨΫςΟϒͬͯݺͿΑʂ
今回の環境 • HTMLϑΝΠϧ̍ຕͰσϞ͠·͢ʂ • ͓ࢼ͠ͳΒCLIͰڥߏங͢Δͷ͕Φεεϝ
{{}} ʢσʔλग़ྗʣ
v-model ʢσʔλόΠϯσΟϯάʣ
v-bind ʢϓϩύςΟόΠϯσΟϯάʣ
v-if ʢ݅ذʣ
v-on ʢೖྗ੍ޚʣ
v-for ʢ܁Γฦ͠ʣ
Extend • ϧʔςΟϯάɺঢ়ଶཧͳͲͷެࣜϥΠϒϥϦ • Vue CLIͰڥߏங • ୯ҰϑΝΠϧίϯϙʔωϯτɺ scoped cssɺHot
Module ReplacementͳͲͷԸܙ͋Γ
Tips: 混ぜるな危険 • Vue.jsԾDOMͱ͍͏࣮Λ͍ͯ͠Δ • ͷDOMૢ࡞ͱ૬ੑ͕ѱ͍ • jQueryੜJSͰॻ͖͑Δ͔Βͣ • ಈ࡞ൣғΛྑ͘ཧղ͍ͯ͠Ε
ಉډͰ͖ͳ͘ͳ͍…ʁʢͰͬͺΓා͍ʣ
“Virtual DOMͷجຊΞϓϩʔνԾDOM -> ੜͷDOMม Ͱ͋Γɺ͜ͷखଓʹґଘ͢ΔݶΓੜDOMΛ৮Δ͜ͱਪ ͞Ε·ͤΜɻpatchʹר͖ࠐ·ΕΔͱɺΒͳ͍͏ͪʹΠ ϕϯτϋϯυϥ͝ͱਧ͖ඈͿՄೳੑ͕͋Γ·͢ɻ͔͠෦ ͷΞϧΰϦζϜʹґଘ͢ΔͷͰඇৗʹσόοάࠔͰ͢ɻ” from ͳͥԾDOMͱ͍͏֓೦͕ԶୡͷࠢΛ͑ͤ͞Δͷ͔
- mizuchi
まとめ • VueͷςϯϓϨʔτߏจ γϯϓϧͰͱͬͯύϫϑϧ • ଞʹίϯϙʔωϯτԽϥΠϑαΠΫϧ ࢉग़ˍࢹϓϩύςΟͳͲଟͷػೳ͋Γ • ߴػೳͳը໘࡞ʹVue͍͔͕Ͱ͔͢ʁ
Appendix • Vue.js ϋϯζΦϯ! https://gitpitch.com/fruitriin/slideshows/ vueJsHandsOn#/ • ࠓͷ༰ΑΓͪΐͬͱཉுͬͨ༰ • ʮvue.js
user:fruitriinʯͷݕࡧ݁Ռ - Qiita https://qiita.com/search?q=vue.js+user%3Afruitriin • Vueʹ͍ͭͯͷهࣄΛԿຊ͔ʢॳ৺ऀ͚ଟ͍ʣ
Vue͍͍ͧ