vue-pivot-table-plus - Speaker Deck

vue-pivot-table-plus

by LINE Developers

Slide 1

Slide 1 text

vue-pivot-table-plus: A pivot table component for Vue.js and Bootstrap Tatsuhiko Sakaguchi

Slide 2

Slide 2 text

Tatsuhiko Sakaguchi ࡔޱୡ඙ LINEגࣜձࣾ UIT ϑϩϯτΤϯυ։ൃηϯλʔ Front-end Dev8 νʔϜ

Slide 3

Slide 3 text

Tatsuhiko Sakaguchi ࡔޱୡ඙ 2019.2 2019.3~ 2021.4~ 2020.4 Πϯλʔϯγοϓ ΞϧόΠτ ৽ଔೖࣾ 2೥໨

Slide 4

Slide 4 text

LINE Engineer Blog https://engineering.linecorp.com/ja/blog/internship-2019-oasis-front-end/

Slide 5

Slide 5 text

໨࣍ ࣗݾ঺հ vue-pivot-table-plus ͷ֓ཁ ಋೖࣄྫ ։ൃ ࠓޙͷൃల

Slide 6

Slide 6 text

vue-pivot-table-plus Vue.js + Bootstrap ޲͚ͷϐϘοτςʔϒϧίϯϙʔωϯτ

Slide 7

Slide 7 text

vue-pivot-table-plus Vue.js + Bootstrap ޲͚ͷϐϘοτςʔϒϧίϯϙʔωϯτ Open source Improved performance Forked vue-pivot-table Customized features

Slide 8

Slide 8 text

Open source

Slide 9

Slide 9 text

ϐϘοτςʔϒϧ දܗࣜͷσʔλΛूܭ͢Δπʔϧ

Slide 10

Slide 10 text

ಈ࡞ ςετσʔλ

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Features Bootstrap ready Design updates Additional useful functions Improved performance 1ສߦ͍ۙσʔλͰ΋ॲཧՄೳ ϓϩδΣΫτଆͷ Bootstrap Λར༻͢ΔͷͰɼઃఆΛద༻Ͱ͖Δ

Slide 13

Slide 13 text

ΫϦΞػೳ ιʔτػೳ อଘػೳ Additional functions

Slide 14

Slide 14 text

Design updates vue-pivot-table vue-pivot-table-plus

Slide 15

Slide 15 text

Requirements Vue.js v2.x Bootstrap v4.x v3.x ͸ະରԠ v5.x ͸ະରԠ

Slide 16

Slide 16 text

ಋೖࣄྫ LINEࣾ಺ͷσʔλ෼ੳπʔϧ

Slide 17

Slide 17 text

OASIS : Collaborative data analysis platform

Slide 18

Slide 18 text

yanagishima : Presto Web UI

Slide 19

Slide 19 text

Data analysis tools ͜ΕΒͷπʔϧ͸ΤϯδχΞҎ֎΋ར༻ શһ͕ SQL ʹৄ͍͠Θ͚Ͱ͸ͳ͍ μ΢ϯϩʔυͯ͠ Excel Ͱूܭ͍ͯͨ͜͠ͱ΋ ϐϘοτςʔϒϧػೳͷಋೖ΁

Slide 20

Slide 20 text

ಋೖޙ σʔλऔಘͷΫΤϦ͚ͩͰσʔλूܭ͕Մೳʹ Web Ͱશͯͷ෼ੳ͕؆ܿ ۀ຿ͷޮ཰Խ

Slide 21

Slide 21 text

ཁ๬ ΧϥϜΛιʔτ͍ͨ͠ ϐϘοτͨ͠ςʔϒϧΛͦͷ··μ΢ϯϩʔυ͍ͨ͠ ύϑΥʔϚϯεΛվળͯ͠΄͍͠ vue-pivot-table-plus ͱͯ͠ެ։΁

Slide 22

Slide 22 text

։ൃ development

Slide 23

Slide 23 text

ݕ౼ ಋೖઌπʔϧ͕ Vue.js + Bootstrap Λར༻ σβΠϯ͕ೃછΉΑ͏ʹ OSS ͱͯ͠ར༻Ͱ͖Δ΋ͷΛ yanagishima ͸ OSS Ͱެ։͞Ε͍ͯͨ ͜ΕΒΛຬͨ͢ϥΠϒϥϦΛ୳͍ͯͨ͠

Slide 24

Slide 24 text

vue-pivot-table https://github.com/Click2Buy/vue-pivot-table

Slide 25

Slide 25 text

ಋೖʹ͋ͨͬͯͷ໰୊ ༨ന͕طଘը໘ͱ߹Θͳ͍ ϐϘοτͨ͠ঢ়ଶΛอଘͰ͖ͳ͍ σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ

Slide 26

Slide 26 text

༨ന͕طଘը໘ͱ߹Θͳ͍ OASIS vue-pivot-table

Slide 27

Slide 27 text

OASIS vue-pivot-table-plus ༨ന͕طଘը໘ͱ߹Θͳ͍

Slide 28

Slide 28 text

IUUQTHJUIVCDPN$MJDL#VZWVFQJWPUUBCMFCMPCNBTUFSEFNP"QQWVF IUUQTHJUIVCDPNMJOFWVFQJWPUUBCMFQMVTCMPCNBTUFSEFNP"QQWVF ϐϘοτͨ͠ঢ়ଶΛอଘͰ͖ͳ͍ v-model Λར༻ͯ͠औΓग़ͤΔΑ͏ʹ vue-pivot-table-plus vue-pivot-table

Slide 29

Slide 29 text

σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ 1ສߦ͍ۙσʔλͰ͸ɼ਺ඵఔ౓ϒϥ΢β͕ϑϦʔζ

Slide 30

Slide 30 text

+ computed property ͷΦʔόϔου =

Slide 31

Slide 31 text

σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ ूܭ݁ՌΛ computed property ͱͯ͠อଘ͍ͯͨ͠ Computed property ͸ݩͷσʔλΛґଘઌͱͯ͠ొ࿥͢Δ औಘ࣌΋ؚΊɼେྔͷΦʔόϔου͕ൃੜ

Slide 32

Slide 32 text

͋ΔྫͰ͸ॲཧ + ඳը͕࣌ؒ 1/10 ʹ Computed property watch ಺Ͱ࠶ܭࢉ Method ύϑΥʔϚϯεվળ

Slide 33

Slide 33 text

OSS ͱͯ͠

Slide 34

Slide 34 text

μ΢ϯϩʔυ਺ https://www.npmjs.com/package/vue-pivot-table-plus

Slide 35

Slide 35 text

μ΢ϯϩʔυ਺ൺֱ https://www.npmjs.com/package/@marketconnect/vue-pivot-table vue-pivot-table vue-pivot-table-plus https://www.npmjs.com/package/vue-pivot-table-plus

Slide 36

Slide 36 text

ࠓޙͷൃల Future work

Slide 37

Slide 37 text

ࠓޙͷํ਑ ΧελϚΠζੑͷ޲্ Vue 3ɼBootstrap 5 ΁ͷରԠ TypeScript ରԠ

Slide 38

Slide 38 text

ΧελϚΠζੑͷ޲্ slot ͷར༻ ΧελϜϓϩύςΟͷ௥Ճ slot Λར༻Ͱ͖ΔՕॴΛ૿΍ͯ͠ɼσβΠϯͷௐ੔͕Ͱ͖ΔΑ͏ʹ σβΠϯʹؔ͢ΔϓϩύςΟͷ௥Ճ OSS Ͱ͋Δ͕ɼσβΠϯ͸ࣾ಺ͷϓϩμΫτʹ߹Θ͍ͤͯΔ ΧελϚΠζੑΛ޲্ͤ͞ɼ༷ʑͳϓϩμΫτͰར༻Ͱ͖ΔΑ͏ʹ

Slide 39

Slide 39 text

Vue 3, Bootstrap 5 ΁ͷରԠ ෳ਺ͷ v-model ͷར༻ ݱࡏ v-model ͷΦϒδΣΫτ͕ ෳࡶͰ͋Δ ෳ਺ͷ v-model Λར༻͢Δ͜ͱͰ Θ͔Γ΍͘͢ ͲͪΒ΋࠷ۙެ։͞ΕͨͷͰରԠ͍ͨ͠

Slide 40

Slide 40 text

TypeScript ΁ͷରԠ Vue 3 ͸ TypeScript Ͱॻ͔ΕΔ͜ͱ͕ଟ͍ ܕΛ༻ҙ͢Δ͜ͱͰ࢖͍΍͘͢

Slide 41

Slide 41 text

vue-pivot-table-plus: A pivot table component for Vue.js + Bootstrap Future work Improved vue-pivot-table Open source ΦʔϓϯιʔεͰެ։ σʔλ਺͕ଟ͍৔߹ͷ computed property ͸஫ҙ ΧελϚΠζੑͷڧԽɼVue 3 ରԠͳͲ Tatsuhiko Sakaguchi