computed のすゝめ - Speaker Deck

computed のすゝめ

by mi

Slide 1

Slide 1 text

Computed ͷ͢ʍΊ 2019/01/30 @mi

Slide 2

Slide 2 text

͸͡Ί·ͯ͠

Slide 3

Slide 3 text

ΑΖ͓͘͠ئ͍͠·͢ɻ • ෱Ԭݝࡏॅ • ϑϩϯτΤϯυΤϯδχΞ  - Web/UI σβΠφʔ͔ΒδϣϒνΣϯδ • ༉ͦ͹ɾ೑೑͏ͲΜ޷͖ • ݘ೿ • ਓݟ஌Γ(((( ʀƅЧƅ)))ŜƄŞŜƄŞŲƄ 

Slide 4

Slide 4 text

࠙਌ձͳͲ    ͓࿩  ͠·͠ΐ͏

Slide 5

Slide 5 text

ࠓ೔͓࿩͢Δ͜ͱ Vue Night #02

Slide 6

Slide 6 text

• computedͱ͸ • ͜Μͳॻ͖ํͯ͠ͳ͍ʁ • computed ͍͢͝ ͓඼ॻ͖

Slide 7

Slide 7 text

• Vue.js ॳ৺ऀ • λʔήοτ

Slide 8

Slide 8 text

computed ͱ͸ ίϯϐϡʔςουɹαϯγϡπϓϩύςΟ

Slide 9

Slide 9 text

computed • Vue.jsͷࢉग़ϓϩύςΟ • ࣄલʹܭࢉ΍Ճ޻͞Εͨ஋ΛࢀরͰ͖Δ • ґଘؔ܎ʹ΋ͱ͖ͮΩϟογϡ͞ΕΔ  ґଘ͢Δ΋ͷ͕ߋ৽͞ΕΔ·Ͱແବͳ࣮ߦ͕ͳ͍ • ಛఆͷঢ়ଶΛม਺ͱͯ͠ѻ͍͍ͨ৔߹ʹ༗ޮ

Slide 10

Slide 10 text

Ҿ༻ݩ: ެࣜυΩϡϝϯτ

Slide 11

Slide 11 text

Ϩϕϧ01 ίϯφॻΩํγςϚηϯΧʁ

Slide 12

Slide 12 text

propsͰड͚औͬͨ஋Ͱ ը૾ͷύε΍URLΛܾఆ͢ΔΑ͏ͳ ෼ذύλʔϯ computed vs method

Slide 13

Slide 13 text

propsͰड͚औͬͨ஋Λݩʹ mountedޙʹmethodsͰܭࢉ͠  srcͷ஋Λܾఆ͍ͯ͠Δ small medium 24px 24px 64px 64px

Slide 14

Slide 14 text

௕͍ʂ(ಡΉͷͩΔ͍) ௚ײతʹཧղͮ͠Β͍

Slide 15

Slide 15 text

Simple!

Slide 16

Slide 16 text

஋ͷ෼ذ͸computedͰ ແବʹdataʹม਺Λੜ΍͞ͳ͍ɻ

Slide 17

Slide 17 text

มԽ͢Δ஋͸ computedͰಈతʹࢉग़͠Α͏ʂ Ϩϕϧ01 ·ͱΊ

Slide 18

Slide 18 text

Ϩϕϧ02 ίϯφॻΩํγςϚηϯΧʁ

Slide 19

Slide 19 text

ঢ়ଶͷมߋΛ ؂ࢹϓϩύςΟ (watch)Ͱߦ͍ͬͯΔύλʔϯ

Slide 20

Slide 20 text

countNum͸ϘλϯΛԡ͢ͱ 0͔ΒΧ΢ϯτΞοϓ͍͖ͯ͠ɺ 10Λ௒͑Δͱ   fuga ͕ fuga change!!!͢Δྫ

Slide 21

Slide 21 text

͜Ε΋ computed Ͱ ॻ͖׵͑ΒΕΔʂ

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

fuga ͷॲཧ ͚ͩ͜͜ݟ͓͚ͯ͹ σʔλͷಈ͖͕෼͔Δ computedͷέʔε

Slide 24

Slide 24 text

fuga ͷॲཧ ίʔυ͕ࢄΒ͹Γ͕ͪ fugaΛશͯ௥͍͖ΕΔ·Ͱ ਺ඵ͔͔Δ watchͷέʔε

Slide 25

Slide 25 text

# computed ͷྑ͍ͱ͜Ζ σʔλͷಈ͖͕୯ํ޲   ʢނʹίʔυ͕γϯϓϧʹͳΓ΍͍͢ʣ ಡΈ΍͢͞ͷൿ݃͸ computed ʹ༗Γ͚Γ Ϩϕϧ02 ·ͱΊ

Slide 26

Slide 26 text

ॲཧ͕ෳࡶʹͳΓ͕ͪͳwatch΋ɺ computed Ͱ୅༻Ͱ͖Δʢέʔε༗Γʣɻ  ·ͣ͸ computed Ͱॻ͚ͳ͍͔ݕ౼͠Α͏ʂ ⚠ Ͳ͏ͯ͠΋watchΛ࢖Θͳ͍ͱ͍͚ͳ͍ύλʔϯΛআ͘ Ϩϕϧ02 ·ͱΊ

Slide 27

Slide 27 text

Ϩϕϧ03 ίϯϐϡʔςουοςεΰΠʂ

Slide 28

Slide 28 text

API͔Βฦ͖ͬͯͨϨεϙϯεʢ঎඼ϦετʣΛ ը໘ʹදࣔ͠ɺϢʔβ͕ಛఆͷ঎඼Λબ୒ͨ͠ঢ়ଶΛ อ࣋ͭͭ͠ɺ( ϖʔδભҠˍϒϥ΢βόοάͯ͠΋ ) ը໘ʹબ୒ঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ

Slide 29

Slide 29 text

API͔Βฦ͖ͬͯͨϨεϙϯεʢ঎඼ϦετʣΛ ը໘ʹදࣔ͠ɺϢʔβ͕ಛఆͷ঎඼Λબ୒ͨ͠ঢ়ଶΛ อ࣋ͭͭ͠ɺ( ϖʔδભҠˍϒϥ΢βόοάͯ͠΋ ) ը໘ʹબ୒ঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ ͜Μͳը໘

Slide 30

Slide 30 text

ᶃ API͔Βฦ͖ͬͯͨϨεϙϯεʢ঎඼ϦετʣΛը໘ʹදࣔ ᶄ Ϣʔβ͕ಛఆͷ঎඼Λબ୒ͨ͠ঢ়ଶΛอ࣋ ᶅ ϖʔδભҠˍϒϥ΢βόοάͯ͠΋ ը໘ʹબ୒ঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ

Slide 31

Slide 31 text

ᶃ API͔Βฦ͖ͬͯͨϨεϙϯεʢ঎඼ϦετʣΛը໘ʹදࣔ ᶄ Ϣʔβ͕ಛఆͷ঎඼Λબ୒ͨ͠ঢ়ଶΛอ࣋           ᶅ ϖʔδભҠˍϒϥ΢βόοάͯ͠΋ ը໘ʹબ୒ঢ়ଶΛอ࣋͠ଓ͚Δঢ়ଶอ࣋ύλʔϯ -> v-for Ͱճ͚ͩ͢ɻ؆୯ʂ -> data ͷ selectedItems ͱ͔ʹ ঎඼IDΛ֨ೲ͍ͯ͘͠,,,   બ୒ͨ͠঎඼͕طʹબ୒ࡁΈϦετʹଘࡏ͍ͯͨ͠৔߹͸ ɺ  selectedItems ͔Β֎ͤ͹ྑͦ͞͏ʂ -> Vuex ͰରԠͰ͖ͦ͏ɻ  Ϧϩʔυͯ͠΋อ͍࣋ͨ͠ͳΒ IndexDB Λ࢖༻͢Δʂ

Slide 32

Slide 32 text

Α͠ɺ͍͚Δʂ(ʆŋωŋ´)

Slide 33

Slide 33 text

ը໘ʹදࣔ͢ΔϨεϙϯεΛ itemsʹ֨ೲɻ v-forͰճ͠ɺ  ΫϦοΫΠϕϯτΛ෇༩ɻ view ͸ͬ͘͟Γ͜Μͳײ͡

Slide 34

Slide 34 text

঎඼Λબ୒ͨ͠Β ( બ୒ࡁΈ͔Ͳ͏͔֬ೝ ) Vuexͷબ୒ࡁΈϦετʹ௥Ճ / ࡟আ Vuex item.id 1 item.id 3 selectedItemIds [2, 3] item.id 2

Slide 35

Slide 35 text

ը໘ʹ঎඼ϦετΛฒ΂ͨ

Slide 36

Slide 36 text

બ୒ࡁΈͷ঎඼Ϧετid΋ อ࣋͢Δ͜ͱ͕Ͱ͖ͨ

Slide 37

Slide 37 text

Ͱɾɾɾʁ

Slide 38

Slide 38 text

Ͳ͏΍ͬͯviewͰද͍ࣔͯ͠Δ ঎඼Ϧετʹ બ୒ঢ়ଶΛ൓өͤ͞Δͷʁ

Slide 39

Slide 39 text

͑ɾɾɾʁ

Slide 40

Slide 40 text

ྑ͍࣮૷ํ๏͕ࢥ͍ු͔͹ͣ

Slide 41

Slide 41 text

೰Ή͜ͱ2࣌ؒ

Slide 42

Slide 42 text

ͳΜͷ੒Ռ΋ ͋͛ΒΕ·ͤΜͰͨ͠ (´ɾωɾʆ)

Slide 43

Slide 43 text

ؼ୐

Slide 44

Slide 44 text

(´ɾωɾʆ)

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

mya-ake mi ΤϯδχΞྺ ໿6೥ ʢ୴ಹࢯʣ ΤϯδχΞྺ ໿1೥ ʢকདྷχʔτʹͳΓ͍ͨՇࢯʣ ؼ୐ޙͱ͋ΔΤϯδχΞ  ෉්ͷձ࿩

Slide 47

Slide 47 text

୴ಹࢯʙ(´ɾωɾʆ) ͳΜͩͶɻ ͔͔͔͔̺͘͘͠͡djwoidqwp(´ɾωɾʆ) dataͱStoreͰ΍Δͱ͜·ͰɺͰ͖ͨͷͶ ͳΔ΄Ͳɻ( ෺෼Γͷྑ͍ೣ) ͦΕͰͦΕͰɺ બ୒ࡁΈͷঢ়ଶΛը໘ʹ൓ө͢Δྑ͍ํ๏ͳΜ͔ͳ͍Ͱ͔͢ʁ

Slide 48

Slide 48 text

computed Ͱબ୒ࡁ item.id ͱ item Λൺֱͯ͠දࣔ༻ͷ item ͷϦετΛ࡞Δ ͦͯ͠දࣔ༻ʹࢉग़ͨ͠ϦετΛ v-forͰը໘ʹදࣔɻ ͦΕͰग़དྷΔͧɻ ΤϯδχΞྺ ໿6೥ ʢझຯ͸Ξχϝͱອըͷ୴ಹࢯʣ

Slide 49

Slide 49 text

ΤϯδχΞྺ ໿6೥ ʢ޷͖ͳ৯΂෺͸τϚτͷ୴ಹࢯʣ

Slide 50

Slide 50 text

computed ͬͯ ͦΜͳ࢖͍ํͰ͖Δͷʂʁ ͦ͜ʹͨͲΓண͔ͳ͔ͬͨɾɾɾ ΤϯδχΞྺ ໿1೥ ʢಛٕ͸12࣌ؒਭ຾ Շࢯʣ

Slide 51

Slide 51 text

બ୒ࡁ item.id ͱ item Λ ͚ͬͭͯ͘ දࣔ༻ͷ item Ϧετ displayItems Λ computed Ͱ࡞੒ʂ v-forͰճͯ͠ޙ͸ಉ͡ɻ

Slide 52

Slide 52 text

computed ಛఆͷঢ়ଶΛม਺ͱ͠ ͯѻ͍͍ͨ৔߹ʹ༗ޮ computed ແ͠Ͱ͸ੜ͖͍͚ͯ·ͤΜΘɾɾɾ Ϩϕϧ03 ·ͱΊ

Slide 53

Slide 53 text

computed ·ͱΊ • Vue.jsͷࢉग़ϓϩύςΟ • ࣄલʹܭࢉ΍Ճ޻͞Εͨ஋ΛࢀরͰ͖Δ • ґଘؔ܎ʹ΋ͱ͖ͮΩϟογϡ͞ΕΔ  ґଘ͢Δ΋ͷ͕ߋ৽͞ΕΔ·Ͱແବͳ࣮ߦ͕ͳ͍ • ಛఆͷঢ়ଶΛม਺ͱͯ͠ѻ͍͍ͨ৔߹ʹ༗ޮ

Slide 54

Slide 54 text

͓·͚ ΤϯδχΞྺ ໿6೥ ʢओ৯͸ Uber Eats ୴ಹࢯʣ • ΋͏͙͢ϑϦʔϥϯεʹͳΔ • ࢓ࣄͷग़དྷΔWebΤϯδχΞ • ͓࢓ࣄ͍͋͛ͯͩ͘͞ • εϚϒϥϑϨϯζืूத • Twitter: @mya_ake

Slide 55

Slide 55 text

Thank you for your kind attention!