computed のすゝめ

Transcript

1. Computed ͷ͢ʍΊ 2019/01/30 @mi
2. ͸͡Ί·ͯ͠
3. ΑΖ͓͘͠ئ͍͠·͢ɻ • ෱Ԭݝࡏॅ • ϑϩϯτΤϯυΤϯδχΞ
 - Web/UI σβΠφʔ͔ΒδϣϒνΣϯδ • ༉ͦ͹ɾ೑೑͏ͲΜ޷͖ • ݘ೿ • ਓݟ஌Γ(((( ʀƅЧƅ)))ŜƄŞŜƄŞŲƄ

4. ࠙਌ձͳͲ
 
 ͓࿩
 ͠·͠ΐ͏
5. ࠓ೔͓࿩͢Δ͜ͱ Vue Night #02
6. • computedͱ͸ • ͜Μͳॻ͖ํͯ͠ͳ͍ʁ • computed ͍͢͝ ͓඼ॻ͖
7. • Vue.js ॳ৺ऀ • λʔήοτ
8. computed ͱ͸ ίϯϐϡʔςουɹαϯγϡπϓϩύςΟ
9. computed • Vue.jsͷࢉग़ϓϩύςΟ • ࣄલʹܭࢉ΍Ճ޻͞Εͨ஋ΛࢀরͰ͖Δ • ґଘؔ܎ʹ΋ͱ͖ͮΩϟογϡ͞ΕΔ
 ґଘ͢Δ΋ͷ͕ߋ৽͞ΕΔ·Ͱແବͳ࣮ߦ͕ͳ͍ • ಛఆͷঢ়ଶΛม਺ͱͯ͠ѻ͍͍ͨ৔߹ʹ༗ޮ
10. Ҿ༻ݩ: ެࣜυΩϡϝϯτ
11. Ϩϕϧ01 ίϯφॻΩํγςϚηϯΧʁ
12. propsͰड͚औͬͨ஋Ͱ ը૾ͷύε΍URLΛܾఆ͢ΔΑ͏ͳ ෼ذύλʔϯ computed vs method
13. propsͰड͚औͬͨ஋Λݩʹ mountedޙʹmethodsͰܭࢉ͠
 srcͷ஋Λܾఆ͍ͯ͠Δ small medium 24px 24px 64px 64px
14. ௕͍ʂ(ಡΉͷͩΔ͍) ௚ײతʹཧղͮ͠Β͍
15. Simple!
16. ஋ͷ෼ذ͸computedͰ ແବʹdataʹม਺Λੜ΍͞ͳ͍ɻ
17. มԽ͢Δ஋͸ computedͰಈతʹࢉग़͠Α͏ʂ Ϩϕϧ01 ·ͱΊ
18. Ϩϕϧ02 ίϯφॻΩํγςϚηϯΧʁ
19. ঢ়ଶͷมߋΛ ؂ࢹϓϩύςΟ (watch)Ͱߦ͍ͬͯΔύλʔϯ
20. countNum͸ϘλϯΛԡ͢ͱ 0͔ΒΧ΢ϯτΞοϓ͍͖ͯ͠ɺ 10Λ௒͑Δͱ 
 fuga ͕ fuga change!!!͢Δྫ
21. ͜Ε΋ computed Ͱ ॻ͖׵͑ΒΕΔʂ
23. fuga ͷॲཧ ͚ͩ͜͜ݟ͓͚ͯ͹ σʔλͷಈ͖͕෼͔Δ computedͷέʔε
24. fuga ͷॲཧ ίʔυ͕ࢄΒ͹Γ͕ͪ fugaΛશͯ௥͍͖ΕΔ·Ͱ ਺ඵ͔͔Δ watchͷέʔε
25. # computed ͷྑ͍ͱ͜Ζ σʔλͷಈ͖͕୯ํ޲ 
 ʢނʹίʔυ͕γϯϓϧʹͳΓ΍͍͢ʣ ಡΈ΍͢͞ͷൿ݃͸ computed ʹ༗Γ͚Γ Ϩϕϧ02 ·ͱΊ
26. ॲཧ͕ෳࡶʹͳΓ͕ͪͳwatch΋ɺ computed Ͱ୅༻Ͱ͖Δʢέʔε༗Γʣɻ
 ·ͣ͸ computed Ͱॻ͚ͳ͍͔ݕ౼͠Α͏ʂ ⚠ Ͳ͏ͯ͠΋watchΛ࢖Θͳ͍ͱ͍͚ͳ͍ύλʔϯΛআ͘ Ϩϕϧ02 ·ͱΊ
27. Ϩϕϧ03 ίϯϐϡʔςουοςεΰΠʂ
28. API͔Βฦ͖ͬͯͨϨεϙϯεʢ঎඼ϦετʣΛ ը໘ʹදࣔ͠ɺϢʔβ͕ಛఆͷ঎඼Λબ୒ͨ͠ঢ়ଶΛ อ࣋ͭͭ͠ɺ( ϖʔδભҠˍϒϥ΢βόοάͯ͠΋ ) ը໘ʹબ୒ঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ
29. API͔Βฦ͖ͬͯͨϨεϙϯεʢ঎඼ϦετʣΛ ը໘ʹදࣔ͠ɺϢʔβ͕ಛఆͷ঎඼Λબ୒ͨ͠ঢ়ଶΛ อ࣋ͭͭ͠ɺ( ϖʔδભҠˍϒϥ΢βόοάͯ͠΋ ) ը໘ʹબ୒ঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ ͜Μͳը໘
30. ᶃ API͔Βฦ͖ͬͯͨϨεϙϯεʢ঎඼ϦετʣΛը໘ʹදࣔ ᶄ Ϣʔβ͕ಛఆͷ঎඼Λબ୒ͨ͠ঢ়ଶΛอ࣋ ᶅ ϖʔδભҠˍϒϥ΢βόοάͯ͠΋ ը໘ʹબ୒ঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ
31. ᶃ API͔Βฦ͖ͬͯͨϨεϙϯεʢ঎඼ϦετʣΛը໘ʹදࣔ ᶄ Ϣʔβ͕ಛఆͷ঎඼Λબ୒ͨ͠ঢ়ଶΛอ࣋ 
 
 
 
 
 ᶅ ϖʔδભҠˍϒϥ΢βόοάͯ͠΋ ը໘ʹબ୒ঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ -> v-for Ͱճ͚ͩ͢ɻ؆୯ʂ -> data ͷ selectedItems ͱ͔ʹ ঎඼IDΛ֨ೲ͍ͯ͘͠,,, 
 બ୒ͨ͠঎඼͕طʹબ୒ࡁΈϦετʹଘࡏ͍ͯͨ͠৔߹͸ ɺ
 selectedItems ͔Β֎ͤ͹ྑͦ͞͏ʂ -> Vuex ͰରԠͰ͖ͦ͏ɻ
 Ϧϩʔυͯ͠΋อ͍࣋ͨ͠ͳΒ IndexDB Λ࢖༻͢Δʂ
32. Α͠ɺ͍͚Δʂ(ʆŋωŋ´)
33. ը໘ʹදࣔ͢ΔϨεϙϯεΛ itemsʹ֨ೲɻ v-forͰճ͠ɺ
 ΫϦοΫΠϕϯτΛ෇༩ɻ view ͸ͬ͘͟Γ͜Μͳײ͡
34. ঎඼Λબ୒ͨ͠Β ( બ୒ࡁΈ͔Ͳ͏͔֬ೝ ) Vuexͷબ୒ࡁΈϦετʹ௥Ճ / ࡟আ Vuex item.id 1 item.id 3 selectedItemIds [2, 3] item.id 2
35. ը໘ʹ঎඼ϦετΛฒ΂ͨ
36. બ୒ࡁΈͷ঎඼Ϧετid΋ อ࣋͢Δ͜ͱ͕Ͱ͖ͨ
37. Ͱɾɾɾʁ
38. Ͳ͏΍ͬͯviewͰද͍ࣔͯ͠Δ ঎඼Ϧετʹ બ୒ঢ়ଶΛ൓өͤ͞Δͷʁ
39. ͑ɾɾɾʁ
40. ྑ͍࣮૷ํ๏͕ࢥ͍ු͔͹ͣ
41. ೰Ή͜ͱ2࣌ؒ
42. ͳΜͷ੒Ռ΋ ͋͛ΒΕ·ͤΜͰͨ͠ (´ɾωɾʆ)
43. ؼ୐
44. (´ɾωɾʆ)
46. mya-ake mi ΤϯδχΞྺ ໿6೥ ʢ୴ಹࢯʣ ΤϯδχΞྺ ໿1೥ ʢকདྷχʔτʹͳΓ͍ͨՇࢯʣ ؼ୐ޙͱ͋ΔΤϯδχΞ
 ෉්ͷձ࿩
47. ୴ಹࢯʙ(´ɾωɾʆ) ͳΜͩͶɻ ͔͔͔͔̺͘͘͠͡djwoidqwp(´ɾωɾʆ) dataͱStoreͰ΍Δͱ͜·ͰɺͰ͖ͨͷͶ ͳΔ΄Ͳɻ( ෺෼Γͷྑ͍ೣ) ͦΕͰͦΕͰɺ બ୒ࡁΈͷঢ়ଶΛը໘ʹ൓ө͢Δྑ͍ํ๏ͳΜ͔ͳ͍Ͱ͔͢ʁ
48. computed Ͱબ୒ࡁ item.id ͱ item Λൺֱͯ͠දࣔ༻ͷ item ͷϦετΛ࡞Δ ͦͯ͠දࣔ༻ʹࢉग़ͨ͠ϦετΛ v-forͰը໘ʹදࣔɻ ͦΕͰग़དྷΔͧɻ ΤϯδχΞྺ ໿6೥ ʢझຯ͸Ξχϝͱອըͷ୴ಹࢯʣ
49. ΤϯδχΞྺ ໿6೥ ʢ޷͖ͳ৯΂෺͸τϚτͷ୴ಹࢯʣ
50. computed ͬͯ ͦΜͳ࢖͍ํͰ͖Δͷʂʁ ͦ͜ʹͨͲΓண͔ͳ͔ͬͨɾɾɾ ΤϯδχΞྺ ໿1೥ ʢಛٕ͸12࣌ؒਭ຾ Շࢯʣ
51. બ୒ࡁ item.id ͱ item Λ ͚ͬͭͯ͘ දࣔ༻ͷ item Ϧετ displayItems Λ computed Ͱ࡞੒ʂ v-forͰճͯ͠ޙ͸ಉ͡ɻ
52. computed ಛఆͷঢ়ଶΛม਺ͱ͠ ͯѻ͍͍ͨ৔߹ʹ༗ޮ computed ແ͠Ͱ͸ੜ͖͍͚ͯ·ͤΜΘɾɾɾ Ϩϕϧ03 ·ͱΊ
53. computed ·ͱΊ • Vue.jsͷࢉग़ϓϩύςΟ • ࣄલʹܭࢉ΍Ճ޻͞Εͨ஋ΛࢀরͰ͖Δ • ґଘؔ܎ʹ΋ͱ͖ͮΩϟογϡ͞ΕΔ
 ґଘ͢Δ΋ͷ͕ߋ৽͞ΕΔ·Ͱແବͳ࣮ߦ͕ͳ͍ • ಛఆͷঢ়ଶΛม਺ͱͯ͠ѻ͍͍ͨ৔߹ʹ༗ޮ
54. ͓·͚ ΤϯδχΞྺ ໿6೥ ʢओ৯͸ Uber Eats ୴ಹࢯʣ • ΋͏͙͢ϑϦʔϥϯεʹͳΔ • ࢓ࣄͷग़དྷΔWebΤϯδχΞ • ͓࢓ࣄ͍͋͛ͯͩ͘͞ • εϚϒϥϑϨϯζืूத • Twitter: @mya_ake
55. Thank you for your kind attention!