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

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

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

8a43d544df4886ea5ef714e78f3420a7?s=128

Hideyuki Takeuchi

March 16, 2017
Tweet

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