Vue.jsを数ヶ月使ってみて遭遇した問題とその解決策

Data Binding JS Night
〜データバインディングなんでもLT大会@LINEオフィス〜

1. Vue.jsΛ਺ϲ݄࢖ͬͯΈͯૺ۰ͨ͠໰୊ͱͦͷղܾࡦ Data Binding JS Night
 ʙσʔλόΠϯσΟϯάͳΜͰ΋LTେձ@LINEΦϑΟεʙ גࣜձࣾϓϨΠυ Yohei Noda @positiveflat 2015/05/27 https://plaid.co.jp/
2. ࣗݾ঺հ ໊લ: Yohei Noda
 ॴଐ: גࣜձࣾϓϨΠυ
 twitter: @positiveflat 2014೥12݄ʹIBMΛୀ৬
 2015೥1݄ΑΓגࣜձࣾϓϨΠυʹjoin
 ϦΞϧλΠϜWeb઀٬πʔϧ ͷ։ൃʢओʹϑϩϯτΤ ϯυʣ
3. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ • ΠϯλϥΫςΟϒwebΠϯλʔϑΣʔεΛߏங͢ΔͨΊͷMVVM(Model, View, ViewModel) ΫϥΠΞϯτϑϨʔϜϫʔΫ • ૒ํ޲σʔλόΠϯσΟϯά • σΟϨΫςΟϒͱͯ͠ɺDOMͷॲཧΛΧελϚΠζͯ͠ఏڙͰ͖Δɻ • σʔλͷఆٛ΍DOMͷߏஙͳͲΛ·ͱΊͯɺͦͷ෦඼Λίϯϙʔωϯτͱͯ͠࡞੒ ͢Δ͜ͱ͕Ͱ͖Δɻ • ܰྔ • γϯϓϧͰֶशίετ͕௿͍ • ͨͩ͠…ES5४ڌͷϒϥ΢βαϙʔτΛલఏͱ͍ͯ͠ΔͷͰɺIE8͸αϙʔτ֎
4. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ • el • data • compiled • ready • methods …
5. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ HTML {{hoge}}ͷΑ͏ͳه๏Ͱ $data ҎԼͷϓϩύςΟʹΞΫηεՄೳ
6. ʮγϯϓϧͰ৭ʑ؆୯ʹ࡞Εָͯͦ͠͏ɻʯ Vue.jsͷ࠷ॳͷҹ৅
7. ͔֬ʹͦ͏Ͱ͕ͨ͠ɺ ࡉ͔͍໰୊ʹͿ͔ͭΓ·ͨ͠ɻ
8. ໰୊1. $dataʹ஋Λ଍ͯ͠΋มߋ͕ݕ஌͞Εͳ͍ HTML 
 JavaScript
9. ໰୊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.”
10. ໰୊1. $dataʹ஋Λ଍ͯ͠΋มߋ͕ݕ஌͞Εͳ͍ [ৄࡉ]
 Vue.js 0.11.*͸ECMAScript 5४ڌͷϒϥ΢βΛαϙʔτ͍ͯ͠ΔͷͰɺObject ʹ஋͕௥Ճ͞Εͯ΋ݕ஌͞Εͳ͍ɻ௨ৗ͸$dataͷԼͷϓϩύςΟʹgetter/ setterΛ෇༩͍ͯͦ͠ΕΛVue͕؂ࢹ͍ͯ͠Δ͕ɺ௚઀஋Λ௥Ճ͢Δͱ෇༩͞ Εͳ͍ɻ͜ͷ੍໿͕ͳ͘ͳΔͱɺObject.observe()ͱ͔͕࢖͑ΔΑ͏ʹͳΔ͔ ΋? # Object.observer()͸ɺมߋΛ؂ࢹͯ͠objectͷมߋཤྺΛอ࣋͢Δ͜ͱ͕Ͱ ͖Δ
11. ໰୊2. $dataͷԼͷσʔλ͕େ͖͘ɾਂ͘ͳΔͱ ٸܹʹ஗͘ͳΔ [ৄࡉ] • ໰୊1ͷ܁Γฦ͕ͩ͠ɺVue.js͸ES5४ڌͷϒϥ΢βΛαϙʔτ ͍ͯ͠ΔͨΊɺObject.observe()Λ࢖Θͣʹɺgetter/setterΛ؂ࢹ ͍ͯ͠Δɻ • ಺෦తʹ͸ɺ$dataͷԼʹ͋ΔObjectͷgetter, setterΛ؂ࢹͯ͠ __proto__ҎԼΛॻ͖׵͍͑ͯΔɻ • Αͬͯɺ$dataͷԼͷ஋͕มΘΔ͚ͩͰɺେྔͷ__proto__Λॻ͖ ׵͑Δ͜ͱʹͳΔͨΊ஗͘ͳΔɻ
12. ໰୊2. $dataͷԼͷσʔλ͕େ͖͘ɾਂ͘ͳΔͱ ٸܹʹ஗͘ͳΔ ͱ͍͏͜ͱͰɺ $dataҎԼ͸Ͱ͖Δ͚ͩܰͨ͘͠΄͏͕Αͦ͞͏ɻ
13. ໰୊3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍ • JavaScript • html …valueͰ͸ͳ͘ɺtextͷ”໨ࠇ۠”΍”ौ୩۠”Λද͍ࣔͨ͠

14. ໰୊3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍ [ղܾࡦ]
 ؆୯ͳΞΫηεͷํ๏͕ͳ͍ͷͰɺ
 computedͰoptionsͷarrayͷத͔ΒஞҰݕࡧ͢Δ
15. ໰୊4. selectͷdefault஋͕html͔ΒࢦఆͰ͖ͳ͍ HTML “selected”ଐੑΛ෇༩͢Ε͹Α͔͕ͬͨɺɺ ෇༩Ͱ͖ͳ͍ʢoptions=“”Λ࢖༻ͤͣʹoptionΛҰͭͣͭॻ͍ͨ৔߹΋ಉ༷ʣ

16. ໰୊4. selectͷdefault஋͕html͔ΒࢦఆͰ͖ͳ͍ [ղܾࡦ] ؆୯ɻ୯७ʹɺv-modelͷ஋ʹॳظ஋Λ΋ͨͤͯ΍Ε͹ྑ͍
17. ·ͱΊ • Vue.js͸ɺ࣮૷͕γϯϓϧͳׂʹ൚༻ੑ͕ߴ͍ɻ • ॳΊͷࠒʹͿ͔ͭͬͨ໰୊΋ຊ೔঺հͨ͠Ґͷ͍ܰ΋ͷͰɺ׳Εͯ͠·͑ ͹ॻ͖΍͍͢ɻ • ࣍ͷόʔδϣϯָ͕͠Έɻ
18. ࠷ޙʹগ͠એ఻
19. גࣜձࣾϓϨΠυͰ͸ɺ ΤϯδχΞΛืूதͰ͢ʂ
20. Thank you! Yohei Noda @positiveflat