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
computed のすゝめ
Search
mi
January 30, 2019
Programming
2
620
computed のすゝめ
mi
January 30, 2019
Tweet
Share
More Decks by mi
See All by mi
Switchbot で人生をチョット豊かに。
mi
0
180
自己紹介
mi
0
360
あの素晴らしい猫の本
mi
0
1.2k
作業効率がアップする アプリ紹介
mi
0
120
脱FTP!一瞬でS3にファイル転送
mi
0
770
git
mi
0
72
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
0
280
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
480
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Select API from Kotlin Coroutine
jmatsu
1
190
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
170
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
290
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
VS Code Update for GitHub Copilot
74th
1
310
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Transcript
Computed ͷ͢ʍΊ 2019/01/30 @mi
͡Ί·ͯ͠
ΑΖ͓͘͠ئ͍͠·͢ɻ • Ԭݝࡏॅ • ϑϩϯτΤϯυΤϯδχΞ - Web/UI σβΠφʔ͔ΒδϣϒνΣϯδ • ༉ͦɾ͏ͲΜ͖
• ݘ • ਓݟΓ(((( ʀƅЧƅ)))ŜƄŞŜƄŞŲƄ
࠙ձͳͲ ͓ ͠·͠ΐ͏
ࠓ͓͢Δ͜ͱ Vue Night #02
• computedͱ • ͜Μͳॻ͖ํͯ͠ͳ͍ʁ • computed ͍͢͝ ͓ॻ͖
• Vue.js ॳ৺ऀ • λʔήοτ
computed ͱ ίϯϐϡʔςουɹαϯγϡπϓϩύςΟ
computed • Vue.jsͷࢉग़ϓϩύςΟ • ࣄલʹܭࢉՃ͞ΕͨΛࢀরͰ͖Δ • ґଘؔʹͱ͖ͮΩϟογϡ͞ΕΔ ґଘ͢Δͷ͕ߋ৽͞ΕΔ·Ͱແବͳ࣮ߦ͕ͳ͍ • ಛఆͷঢ়ଶΛมͱͯ͠ѻ͍͍ͨ߹ʹ༗ޮ
Ҿ༻ݩ: ެࣜυΩϡϝϯτ
Ϩϕϧ01 ίϯφॻΩํγςϚηϯΧʁ
propsͰड͚औͬͨͰ ը૾ͷύεURLΛܾఆ͢ΔΑ͏ͳ ذύλʔϯ computed vs method
propsͰड͚औͬͨΛݩʹ mountedޙʹmethodsͰܭࢉ͠ srcͷΛܾఆ͍ͯ͠Δ small medium 24px 24px 64px 64px
͍ʂ(ಡΉͷͩΔ͍) ײతʹཧղͮ͠Β͍
Simple!
ͷذcomputedͰ ແବʹdataʹมΛੜ͞ͳ͍ɻ
มԽ͢Δ computedͰಈతʹࢉग़͠Α͏ʂ Ϩϕϧ01 ·ͱΊ
Ϩϕϧ02 ίϯφॻΩํγςϚηϯΧʁ
ঢ়ଶͷมߋΛ ࢹϓϩύςΟ (watch)Ͱߦ͍ͬͯΔύλʔϯ
countNumϘλϯΛԡ͢ͱ 0͔ΒΧϯτΞοϓ͍͖ͯ͠ɺ 10Λ͑Δͱ fuga ͕ fuga change!!!͢Δྫ
͜Ε computed Ͱ ॻ͖͑ΒΕΔʂ
None
fuga ͷॲཧ ͚ͩ͜͜ݟ͓͚ͯ σʔλͷಈ͖͕͔Δ computedͷέʔε
fuga ͷॲཧ ίʔυ͕ࢄΒΓ͕ͪ fugaΛશ͍͖ͯΕΔ·Ͱ ඵ͔͔Δ watchͷέʔε
# computed ͷྑ͍ͱ͜Ζ σʔλͷಈ͖͕୯ํ ʢނʹίʔυ͕γϯϓϧʹͳΓ͍͢ʣ ಡΈ͢͞ͷൿ݃ computed ʹ༗Γ͚Γ Ϩϕϧ02
·ͱΊ
ॲཧ͕ෳࡶʹͳΓ͕ͪͳwatchɺ computed Ͱ༻Ͱ͖Δʢέʔε༗Γʣɻ ·ͣ computed Ͱॻ͚ͳ͍͔ݕ౼͠Α͏ʂ ⚠ Ͳ͏ͯ͠watchΛΘͳ͍ͱ͍͚ͳ͍ύλʔϯΛআ͘ Ϩϕϧ02 ·ͱΊ
Ϩϕϧ03 ίϯϐϡʔςουοςεΰΠʂ
API͔Βฦ͖ͬͯͨϨεϙϯεʢϦετʣΛ ը໘ʹදࣔ͠ɺϢʔβ͕ಛఆͷΛબͨ͠ঢ়ଶΛ อ࣋ͭͭ͠ɺ( ϖʔδભҠˍϒϥβόοάͯ͠ ) ը໘ʹબঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ
API͔Βฦ͖ͬͯͨϨεϙϯεʢϦετʣΛ ը໘ʹදࣔ͠ɺϢʔβ͕ಛఆͷΛબͨ͠ঢ়ଶΛ อ࣋ͭͭ͠ɺ( ϖʔδભҠˍϒϥβόοάͯ͠ ) ը໘ʹબঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ ͜Μͳը໘
ᶃ API͔Βฦ͖ͬͯͨϨεϙϯεʢϦετʣΛը໘ʹදࣔ ᶄ Ϣʔβ͕ಛఆͷΛબͨ͠ঢ়ଶΛอ࣋ ᶅ ϖʔδભҠˍϒϥβόοάͯ͠ ը໘ʹબঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ
ᶃ API͔Βฦ͖ͬͯͨϨεϙϯεʢϦετʣΛը໘ʹදࣔ ᶄ Ϣʔβ͕ಛఆͷΛબͨ͠ঢ়ଶΛอ࣋ ᶅ
ϖʔδભҠˍϒϥβόοάͯ͠ ը໘ʹબঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ -> v-for Ͱճ͚ͩ͢ɻ؆୯ʂ -> data ͷ selectedItems ͱ͔ʹ IDΛ֨ೲ͍ͯ͘͠,,, બ͕ͨ͠طʹબࡁΈϦετʹଘࡏ͍ͯͨ͠߹ ɺ selectedItems ͔Β֎ͤྑͦ͞͏ʂ -> Vuex ͰରԠͰ͖ͦ͏ɻ Ϧϩʔυͯ͠อ͍࣋ͨ͠ͳΒ IndexDB Λ༻͢Δʂ
Α͠ɺ͍͚Δʂ(ʆŋωŋ´)
ը໘ʹදࣔ͢ΔϨεϙϯεΛ itemsʹ֨ೲɻ v-forͰճ͠ɺ ΫϦοΫΠϕϯτΛ༩ɻ view ͬ͘͟Γ͜Μͳײ͡
Λબͨ͠Β ( બࡁΈ͔Ͳ͏͔֬ೝ ) VuexͷબࡁΈϦετʹՃ / আ Vuex item.id 1
item.id 3 selectedItemIds [2, 3] item.id 2
ը໘ʹϦετΛฒͨ
બࡁΈͷϦετid อ࣋͢Δ͜ͱ͕Ͱ͖ͨ
Ͱɾɾɾʁ
Ͳ͏ͬͯviewͰද͍ࣔͯ͠Δ Ϧετʹ બঢ়ଶΛөͤ͞Δͷʁ
͑ɾɾɾʁ
ྑ͍࣮ํ๏͕ࢥ͍ු͔ͣ
Ή͜ͱ2࣌ؒ
ͳΜͷՌ ͋͛ΒΕ·ͤΜͰͨ͠ (´ɾωɾʆ)
ؼ
(´ɾωɾʆ)
None
mya-ake mi ΤϯδχΞྺ 6 ʢ୴ಹࢯʣ ΤϯδχΞྺ 1 ʢকདྷχʔτʹͳΓ͍ͨՇࢯʣ ؼޙͱ͋ΔΤϯδχΞ ්ͷձ
୴ಹࢯʙ(´ɾωɾʆ) ͳΜͩͶɻ ͔͔͔͔̺͘͘͠͡djwoidqwp(´ɾωɾʆ) dataͱStoreͰΔͱ͜·ͰɺͰ͖ͨͷͶ ͳΔ΄Ͳɻ( Γͷྑ͍ೣ) ͦΕͰͦΕͰɺ બࡁΈͷঢ়ଶΛը໘ʹө͢Δྑ͍ํ๏ͳΜ͔ͳ͍Ͱ͔͢ʁ
computed Ͱબࡁ item.id ͱ item Λൺֱͯ͠දࣔ༻ͷ item ͷϦετΛ࡞Δ ͦͯ͠දࣔ༻ʹࢉग़ͨ͠ϦετΛ v-forͰը໘ʹදࣔɻ
ͦΕͰग़དྷΔͧɻ ΤϯδχΞྺ 6 ʢझຯΞχϝͱອըͷ୴ಹࢯʣ
ΤϯδχΞྺ 6 ʢ͖ͳ৯τϚτͷ୴ಹࢯʣ
computed ͬͯ ͦΜͳ͍ํͰ͖Δͷʂʁ ͦ͜ʹͨͲΓண͔ͳ͔ͬͨɾɾɾ ΤϯδχΞྺ 1 ʢಛٕ12࣌ؒਭ Շࢯʣ
બࡁ item.id ͱ item Λ ͚ͬͭͯ͘ දࣔ༻ͷ item Ϧετ displayItems
Λ computed Ͱ࡞ʂ v-forͰճͯ͠ޙಉ͡ɻ
computed ಛఆͷঢ়ଶΛมͱ͠ ͯѻ͍͍ͨ߹ʹ༗ޮ computed ແ͠Ͱੜ͖͍͚ͯ·ͤΜΘɾɾɾ Ϩϕϧ03 ·ͱΊ
computed ·ͱΊ • Vue.jsͷࢉग़ϓϩύςΟ • ࣄલʹܭࢉՃ͞ΕͨΛࢀরͰ͖Δ • ґଘؔʹͱ͖ͮΩϟογϡ͞ΕΔ ґଘ͢Δͷ͕ߋ৽͞ΕΔ·Ͱແବͳ࣮ߦ͕ͳ͍ •
ಛఆͷঢ়ଶΛมͱͯ͠ѻ͍͍ͨ߹ʹ༗ޮ
͓·͚ ΤϯδχΞྺ 6 ʢओ৯ Uber Eats ୴ಹࢯʣ • ͏͙͢ϑϦʔϥϯεʹͳΔ •
ࣄͷग़དྷΔWebΤϯδχΞ • ͓ࣄ͍͋͛ͯͩ͘͞ • εϚϒϥϑϨϯζืूத • Twitter: @mya_ake
Thank you for your kind attention!