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

Vue.js Tokyo v-meetup="#3" での発表資料です。

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