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
490
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
64
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
850
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
140
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
240
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
920
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
330
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.1k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
370
Connect 100+を支える技術
kanyamaguc
0
190
AWS認定を取る中で感じたこと
siromi
1
170
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
240
ゼロからはじめる採用広報
yutadayo
2
460
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
500
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
120
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.2k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
8.2k
Featured
See All Featured
Done Done
chrislema
184
16k
A Tale of Four Properties
chriscoyier
160
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
How GitHub (no longer) Works
holman
314
140k
Embracing the Ebb and Flow
colly
86
4.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Docker and Python
trallard
44
3.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Become a Pro
speakerdeck
PRO
28
5.4k
Scaling GitHub
holman
459
140k
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͍͍ͧ