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
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Improving my own Ruby thereafter
sisshiki1969
1
160
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
170
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
API Platform 4.2: Redefining API Development
soyuka
0
160
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
Kiroで始めるAI-DLC
kaonash
2
630
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
253
25k
Speed Design
sergeychernyshev
32
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building Applications with DynamoDB
mza
96
6.6k
Context Engineering - Making Every Token Count
addyosmani
3
62
Producing Creativity
orderedlist
PRO
347
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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!