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
62
ある日オレオレフレームワークを作りたくなったぞ/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
130
とある自社開発の苦楽の軌跡/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
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Witchcraft for Memory
pocke
1
670
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
250
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
260
Connect 100+を支える技術
kanyamaguc
0
160
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
390
モバイル界のMCPを考える
naoto33
0
370
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
6
4.7k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
690
AI専用のリンターを作る #yumemi_patch
bengo4com
5
2.2k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building an army of robots
kneath
306
45k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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͍͍ͧ