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
630
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
780
git
mi
0
73
Other Decks in Programming
See All in Programming
速いWebフレームワークを作る
yusukebe
5
1.7k
Design Foundational Data Engineering Observability
sucitw
3
200
はじめてのMaterial3 Expressive
ym223
2
740
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
280
Swift Updates - Learn Languages 2025
koher
2
480
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.2k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
1.7k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Being A Developer After 40
akosma
90
590k
Agile that works and the tools we love
rasmusluckow
330
21k
Six Lessons from altMBA
skipperchong
28
4k
Statistics for Hackers
jakevdp
799
220k
Scaling GitHub
holman
463
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Context Engineering - Making Every Token Count
addyosmani
3
48
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
KATA
mclloyd
32
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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!