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を数ヶ月使ってみて遭遇した問題とその解決策
Search
positiveflat
May 27, 2015
Programming
4
4.4k
Vue.jsを数ヶ月使ってみて遭遇した問題とその解決策
Data Binding JS Night 〜データバインディングなんでもLT大会@LINEオフィス〜
positiveflat
May 27, 2015
Tweet
Share
More Decks by positiveflat
See All by positiveflat
マルチプロダクト開発体制における エンジニアリングマネジメント | 野田 陽平 PLAID, Inc
positiveflat
2
670
プレイドにおけるプロダクトの国際化の取り組み | 野田 陽平 PLAID, Inc
positiveflat
6
3k
CXプラットフォームKARTEのプロダクト改善
positiveflat
1
1.4k
KARTEを支えるCI環境
positiveflat
1
2.3k
Other Decks in Programming
See All in Programming
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
550
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
CSC509 Lecture 05
javiergs
PRO
0
300
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.5k
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
570
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
400
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
410
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Mobile First: as difficult as doing things right
swwweet
224
10k
Building Adaptive Systems
keathley
43
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Gamification - CAS2011
davidbonilla
81
5.5k
Fireside Chat
paigeccino
40
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Rails Girls Zürich Keynote
gr2m
95
14k
We Have a Design System, Now What?
morganepeng
53
7.8k
GitHub's CSS Performance
jonrohan
1032
460k
Transcript
Vue.jsΛϲ݄ͬͯΈͯૺ۰ͨ͠ͱͦͷղܾࡦ Data Binding JS Night ʙσʔλόΠϯσΟϯάͳΜͰLTେձ@LINEΦϑΟεʙ גࣜձࣾϓϨΠυ Yohei Noda @positiveflat
2015/05/27 https://plaid.co.jp/
ࣗݾհ ໊લ: Yohei Noda ॴଐ: גࣜձࣾϓϨΠυ twitter: @positiveflat 201412݄ʹIBMΛୀ৬ 20151݄ΑΓגࣜձࣾϓϨΠυʹjoin
ϦΞϧλΠϜWeb٬πʔϧ ͷ։ൃʢओʹϑϩϯτΤ ϯυʣ
͡Ίʹ…Vue.jsͷ؆୯ͳհ • ΠϯλϥΫςΟϒwebΠϯλʔϑΣʔεΛߏங͢ΔͨΊͷMVVM(Model, View, ViewModel) ΫϥΠΞϯτϑϨʔϜϫʔΫ • ํσʔλόΠϯσΟϯά • σΟϨΫςΟϒͱͯ͠ɺDOMͷॲཧΛΧελϚΠζͯ͠ఏڙͰ͖Δɻ
• σʔλͷఆٛDOMͷߏஙͳͲΛ·ͱΊͯɺͦͷ෦Λίϯϙʔωϯτͱͯ͠࡞ ͢Δ͜ͱ͕Ͱ͖Δɻ • ܰྔ • γϯϓϧͰֶशίετ͕͍ • ͨͩ͠…ES5४ڌͷϒϥβαϙʔτΛલఏͱ͍ͯ͠ΔͷͰɺIE8αϙʔτ֎
͡Ίʹ…Vue.jsͷ؆୯ͳհ • el • data • compiled • ready •
methods …
͡Ίʹ…Vue.jsͷ؆୯ͳհ HTML {{hoge}}ͷΑ͏ͳه๏Ͱ $data ҎԼͷϓϩύςΟʹΞΫηεՄೳ
ʮγϯϓϧͰ৭ʑ؆୯ʹ࡞Εָͯͦ͠͏ɻʯ Vue.jsͷ࠷ॳͷҹ
͔֬ʹͦ͏Ͱ͕ͨ͠ɺ ࡉ͔͍ʹͿ͔ͭΓ·ͨ͠ɻ
1. $dataʹΛͯ͠มߋ͕ݕ͞Εͳ͍ HTML JavaScript
1. $dataʹΛͯ͠มߋ͕ݕ͞Εͳ͍ [ղܾࡦ] $add, $delete (, $set)Λ͏ …ͪΌΜͱdocumentΛಡΜͰ͍ͳ͍ͱͿ͔ͭΔɻ “Due
to the limitations of ES5, Vue cannot detect properties directly added to or deleted from an Object, so use this method and vm.$delete when you need to do so.”
1. $dataʹΛͯ͠มߋ͕ݕ͞Εͳ͍ [ৄࡉ] Vue.js 0.11.*ECMAScript 5४ڌͷϒϥβΛαϙʔτ͍ͯ͠ΔͷͰɺObject ʹ͕Ճ͞Εͯݕ͞Εͳ͍ɻ௨ৗ$dataͷԼͷϓϩύςΟʹgetter/ setterΛ༩͍ͯͦ͠ΕΛVue͕ࢹ͍ͯ͠Δ͕ɺΛՃ͢Δͱ༩͞ Εͳ͍ɻ͜ͷ੍͕ͳ͘ͳΔͱɺObject.observe()ͱ͔͕͑ΔΑ͏ʹͳΔ͔ ?
# Object.observer()ɺมߋΛࢹͯ͠objectͷมߋཤྺΛอ࣋͢Δ͜ͱ͕Ͱ ͖Δ
2. $dataͷԼͷσʔλ͕େ͖͘ɾਂ͘ͳΔͱ ٸܹʹ͘ͳΔ [ৄࡉ] • 1ͷ܁Γฦ͕ͩ͠ɺVue.jsES5४ڌͷϒϥβΛαϙʔτ ͍ͯ͠ΔͨΊɺObject.observe()ΛΘͣʹɺgetter/setterΛࢹ ͍ͯ͠Δɻ • ෦తʹɺ$dataͷԼʹ͋ΔObjectͷgetter,
setterΛࢹͯ͠ __proto__ҎԼΛॻ͖͍͑ͯΔɻ • Αͬͯɺ$dataͷԼͷ͕มΘΔ͚ͩͰɺେྔͷ__proto__Λॻ͖ ͑Δ͜ͱʹͳΔͨΊ͘ͳΔɻ
2. $dataͷԼͷσʔλ͕େ͖͘ɾਂ͘ͳΔͱ ٸܹʹ͘ͳΔ ͱ͍͏͜ͱͰɺ $dataҎԼͰ͖Δ͚ͩܰͨ͘͠΄͏͕Αͦ͞͏ɻ
3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍ • JavaScript • html …valueͰͳ͘ɺtextͷ”ࠇ۠””ौ୩۠”Λද͍ࣔͨ͠
3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍ [ղܾࡦ] ؆୯ͳΞΫηεͷํ๏͕ͳ͍ͷͰɺ computedͰoptionsͷarrayͷத͔ΒஞҰݕࡧ͢Δ
4. selectͷdefault͕html͔ΒࢦఆͰ͖ͳ͍ HTML “selected”ଐੑΛ༩͢ΕΑ͔͕ͬͨɺɺ ༩Ͱ͖ͳ͍ʢoptions=“”Λ༻ͤͣʹoptionΛҰͭͣͭॻ͍ͨ߹ಉ༷ʣ
4. selectͷdefault͕html͔ΒࢦఆͰ͖ͳ͍ [ղܾࡦ] ؆୯ɻ୯७ʹɺv-modelͷʹॳظΛͨͤͯΕྑ͍
·ͱΊ • Vue.jsɺ࣮͕γϯϓϧͳׂʹ൚༻ੑ͕ߴ͍ɻ • ॳΊͷࠒʹͿ͔ͭͬͨຊհͨ͠Ґͷ͍ܰͷͰɺ׳Εͯ͠·͑ ॻ͖͍͢ɻ • ࣍ͷόʔδϣϯָ͕͠Έɻ
࠷ޙʹগ͠એ
גࣜձࣾϓϨΠυͰɺ ΤϯδχΞΛืूதͰ͢ʂ
Thank you! Yohei Noda @positiveflat