この素晴らしい Vue.js に祝福を！

この素晴らしい 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 側 <div id="contrib" class="row grid"> @chimerast 20

画面の拡張を続けていくのにだいぶしんどい @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

この素晴らしい Vue.js に祝福を！

この素晴らしい Vue.js に祝福を！

Hideyuki Takeuchi

More Decks by Hideyuki Takeuchi

Other Decks in Programming

Featured

Transcript