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

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

Transcript

1. Vue.jsΛ਺ϲ݄࢖ͬͯΈͯૺ۰ͨ͠໰୊ͱͦͷղܾࡦ
   Data Binding JS Night

   ʙσʔλόΠϯσΟϯάͳΜͰ΋LTେձ@LINEΦϑΟεʙ
   גࣜձࣾϓϨΠυ
   Yohei Noda @positiveflat
   2015/05/27
   https://plaid.co.jp/
   

   View Slide

2. ࣗݾ঺հ
   ໊લ: Yohei Noda

   ॴଐ: גࣜձࣾϓϨΠυ

   twitter: @positiveflat
   2014೥12݄ʹIBMΛୀ৬

   2015೥1݄ΑΓגࣜձࣾϓϨΠυʹjoin

   ϦΞϧλΠϜWeb઀٬πʔϧ ͷ։ൃʢओʹϑϩϯτΤ
   ϯυʣ
   

   View Slide

3. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ
   • ΠϯλϥΫςΟϒwebΠϯλʔϑΣʔεΛߏங͢ΔͨΊͷMVVM(Model, View,
   ViewModel) ΫϥΠΞϯτϑϨʔϜϫʔΫ
   • ૒ํ޲σʔλόΠϯσΟϯά
   • σΟϨΫςΟϒͱͯ͠ɺDOMͷॲཧΛΧελϚΠζͯ͠ఏڙͰ͖Δɻ
   • σʔλͷఆٛ΍DOMͷߏஙͳͲΛ·ͱΊͯɺͦͷ෦඼Λίϯϙʔωϯτͱͯ͠࡞੒
   ͢Δ͜ͱ͕Ͱ͖Δɻ
   • ܰྔ
   • γϯϓϧͰֶशίετ͕௿͍
   • ͨͩ͠…ES5४ڌͷϒϥ΢βαϙʔτΛલఏͱ͍ͯ͠ΔͷͰɺIE8͸αϙʔτ֎
   

   View Slide

4. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ
   • el
   • data
   • compiled
   • ready
   • methods
   …
   

   View Slide

5. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ
   HTML
   {{hoge}}ͷΑ͏ͳه๏Ͱ $data ҎԼͷϓϩύςΟʹΞΫηεՄೳ
   

   View Slide

6. ʮγϯϓϧͰ৭ʑ؆୯ʹ࡞Εָͯͦ͠͏ɻʯ
   Vue.jsͷ࠷ॳͷҹ৅
   

   View Slide

7. ͔֬ʹͦ͏Ͱ͕ͨ͠ɺ
   ࡉ͔͍໰୊ʹͿ͔ͭΓ·ͨ͠ɻ
   

   View Slide

8. ໰୊1. $dataʹ஋Λ଍ͯ͠΋มߋ͕ݕ஌͞Εͳ͍
   HTML
   

   JavaScript
   

   View Slide

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.”
   

   View Slide

10. ໰୊1. $dataʹ஋Λ଍ͯ͠΋มߋ͕ݕ஌͞Εͳ͍
    [ৄࡉ]

    Vue.js 0.11.*͸ECMAScript 5४ڌͷϒϥ΢βΛαϙʔτ͍ͯ͠ΔͷͰɺObject
    ʹ஋͕௥Ճ͞Εͯ΋ݕ஌͞Εͳ͍ɻ௨ৗ͸$dataͷԼͷϓϩύςΟʹgetter/
    setterΛ෇༩͍ͯͦ͠ΕΛVue͕؂ࢹ͍ͯ͠Δ͕ɺ௚઀஋Λ௥Ճ͢Δͱ෇༩͞
    Εͳ͍ɻ͜ͷ੍໿͕ͳ͘ͳΔͱɺObject.observe()ͱ͔͕࢖͑ΔΑ͏ʹͳΔ͔
    ΋?
    # Object.observer()͸ɺมߋΛ؂ࢹͯ͠objectͷมߋཤྺΛอ࣋͢Δ͜ͱ͕Ͱ
    ͖Δ
    

    View Slide

11. ໰୊2. $dataͷԼͷσʔλ͕େ͖͘ɾਂ͘ͳΔͱ
    ٸܹʹ஗͘ͳΔ
    [ৄࡉ]
    • ໰୊1ͷ܁Γฦ͕ͩ͠ɺVue.js͸ES5४ڌͷϒϥ΢βΛαϙʔτ
    ͍ͯ͠ΔͨΊɺObject.observe()Λ࢖Θͣʹɺgetter/setterΛ؂ࢹ
    ͍ͯ͠Δɻ
    • ಺෦తʹ͸ɺ$dataͷԼʹ͋ΔObjectͷgetter, setterΛ؂ࢹͯ͠
    __proto__ҎԼΛॻ͖׵͍͑ͯΔɻ
    • Αͬͯɺ$dataͷԼͷ஋͕มΘΔ͚ͩͰɺେྔͷ__proto__Λॻ͖
    ׵͑Δ͜ͱʹͳΔͨΊ஗͘ͳΔɻ
    

    View Slide

12. ໰୊2. $dataͷԼͷσʔλ͕େ͖͘ɾਂ͘ͳΔͱ
    ٸܹʹ஗͘ͳΔ
    ͱ͍͏͜ͱͰɺ
    $dataҎԼ͸Ͱ͖Δ͚ͩܰͨ͘͠΄͏͕Αͦ͞͏ɻ
    

    View Slide

13. ໰୊3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍
    • JavaScript
    • html …valueͰ͸ͳ͘ɺtextͷ”໨ࠇ۠”΍”ौ୩۠”Λද͍ࣔͨ͠

    

    View Slide

14. ໰୊3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍
    [ղܾࡦ]

    ؆୯ͳΞΫηεͷํ๏͕ͳ͍ͷͰɺ

    computedͰoptionsͷarrayͷத͔ΒஞҰݕࡧ͢Δ
    

    View Slide

15. ໰୊4. selectͷdefault஋͕html͔ΒࢦఆͰ͖ͳ͍
    HTML
    “selected”ଐੑΛ෇༩͢Ε͹Α͔͕ͬͨɺɺ
    ෇༩Ͱ͖ͳ͍ʢoptions=“”Λ࢖༻ͤͣʹoptionΛҰͭͣͭॻ͍ͨ৔߹΋ಉ༷ʣ

    

    View Slide

16. ໰୊4. selectͷdefault஋͕html͔ΒࢦఆͰ͖ͳ͍
    [ղܾࡦ]
    ؆୯ɻ୯७ʹɺv-modelͷ஋ʹॳظ஋Λ΋ͨͤͯ΍Ε͹ྑ͍
    

    View Slide

17. ·ͱΊ
    • Vue.js͸ɺ࣮૷͕γϯϓϧͳׂʹ൚༻ੑ͕ߴ͍ɻ
    • ॳΊͷࠒʹͿ͔ͭͬͨ໰୊΋ຊ೔঺հͨ͠Ґͷ͍ܰ΋ͷͰɺ׳Εͯ͠·͑
    ͹ॻ͖΍͍͢ɻ
    • ࣍ͷόʔδϣϯָ͕͠Έɻ
    

    View Slide

18. ࠷ޙʹগ͠એ఻
    

    View Slide

19. גࣜձࣾϓϨΠυͰ͸ɺ
    ΤϯδχΞΛืूதͰ͢ʂ
    

    View Slide

20. Thank you!
    Yohei Noda @positiveflat
    

    View Slide