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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
mi
January 30, 2019
Programming
660
2
Share
computed のすゝめ
mi
January 30, 2019
More Decks by mi
See All by mi
Switchbot で人生をチョット豊かに。
mi
0
200
自己紹介
mi
0
370
あの素晴らしい猫の本
mi
0
1.2k
作業効率がアップする アプリ紹介
mi
0
130
脱FTP!一瞬でS3にファイル転送
mi
0
800
git
mi
0
76
Other Decks in Programming
See All in Programming
生成 AI 時代のスナップショットテストってやつを見せてあげますよ(α版)
ojun9
0
330
Nuxt Server Components
wattanx
0
230
KagglerがMixSeekを触ってみた
morim
0
360
「速くなった気がする」をデータで疑う
senleaf24
0
130
CS教育のDX AIによる育成の効率化
niftycorp
PRO
0
180
Redox OS でのネームスペース管理と chroot の実現
isanethen
0
500
おれのAgentic Coding 2026/03
tsukasagr
1
120
RailsのValidatesをSwift Macrosで再現してみた
hokuron
0
150
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
manfredsteyer
PRO
0
210
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
masasuzu
0
270
PHPで TLSのプロトコルを実装してみる
higaki_program
0
730
AI活用のコスパを最大化する方法
ochtum
0
370
Featured
See All Featured
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
130
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Rails Girls Zürich Keynote
gr2m
96
14k
Everyday Curiosity
cassininazir
0
180
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
140
How to make the Groovebox
asonas
2
2.1k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
New Earth Scene 8
popppiees
2
2k
Music & Morning Musume
bryan
47
7.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
120
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
160
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!