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

Transcript

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