Vue コンポーネント実装パターン

Slide 1

Slide 1 text

Vueίϯϙʔωϯτ࣮૷ύλʔϯ Controlled Component & Transparent Wrappers

Slide 2

Slide 2 text

ࣗݾ঺հ ໊લ: seya ձࣾ: BizReach झຯ: GraphQL

Slide 3

Slide 3 text

Controlled Component

Slide 4

Slide 4 text

v-model ศརͰ͢ΑͶ {{ text }}

Slide 5

Slide 5 text

Ͱ΋ಠࣗͰఆٛͨ͠ίϯϙʔωϯτʹ v-model ࢖͍͍ͨ৔߹͸Ͳ͏͢Ε͹͍͍Ͱ͠ΐ͏ʁ ←͜Ε࡞Γ͍ͨ ↓͜Μͳײ͡Ͱॻ͍ͯ ↓ ͜Μͳײ͡ʹ v-model ࢖͍͍ͨɻΠϕϯτϋϯυϥ౉ͯ͠͝ʹΐ͝ʹΐͱ͔ͨ͘͠ͳ͍ɻ

Slide 6

Slide 6 text

v-model ͸ :value ͱ @input ͷ ૊Έ߹ΘͤͰͰ͖͍ͯΔ ྫ͑͹ ͸ ͱಉ͡

Slide 7

Slide 7 text

ͳͷͰࢠڙͷํͰ͸͜Μͳײ͡Ͱॻ͍ͯ͋͛ͯ export default { props: ['value'], methods: { toggle() { this.$emit('input', !this.value); } } };

Slide 8

Slide 8 text

਌ͷํͰ͸ v-model ॻ͍ͯ͋͛Δ͚ͩͰ

Slide 9

Slide 9 text

ಈ͘ʂ

Slide 10

Slide 10 text

ͪͳΈʹ value ͱ ˏinput ͷͱ͜ʹͪΌΜͱ໊લ ͚͍ͭͨ৔߹͸ model ϓϩύςΟΛ࢖͑͹ՄೳͰ͢ export default { model: { prop: 'toggled', event: ‘toggle' }, props: [‘toggled'], methods: { toggle() { this.$emit('toggle', !this.toggled); } } };

Slide 11

Slide 11 text

Transparent Wrappers

Slide 12

Slide 12 text

͖ͬ͞ͷํ๏Ͱಠࣗͷ input ࡞Δ

Slide 13

Slide 13 text

ͦͯ͠਌Ͱ͸͜ͷཁૉʹϑΥʔΧε͕͔͔ͬͨΒͳʹ͔ ͠Β࣮ߦ͍ͨ͠ͱ͢Δɻ (inputҎ֎ͷͱ͜ΖʹΦʔόʔϨΠ͔͚Δͱ͔)

Slide 14

Slide 14 text

label΋Ұॹʹ͢Δͱ…ಈ͔ͳ͍ʂʂʂ @focus.native ͸ϧʔτͷཁૉΛର৅ʹ͢ΔͨΊ Input ͷϑΥʔΧε͸र͑ͳ͍ɻ ͔ͱݴͬͯଞͷࢦఆͷํ๏΋ͳ͍ɻ٧Μͩɻ {{ label }}

Slide 15

Slide 15 text

JOQVUʹΠϕϯτϦεφʔ ͕͍͍ͭͯͳ͍ͳΒ JOQVUʹΠϕϯτϦεφʔΛ͚ͭΕ͹ ͍͍͡Όͳ͍ Transparent Wrappers

Slide 16

Slide 16 text

$listeners ͰΠϕϯτϦεφʔΛऔಘͰ͖ΔͷͰɺͦΕΛ಺෦ ͷ input ʹ౉ͯ͋͛͠Δɻ {{ label }} computed: { listeners() { return { ...this.$listeners, input: event => this.$emit('input', event.target.value) } } }

Slide 17

Slide 17 text

͋ͱ͸ @focus.native Λ @focus ʹͯ͋͛͠Ε͹

Slide 18

Slide 18 text

ಈ͘ʂʂʂ

Slide 19

Slide 19 text

PlaceholderΛ౉͍ͨ͠৔߹͸ʁ

Slide 20

Slide 20 text

ࢀߟ: https://jp.vuejs.org/v2/api/#inheritAttrs

Slide 21

Slide 21 text

inheritAttrs Λ false ʹͯ͠ v-bind ʹ $attrs Λ౉ͤ͹OK {{ label }} export default { inheritAttrs: false, // ଞͷ΍ͭ }

Slide 22

Slide 22 text

݁࿦ Controlled Component + Transparent Wrapper = ωΠςΟϒཁૉͬΆ͘ѻ͑Δಠࣗͷίϯϙʔωϯτ͕࡞ΕΔʂ