Upgrade to Pro — share decks privately, control downloads, hide ads and more …

computed のすゝめ

E045b8ca5da3e15aae93989d878f626a?s=47 mi
January 30, 2019

computed のすゝめ

E045b8ca5da3e15aae93989d878f626a?s=128

mi

January 30, 2019
Tweet

More Decks by mi

Other Decks in Programming

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 Ͱ ॻ͖׵͑ΒΕΔʂ

  22. None
  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. (´ɾωɾʆ)

  45. None
  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!