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
42
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
88
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
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
290
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
200
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.4k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.6k
OPENLOGI Company Profile
hr01
0
60k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
JavaにおけるNull非許容性
skrb
2
2.7k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
540
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Embracing the Ebb and Flow
colly
84
4.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
GraphQLとの向き合い方2022年版
quramy
44
14k
Building Applications with DynamoDB
mza
93
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Music & Morning Musume
bryan
46
6.4k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Docker and Python
trallard
44
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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͍͍ͧ