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.3k
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
400
プレイドにおけるプロダクトの国際化の取り組み | 野田 陽平 PLAID, Inc
positiveflat
6
2.7k
CXプラットフォームKARTEのプロダクト改善
positiveflat
1
1.2k
KARTEを支えるCI環境
positiveflat
1
2k
Other Decks in Programming
See All in Programming
Docker_OSS_ホスティング入門
satokoki645
0
110
2 週間で Twitter Bot を作ってみた
contour_gara
0
810
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
710
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
210
Open standards for building event-driven applications in the cloud
meteatamel
0
190
見た目から始める生産性向上
ikumatadokoro
10
1.5k
GitHub Copilotのススメ
marcy731
1
240
業務ツールとして使うPostman
msys75
0
120
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
310
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
330
PostmanでAPIの動作確認が楽になった話
h455h1
0
190
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Agile that works and the tools we love
rasmusluckow
325
20k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
We Have a Design System, Now What?
morganepeng
43
6.8k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Become a Pro
speakerdeck
PRO
13
4.6k
The Pragmatic Product Professional
lauravandoore
26
5.8k
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