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
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
89
30k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Discover Metal 4
rei315
2
140
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
830
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
520
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
200
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
What's in a price? How to price your products and services
michaelherold
246
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Visualization
eitanlees
146
16k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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