Slide 1

Slide 1 text

7VF%SBHHBCMFͰखܰʹϦετΛ υϥοάυϩοϓͰฒͼସ͑Δ WLBOTBJNFFUVQ  4"8

Slide 2

Slide 2 text

$(whoami) w ࢯ໊Ճ౻फҰ࿠ ࡀ  ‣ ϋϯυϧωʔϜ4"8  ϗϥʔ͕ۤखͳͷͰөըl4"8zΛݟͨ͜ͱ͸ͳ͍ ‣ େࡕࡏॅɾѪ஌ग़਎ ‣ ॴଐגࣜձࣾ.4&/ ೥໨  w 5XJUUFS!B[VLJ@FBUFS Vue.js macOS Linux FreeBSD

Slide 3

Slide 3 text

ओͳ׆ಈ w ษڧձͷൃදొஃ ‣ WLBOTBJNFFUVQ ‣ 7VF+40TBLB ‣ 0QFO4PVSDF$POGFSFODF ‣ 8FCº1)15FDI$BGF w $PEFS%PKPകాϝϯλʔ ‣ കాͰࢠڙͷϓϩάϥϛϯάֶशΛࢧԉ

Slide 4

Slide 4 text

WLBOTBJNFFUVQࢀՃྺ w ࢀՃճ਺ճ ‣ ొஃճ  WLBOTBJNFFUVQηογϣϯൃද  WLBOTBJNFFUVQ-5ൃද  WLBOTBJNFFUVQηογϣϯൃද ࠓճ  ‣ ௌߨճ  WLBOTBJNFFUVQ  7LBOTBJNFFUVQ

Slide 5

Slide 5 text

ൃද֓ཁ 7VFKTͰ υϥοάυϩοϓʹΑΔϦετͷฒͼସ͑Λ ༰қʹ࣮ݱ͢Δํ๏ͷ঺հ

Slide 6

Slide 6 text

υϥοάυϩοϓʹΑΔཁૉͷฒͼସ͑ w ໨త7VFKTͰϦετͷཁૉΛυϥοάυϩοϓͰฒͼସ͑ ‣ 5SFMMPͷΑ͏ʹϦετͷཁૉΛҠಈ͍ͨ͠ w )5.-ʹ%SBHBOE%SPQ"1*Λ࢖͑͹࣮૷Մೳ ‣ ฒͼସ͑ͱΠϕϯτͷॲཧΛࣗલͰهड़͠ͳ͚Ε͹ͳΒͳ͍

Slide 7

Slide 7 text

7VF%SBHHBCMFͷ֓ཁ w υϥοάυϩοϓͰཁૉͷฒͼସ͑Λ7VFKT্Ͱ࣮ݱ ‣ όΠϯυ͞ΕͨϦετ΋ϦΞΫςΟϒʹฒͼସ͑ ‣ 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτͷ಺༰Λฒͼସ͑  4PSUBCMFKTͷػೳΛར༻࣮ͯ͠ݱ

Slide 8

Slide 8 text

7VF%SBHHBCMFͷ௕ॴ w ฒͼସ͑ػೳΛ༰қʹ࣮ݱՄೳ ‣ 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτʹཁૉΛࢦఆ͢Δ͚ͩͰΑ͍ ‣ ฒͼସ͑΍ΠϕϯτॲཧΛهड़͢Δඞཁ͕ͳ͍ w εϚϗ΍λϒϨοτͳͲͷλονεΫϦʔϯͷॲཧ΋ڞ௨ ‣ σόΠεʹΑͬͯผʑͷΠϕϯτͰॲཧΛهड़͢Δඞཁ͕ͳ͍

Slide 9

Slide 9 text

7VF%SBHHBCMFͷಋೖͱ࢖͍ํ w OQNܦ༝ͰΠϯετʔϧ ‣ npm install vuedraggable -D w 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτʹฒͼସ͑ΔཁૉΛࢦఆ ‣ v-modelσΟϨΫςΟϒͰ഑ྻΛࢦఆ
{{ item.value }}

Slide 10

Slide 10 text

࣮૷ྫͱڍಈ
{{ item.value }}
import draggable from 'vuedraggable'; export default { components: { draggable }, data() { return { list: [ { id: 1, value: 'hoge' }, { id: 2, value: 'piyo' }, { id: 3, value: 'foo' }, { id: 4, value: 'bar' }, ], }; }, }

Slide 11

Slide 11 text

ϦετΛ·͕ͨͬͨཁૉͷҠಈ w ϦετͷཁૉΛҟͳΔϦετͷཁૉʹҠಈͤ͞Δ͜ͱ΋Մೳ ‣ 7VF%SBHHBCMFͷίϯϙʔωϯτʹgroupϓϩύςΟΛࢦఆ w λεΫ؅ཧΞϓϦͰ5P%P͔Β%POFʹҠಈͤ͞ΔΑ͏ͳڍಈΛ࣮ݱ

Slide 12

Slide 12 text

࣮૷ྫͱڍಈ
{{ item.value }}
{{ item.value }}
export default { data() { return { todos: [ { id: 1, value: 'hoge' }, { id: 2, value: 'piyo' }, { id: 3, value: 'foo' }, ], dones: [{ id: 4, value: 'bar' }], }; }, };

Slide 13

Slide 13 text

ίϯϙʔωϯτλάͷมߋ w 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτΛแؚ͢ΔλάΛมߋՄೳ ‣ σϑΥϧτͰ͸divλάͰεϩοτͷཁૉΛแؚ ‣ ϦετͷliཁૉΛulλάͰғΉΑ͏ͳ৔߹ʹར༻

Slide 14

Slide 14 text

σϕϩούπʔϧʹΑΔλάͷൺֱ
{{ item.value }}
  • {{ item.value }}
  • λάΛࢦఆ͠ͳ͍৔߹ liλάΛulλάͰғΉ৔߹

    Slide 15

    Slide 15 text

    υϥοάՄೳͳཁૉΛݶఆ w λονσόΠεͰ͸εΫϩʔϧͱυϥοάΠϕϯτ͕ॏͳΔ ‣ ҙਤ͠ͳ͍υϥοάΠϕϯτ͕ൃੜ w υϥοάՄೳͳཁૉΛݶఆͯ͠εΫϩʔϧͱ͔ͿΔ͜ͱΛ๷͙ ‣ handleϓϩύςΟͰυϥοάՄೳͳཁૉͷηϨΫλΛࢦఆ  4PSUBCMFKTͷΦϓγϣϯػೳ

    Slide 16

    Slide 16 text

    ࣮૷ྫͱڍಈ
    {{ item.value }}
    export default { data() { return { list: [ { id: 1, value: 'hoge' }, { id: 2, value: 'piyo' }, { id: 3, value: 'foo' }, { id: 4, value: 'bar' }, ], }; }, }

    Slide 17

    Slide 17 text

    ΠϕϯτൃՐ࣌ʹॲཧΛ௥Ճ w υϥοάυϩοϓͷͦΕͧΕͷΠϕϯτൃՐ࣌ʹॲཧ͕௥ՃՄೳ ‣ ฒͼସ͑ͷલॲཧ΍ޙॲཧΛಠࣗʹ࣮૷Մೳ ‣ 4PSUBCMFKTͷΠϕϯτΛαϙʔτ w 7VF%SBHHBCMFͷίϯϙʔωϯτͰΠϕϯτϋϯυϥΛࢦఆ ‣ moveϓϩύςΟυϥοά࣌ʹཁૉ͕Ҡಈͨ͠ࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @startσΟϨΫςΟϒυϥοά։࢝࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @endσΟϨΫςΟϒυϥοάऴྃ࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @addσΟϨΫςΟϒཁૉ͕ผͷϦετʹυϩοϓ͞ΕͨࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ

    Slide 18

    Slide 18 text

    ࣮ࡍͷར༻ྫ w ཱྀߦͷεέδϡʔϧௐ੔ΞϓϦ ‣ ϓϥϯͷॱ൪΍೔ఔΛυϥοάυϩοϓͰҠಈՄೳ ‣ 6*ίϯϙʔωϯτ͸7VFUJGZΛར༻ w ϨεϙϯγϒσβΠϯΛ࣮ݱ ‣ ฒͼସ͑ॲཧ͸1$ͱλονσόΠεͰڞ௨

    Slide 19

    Slide 19 text

    ಈ࡞ྫ

    Slide 20

    Slide 20 text

    ૯ׅ w 7VF%SBHHBCMFͰυϥοάυϩοϓͷฒͼସ͑Λ༰қʹ࣮૷Մೳ ‣ ฒͼସ͑΍Πϕϯτॲཧͷهड़͕ෆཁ w ୯ҰͷϦετ͚ͩͰͳ͘ෳ਺ͷϦετΛ·͕ͨͬͨฒͼସ͑΋࣮ݱՄೳ ‣ 5SFMMPͷΑ͏ͳλεΫ؅ཧΞϓϦͷ࡞੒΋࣮ݱՄೳ

    Slide 21

    Slide 21 text

    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠