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
440
プレイドにおけるプロダクトの国際化の取り組み | 野田 陽平 PLAID, Inc
positiveflat
6
2.8k
CXプラットフォームKARTEのプロダクト改善
positiveflat
1
1.3k
KARTEを支えるCI環境
positiveflat
1
2k
Other Decks in Programming
See All in Programming
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
CSC307 Lecture 08
javiergs
PRO
0
330
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
【Go言語】golangci-lintの使い方
tomo1227
0
280
유연한 Composable 설계
l2hyunwoo
0
380
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Featured
See All Featured
Happy Clients
brianwarren
94
6.6k
Music & Morning Musume
bryan
43
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Documentation Writing (for coders)
carmenintech
63
4.2k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
What the flash - Photography Introduction
edds
65
11k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Being A Developer After 40
akosma
72
580k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
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