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

Slide 1

Slide 1 text

Vue.jsΛ਺ϲ݄࢖ͬͯΈͯૺ۰ͨ͠໰୊ͱͦͷղܾࡦ Data Binding JS Night  ʙσʔλόΠϯσΟϯάͳΜͰ΋LTେձ@LINEΦϑΟεʙ גࣜձࣾϓϨΠυ Yohei Noda @positiveﬂat 2015/05/27 https://plaid.co.jp/

Slide 2

Slide 2 text

ࣗݾ঺հ ໊લ: Yohei Noda  ॴଐ: גࣜձࣾϓϨΠυ  twitter: @positiveﬂat 2014೥12݄ʹIBMΛୀ৬  2015೥1݄ΑΓגࣜձࣾϓϨΠυʹjoin  ϦΞϧλΠϜWeb઀٬πʔϧ ͷ։ൃʢओʹϑϩϯτΤ ϯυʣ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

͔֬ʹͦ͏Ͱ͕ͨ͠ɺ ࡉ͔͍໰୊ʹͿ͔ͭΓ·ͨ͠ɻ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

໰୊3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍ [ղܾࡦ]  ؆୯ͳΞΫηεͷํ๏͕ͳ͍ͷͰɺ  computedͰoptionsͷarrayͷத͔ΒஞҰݕࡧ͢Δ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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