vue-pivot-table-plus

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

Vue.js 向けピボットテーブルライブラリ「vue-pivot-table-plus」 vue-pivot-table-plusは，Vue.js + Bootstrap 環境向けのオープンソースなピボットテーブルコンポーネントです。これは社内の分析ツール向けに、vue-pivot-table というライブラリを fork して開発されています。本ライブラリの開発経緯や活用方法についてご紹介します。

坂口 達彦 / LINE株式会社 Front-end Dev8チーム

※こちらは以下イベントで登壇した資料となります。
https://line.connpass.com/event/210163/
※動画リンクは後日掲載いたします。

Transcript

1.  vue-pivot-table-plus: A pivot table component for Vue.js and Bootstrap Tatsuhiko Sakaguchi
2.  Tatsuhiko Sakaguchi ࡔޱ
   ୡ඙ LINEגࣜձࣾ UIT ϑϩϯτΤϯυ։ൃηϯλʔ Front-end Dev8 νʔϜ
3.  Tatsuhiko Sakaguchi ࡔޱ
   ୡ඙ 2019.2 2019.3~ 2021.4~ 2020.4 Πϯλʔϯγοϓ ΞϧόΠτ ৽ଔೖࣾ 2೥໨
4. LINE Engineer Blog https://engineering.linecorp.com/ja/blog/internship-2019-oasis-front-end/ 
5.  ໨࣍ ࣗݾ঺հ vue-pivot-table-plus ͷ֓ཁ ಋೖࣄྫ ։ൃ ࠓޙͷൃల
6.  vue-pivot-table-plus Vue.js + Bootstrap ޲͚ͷϐϘοτςʔϒϧίϯϙʔωϯτ
7.  vue-pivot-table-plus Vue.js + Bootstrap ޲͚ͷϐϘοτςʔϒϧίϯϙʔωϯτ Open source Improved performance Forked vue-pivot-table Customized features
8.  Open source
9.  ϐϘοτςʔϒϧ දܗࣜͷσʔλΛूܭ͢Δπʔϧ
10.  ಈ࡞ ςετσʔλ
11. 
12.  Features Bootstrap ready Design updates Additional useful functions Improved performance 1ສߦ͍ۙσʔλͰ΋ॲཧՄೳ ϓϩδΣΫτଆͷ Bootstrap Λར༻͢ΔͷͰɼઃఆΛద༻Ͱ͖Δ
13. ΫϦΞػೳ ιʔτػೳ อଘػೳ  Additional functions
14.  Design updates vue-pivot-table vue-pivot-table-plus
15.  Requirements Vue.js v2.x Bootstrap v4.x v3.x ͸ະରԠ v5.x ͸ະରԠ
16.  ಋೖࣄྫ LINEࣾ಺ͷσʔλ෼ੳπʔϧ
17.  OASIS : Collaborative data analysis platform
18.  yanagishima : Presto Web UI
19.  Data analysis tools ͜ΕΒͷπʔϧ͸ΤϯδχΞҎ֎΋ར༻ શһ͕ SQL ʹৄ͍͠Θ͚Ͱ͸ͳ͍ μ΢ϯϩʔυͯ͠ Excel Ͱूܭ͍ͯͨ͜͠ͱ΋ ϐϘοτςʔϒϧػೳͷಋೖ΁
20.  ಋೖޙ σʔλऔಘͷΫΤϦ͚ͩͰσʔλूܭ͕Մೳʹ Web Ͱશͯͷ෼ੳ͕؆ܿ ۀ຿ͷޮ཰Խ
21.  ཁ๬ ΧϥϜΛιʔτ͍ͨ͠ ϐϘοτͨ͠ςʔϒϧΛͦͷ··μ΢ϯϩʔυ͍ͨ͠ ύϑΥʔϚϯεΛվળͯ͠΄͍͠ vue-pivot-table-plus ͱͯ͠ެ։΁
22.  ։ൃ development
23.  ݕ౼ ಋೖઌπʔϧ͕ Vue.js + Bootstrap Λར༻ σβΠϯ͕ೃછΉΑ͏ʹ OSS ͱͯ͠ར༻Ͱ͖Δ΋ͷΛ yanagishima ͸ OSS Ͱެ։͞Ε͍ͯͨ ͜ΕΒΛຬͨ͢ϥΠϒϥϦΛ୳͍ͯͨ͠
24.  vue-pivot-table https://github.com/Click2Buy/vue-pivot-table
25.  ಋೖʹ͋ͨͬͯͷ໰୊ ༨ന͕طଘը໘ͱ߹Θͳ͍ ϐϘοτͨ͠ঢ়ଶΛอଘͰ͖ͳ͍ σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ
26.  ༨ന͕طଘը໘ͱ߹Θͳ͍ OASIS vue-pivot-table
27.  OASIS vue-pivot-table-plus ༨ന͕طଘը໘ͱ߹Θͳ͍
28. IUUQTHJUIVCDPN$MJDL#VZWVFQJWPUUBCMFCMPCNBTUFSEFNP"QQWVF IUUQTHJUIVCDPNMJOFWVFQJWPUUBCMFQMVTCMPCNBTUFSEFNP"QQWVF  ϐϘοτͨ͠ঢ়ଶΛอଘͰ͖ͳ͍ v-model Λར༻ͯ͠औΓग़ͤΔΑ͏ʹ vue-pivot-table-plus vue-pivot-table
29.  σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ 1ສߦ͍ۙσʔλͰ͸ɼ਺ඵఔ౓ϒϥ΢β͕ϑϦʔζ
30.  + computed property ͷΦʔόϔου =
31.  σʔλ਺͕ଟ͍৔߹ʹύϑΥʔϚϯε͕ѱԽ ूܭ݁ՌΛ computed property ͱͯ͠อଘ͍ͯͨ͠ Computed property ͸ݩͷσʔλΛґଘઌͱͯ͠ొ࿥͢Δ औಘ࣌΋ؚΊɼେྔͷΦʔόϔου͕ൃੜ
32.  ͋ΔྫͰ͸ॲཧ + ඳը͕࣌ؒ 1/10 ʹ Computed property watch ಺Ͱ࠶ܭࢉ Method ύϑΥʔϚϯεվળ
33.  OSS ͱͯ͠
34.  μ΢ϯϩʔυ਺ https://www.npmjs.com/package/vue-pivot-table-plus
35.  μ΢ϯϩʔυ਺ൺֱ 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
36.  ࠓޙͷൃల Future work
37.  ࠓޙͷํ਑ ΧελϚΠζੑͷ޲্ Vue 3ɼBootstrap 5 ΁ͷରԠ TypeScript ରԠ
38.  ΧελϚΠζੑͷ޲্ slot ͷར༻ ΧελϜϓϩύςΟͷ௥Ճ slot Λར༻Ͱ͖ΔՕॴΛ૿΍ͯ͠ɼσβΠϯͷௐ੔͕Ͱ͖ΔΑ͏ʹ σβΠϯʹؔ͢ΔϓϩύςΟͷ௥Ճ OSS Ͱ͋Δ͕ɼσβΠϯ͸ࣾ಺ͷϓϩμΫτʹ߹Θ͍ͤͯΔ ΧελϚΠζੑΛ޲্ͤ͞ɼ༷ʑͳϓϩμΫτͰར༻Ͱ͖ΔΑ͏ʹ
39.  Vue 3, Bootstrap 5 ΁ͷରԠ ෳ਺ͷ v-model ͷར༻ ݱࡏ v-model ͷΦϒδΣΫτ͕ ෳࡶͰ͋Δ ෳ਺ͷ v-model Λར༻͢Δ͜ͱͰ Θ͔Γ΍͘͢ ͲͪΒ΋࠷ۙެ։͞ΕͨͷͰରԠ͍ͨ͠
40.  TypeScript ΁ͷରԠ Vue 3 ͸ TypeScript Ͱॻ͔ΕΔ͜ͱ͕ଟ͍ ܕΛ༻ҙ͢Δ͜ͱͰ࢖͍΍͘͢
41.  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