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
77
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
870
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
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
940
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Technology
See All in Technology
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
300
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
260
モダンフロントエンド 開発研修
recruitengineers
PRO
7
4.5k
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
7
59k
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
100
見てわかるテスト駆動開発
recruitengineers
PRO
6
2k
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
300
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
690
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
0
160
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
510
KINTO FACTORYから学ぶ生成AI活用戦略
kintotechdev
0
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
RailsConf 2023
tenderlove
30
1.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Docker and Python
trallard
45
3.5k
4 Signs Your Business is Dying
shpigford
184
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Designing Experiences People Love
moore
142
24k
Navigating Team Friction
lara
189
15k
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͍͍ͧ