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

Hideyuki Takeuchi

March 16, 2017

Tweet Share

Transcript

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

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

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

   HoloLens @chimerast 3

4. Vue.js 遍歴 2015 年頭ぐらいからv0.11 をさわり始め、 2015 年中頃からプロダクトに導入 NewsPicks 広告出稿・ 分析画面

   (2015 年～) SPA として作成 SPEEDA 統計・ 財務デー タ入力画面 (2016 年～) 新規プロダクト ( 未リリー ス 2017 年～) SPA として作成 vue 2.2 + vuex + vue-router + axios + babel @chimerast 4

5. 今日のお題: E2D3 と Vue.js Excel にデー タを入力すると D3.js とかでビジュアライズして 表示してくれるExcel

   アドイン E2D3 主催の五十嵐さんが Vue.js ドキュメントの日本語訳にも 関わっている（ らしい） E2D3 ではVue.js をカジュアルに使用 @chimerast 5

6. E2D3 の簡単な紹介 @chimerast 6

7. @chimerast 7

8. DEMO @chimerast 8

9. @chimerast 9

10. @chimerast 10

11. @chimerast 11

12. @chimerast 12

13. @chimerast 13

14. E2D3 もろもろ オー プンソー スでGitHub 上で開発してます グラフテンプレー ト数: 93 種

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

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

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

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

18. @chimerast 18

19. 昔は 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

20. 対するHTML 側 <div id="contrib" class="row grid"> @chimerast 20

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

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

23. 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

24. 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

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

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

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

28. @chimerast 28

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

30. まとめ Vue.js はカジュアルにも使える コンポー ネントとか作らず1 画面内で使う Vue.js はガチにも使える vue +

    vuex + vue-router + axios + babel コンポー ネントをバリバリ作成 学習曲線はわりと理想だと思う 最近の MS Of ce は HTML と JS でアドインが書けるよ @chimerast 30

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