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.4k
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
640
プレイドにおけるプロダクトの国際化の取り組み | 野田 陽平 PLAID, Inc
positiveflat
6
3k
CXプラットフォームKARTEのプロダクト改善
positiveflat
1
1.4k
KARTEを支えるCI環境
positiveflat
1
2.2k
Other Decks in Programming
See All in Programming
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
効率的な開発手段として VRTを活用する
ishkawa
0
140
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Team operations that are not burdened by SRE
kazatohiei
1
310
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Is Xcode slowly dying out in 2025?
uetyo
1
280
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
15
5.8k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
910
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Music & Morning Musume
bryan
46
6.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Statistics for Hackers
jakevdp
799
220k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Code Reviewing Like a Champion
maltzj
524
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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