この素晴らしい Vue.js に祝福を！ たけうち ひでゆき @chimerast from E2D3 @chimerast 1

時間が無くて雑コラ @chimerast 2

自己紹介 たけうちさんは縮退しました @chimerast 株式会社ユー ザベー ス 社内ニー ト 全方位型エンジニア 最近いじってるもの: HoloLens @chimerast 3

Vue.js 遍歴 2015 年頭ぐらいからv0.11 をさわり始め、 2015 年中頃からプロダクトに導入 NewsPicks 広告出稿・ 分析画面 (2015 年～) SPA として作成 SPEEDA 統計・ 財務デー タ入力画面 (2016 年～) 新規プロダクト ( 未リリー ス 2017 年～) SPA として作成 vue 2.2 + vuex + vue-router + axios + babel @chimerast 4

今日のお題: E2D3 と Vue.js Excel にデー タを入力すると D3.js とかでビジュアライズして 表示してくれるExcel アドイン E2D3 主催の五十嵐さんが Vue.js ドキュメントの日本語訳にも 関わっている（ らしい） E2D3 ではVue.js をカジュアルに使用 @chimerast 5

E2D3 の簡単な紹介 @chimerast 6

@chimerast 7

DEMO @chimerast 8

@chimerast 9

@chimerast 10

@chimerast 11

@chimerast 12

@chimerast 13

E2D3 もろもろ オー プンソー スでGitHub 上で開発してます グラフテンプレー ト数: 93 種 GitHub Contributor: 41 人 アクティブメンバー: 51 人 ( 幽霊部員含めると100 人超え) エンジニア界隈ではなく、 オー プンデー タ界隈での活動が活発 もくもく会とかハッカソンとかよくやってます いろいろ賞を受賞しています @chimerast 14

総務大臣賞 @ STAT DASH グランプリ @chimerast 15

詳しくはホー ムペー ジから！ http://e2d3.org/ja/ @chimerast 16

E2D3 で Vue.js を導入した経緯 @chimerast 17

@chimerast 18

昔は D3.js と jQuery でがんばってた setupGrid = () -> d3.select '#contrib' .selectAll 'div' .data charts .enter().append 'div' .classed 'col-xs-4', true .each (d, i) -> newcell = d3.select(cell.cloneNode(true)) baseUrl = e2d3.util.baseUrl d.path newcell.select '.cover' .style 'background-image', "url('#{baseUrl}/thumbnail.png')" .select '.title' .text d.title ... @chimerast 19

対するHTML 側

画面の拡張を続けていくのに だいぶしんどい @chimerast 21

そうだ Vue.js を カジュアルに導入しよう！ @chimerast 22

Vue.js 導入後: CoffeeScript new Vue el: 'body' data: charts: [] ready: -> e2d3.api.topcharts() .then (charts) => @charts = charts components: chart: data: () -> readme: '' computed: baseUrl: -> e2d3.util.baseUrl(this.path) cover: -> @baseUrl + '/thumbnail.png' link: -> "chart.html##{@path},#{@scriptType},#{@dataType}" @chimerast 23

Vue.js 導入後: Pug(Jade) #contrib.row.grid(v-cloak) div(v-component='chart', v-repeat='charts', inline-template) .col-xs-4 figure .outer .inner.cover(v-style="background-image: 'url(' + cover + ')'") .title {{title}} figcaption .action a.btn.btn-sm.btn-visualize(href='{{link}}') i.fa.fa-bar-chart | Visualize .readme {{{readme}}} @chimerast 24

すっきり 構造がちゃんとHTML 上に現れる @chimerast 25

カジュアルに Vue.js を使う @chimerast 26

v-for で繰り返し処理 @chimerast 27

@chimerast 28

簡単にJS で表が作れる！ @chimerast 29

まとめ Vue.js はカジュアルにも使える コンポー ネントとか作らず1 画面内で使う Vue.js はガチにも使える vue + vuex + vue-router + axios + babel コンポー ネントをバリバリ作成 学習曲線はわりと理想だと思う 最近の MS Of ce は HTML と JS でアドインが書けるよ @chimerast 30

E2D3 ではコントリビュー タを 募集しています！ @chimerast 31