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
590
computed のすゝめ
mi
January 30, 2019
Tweet
Share
More Decks by mi
See All by mi
Switchbot で人生をチョット豊かに。
mi
0
70
自己紹介
mi
0
330
あの素晴らしい猫の本
mi
0
1k
作業効率がアップする アプリ紹介
mi
0
110
脱FTP!一瞬でS3にファイル転送
mi
0
630
git
mi
0
59
Other Decks in Programming
See All in Programming
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
520
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
What We Can Learn From OSS
inouehi
0
420
Netty Chicago Java User Group 2024-04-17
sullis
0
170
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.1k
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
360
PHPはいつから死んでいるかの調査
chiroruxx
1
370
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
260
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
160
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
270
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
ゆるい個人開発のススメ
kuroppe1819
10
980
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Practical Orchestrator
shlominoach
181
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
How GitHub (no longer) Works
holman
304
140k
KATA
mclloyd
14
12k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Docker and Python
trallard
33
2.7k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
How STYLIGHT went responsive
nonsquared
92
4.8k
In The Pink: A Labor of Love
frogandcode
138
21k
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!