Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
この素晴らしい Vue.js に祝福を!
Hideyuki Takeuchi
March 16, 2017
Programming
16
11k
この素晴らしい Vue.js に祝福を!
Vue.js Tokyo v-meetup="#3" での発表資料です。
Hideyuki Takeuchi
March 16, 2017
Tweet
Share
More Decks by Hideyuki Takeuchi
See All by Hideyuki Takeuchi
Exposed 応用編 〜内部実装 と 魔拡張〜
chimerast
0
420
Delegatesと拡張関数・拡張プロパティその合わせ技
chimerast
0
380
Kotlin Coroutines と Ktor HTTP Client で作るスケールするタスク実行
chimerast
0
980
UZABASE創業期から10年いるエンジニアから見た「BtoB SaaSのUI/UXってなんだろう?」
chimerast
1
510
暗号通貨の鍵を安全に管理するアーキテクチャを作ってみようとしている話
chimerast
0
280
WhitestormJSを触ってみた
chimerast
0
420
RxJava + Vert.x + jOOλ で Microservice的な何かを作ってみた
chimerast
0
2.3k
40億レコード以上のSPEEDA大規模データを超高速に表示するElasticsearch活用法
chimerast
1
3.4k
もっとデータ可視化をカジュアルに!OSSプロジェクト「E2D3」
chimerast
1
2.2k
Other Decks in Programming
See All in Programming
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
460
OSC大阪 パスワード認証は人類には早すぎる ~ IDaaSを使ったソーシャルログインのすすめ ~
authyasan
5
1.1k
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
530
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
120
Prácticas de Seguridad en Kubernetes
pablokbs
0
120
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
180
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
300
AWS App Runnerがそろそろ本番環境でも使い物になりそう
n1215
PRO
0
900
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
340
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
100
%q is for Quine
koic
0
400
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
160
Featured
See All Featured
Side Projects
sachag
451
37k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
390
The Language of Interfaces
destraynor
149
21k
Automating Front-end Workflow
addyosmani
1351
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
Happy Clients
brianwarren
90
5.8k
Why Our Code Smells
bkeepers
PRO
326
55k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Product Roadmaps are Hard
iamctodd
38
7.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
Transcript
この素晴らしい 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