Enviar pesquisa
Carregar
Vue.js でタイマーを作る
•
4 gostaram
•
7,457 visualizações
mizdra
Seguir
Dentoo.LT #16 飛び入り枠でのスライドです
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 32
Baixar agora
Baixar para ler offline
Recomendados
Laravelの認証について
Laravelの認証について
Takeo Noda
rsyncやシェルでバックアップするよりも簡単にOSSのBaculaでバックアップしてみよう
rsyncやシェルでバックアップするよりも簡単にOSSのBaculaでバックアップしてみよう
Ken Sawada
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
shinjiigarashi
JIRA / Confluence の必須プラグインはこれだ
JIRA / Confluence の必須プラグインはこれだ
Narichika Kajihara
엘라스틱서치, 로그스태시, 키바나
엘라스틱서치, 로그스태시, 키바나
종민 김
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Yahoo!デベロッパーネットワーク
CodeBuildを身近にするためのはじめの一歩
CodeBuildを身近にするためのはじめの一歩
淳 千葉
モダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとは
Takuya Tejima
Recomendados
Laravelの認証について
Laravelの認証について
Takeo Noda
rsyncやシェルでバックアップするよりも簡単にOSSのBaculaでバックアップしてみよう
rsyncやシェルでバックアップするよりも簡単にOSSのBaculaでバックアップしてみよう
Ken Sawada
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
shinjiigarashi
JIRA / Confluence の必須プラグインはこれだ
JIRA / Confluence の必須プラグインはこれだ
Narichika Kajihara
엘라스틱서치, 로그스태시, 키바나
엘라스틱서치, 로그스태시, 키바나
종민 김
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Yahoo!デベロッパーネットワーク
CodeBuildを身近にするためのはじめの一歩
CodeBuildを身近にするためのはじめの一歩
淳 千葉
モダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとは
Takuya Tejima
CloudFront経由でのCORS利用
CloudFront経由でのCORS利用
Yuta Imai
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
Rancher と GitLab を使う3つの理由
Rancher と GitLab を使う3つの理由
Tetsurou Yano
Spring bootでweb 基本編
Spring bootでweb 基本編
なべ
[AKIBA.AWS] VPN接続とルーティングの基礎
[AKIBA.AWS] VPN接続とルーティングの基礎
Shuji Kikuchi
Ingressの概要とLoadBalancerとの比較
Ingressの概要とLoadBalancerとの比較
Mei Nakamura
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
[AKIBA.AWS] VPCをネットワーク図で理解してみる
[AKIBA.AWS] VPCをネットワーク図で理解してみる
Shuji Kikuchi
AWS Black Belt Tech シリーズ 2015 - AWS CloudFormation
AWS Black Belt Tech シリーズ 2015 - AWS CloudFormation
Amazon Web Services Japan
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX, Inc.
インフラ運用の観点から考えるAWS~運用における利点と移行のポイント~
インフラ運用の観点から考えるAWS~運用における利点と移行のポイント~
NHN テコラス株式会社
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
Nginx lua
Nginx lua
Moriyoshi Koizumi
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
Amazon Web Services Japan
知っておきたいFirebase の色んな上限について
知っておきたいFirebase の色んな上限について
健一 辰濱
시니어가 들려주는 "내가 알고 있는 걸 당신도 알게 된다면"
시니어가 들려주는 "내가 알고 있는 걸 당신도 알게 된다면"
InfraEngineer
負荷試験ツールlocustを使おう
負荷試験ツールlocustを使おう
iRidge, Inc.
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
toshi_pp
MySQLの文字コード事情
MySQLの文字コード事情
Masahiro Tomita
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Yoshifumi Kawai
Try Webworkers
Try Webworkers
Hideaki Miyake
Mais conteúdo relacionado
Mais procurados
CloudFront経由でのCORS利用
CloudFront経由でのCORS利用
Yuta Imai
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
Rancher と GitLab を使う3つの理由
Rancher と GitLab を使う3つの理由
Tetsurou Yano
Spring bootでweb 基本編
Spring bootでweb 基本編
なべ
[AKIBA.AWS] VPN接続とルーティングの基礎
[AKIBA.AWS] VPN接続とルーティングの基礎
Shuji Kikuchi
Ingressの概要とLoadBalancerとの比較
Ingressの概要とLoadBalancerとの比較
Mei Nakamura
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
[AKIBA.AWS] VPCをネットワーク図で理解してみる
[AKIBA.AWS] VPCをネットワーク図で理解してみる
Shuji Kikuchi
AWS Black Belt Tech シリーズ 2015 - AWS CloudFormation
AWS Black Belt Tech シリーズ 2015 - AWS CloudFormation
Amazon Web Services Japan
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX, Inc.
インフラ運用の観点から考えるAWS~運用における利点と移行のポイント~
インフラ運用の観点から考えるAWS~運用における利点と移行のポイント~
NHN テコラス株式会社
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
Nginx lua
Nginx lua
Moriyoshi Koizumi
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
Amazon Web Services Japan
知っておきたいFirebase の色んな上限について
知っておきたいFirebase の色んな上限について
健一 辰濱
시니어가 들려주는 "내가 알고 있는 걸 당신도 알게 된다면"
시니어가 들려주는 "내가 알고 있는 걸 당신도 알게 된다면"
InfraEngineer
負荷試験ツールlocustを使おう
負荷試験ツールlocustを使おう
iRidge, Inc.
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
toshi_pp
MySQLの文字コード事情
MySQLの文字コード事情
Masahiro Tomita
Mais procurados
(20)
CloudFront経由でのCORS利用
CloudFront経由でのCORS利用
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Rancher と GitLab を使う3つの理由
Rancher と GitLab を使う3つの理由
Spring bootでweb 基本編
Spring bootでweb 基本編
[AKIBA.AWS] VPN接続とルーティングの基礎
[AKIBA.AWS] VPN接続とルーティングの基礎
Ingressの概要とLoadBalancerとの比較
Ingressの概要とLoadBalancerとの比較
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
[AKIBA.AWS] VPCをネットワーク図で理解してみる
[AKIBA.AWS] VPCをネットワーク図で理解してみる
AWS Black Belt Tech シリーズ 2015 - AWS CloudFormation
AWS Black Belt Tech シリーズ 2015 - AWS CloudFormation
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
インフラ運用の観点から考えるAWS~運用における利点と移行のポイント~
インフラ運用の観点から考えるAWS~運用における利点と移行のポイント~
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
Nginx lua
Nginx lua
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
知っておきたいFirebase の色んな上限について
知っておきたいFirebase の色んな上限について
시니어가 들려주는 "내가 알고 있는 걸 당신도 알게 된다면"
시니어가 들려주는 "내가 알고 있는 걸 당신도 알게 된다면"
負荷試験ツールlocustを使おう
負荷試験ツールlocustを使おう
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
MySQLの文字コード事情
MySQLの文字コード事情
Semelhante a Vue.js でタイマーを作る
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Yoshifumi Kawai
Try Webworkers
Try Webworkers
Hideaki Miyake
datetime.datetime.now()をモックしたい.pdf
datetime.datetime.now()をモックしたい.pdf
YutaNemoto1
Jawsdays2017(配布用)
Jawsdays2017(配布用)
Yutaka Hiroyama
Vue.js で XSS
Vue.js で XSS
tobaru_yuta
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Eucen Stew
Aws tools for power shellをつかいこなそう
Aws tools for power shellをつかいこなそう
Genta Watanabe
【ネイティブアドを支えるPhantomJS】
【ネイティブアドを支えるPhantomJS】
Kengo Shimada
Azure で Serverless 初心者向けタッチ&トライ
Azure で Serverless 初心者向けタッチ&トライ
Masanobu Sato
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
Azure Machine Learning Services 概要 - 2019年2月版
Azure Machine Learning Services 概要 - 2019年2月版
Daiyu Hatakeyama
Arctic.js
Arctic.js
chikathreesix
HTMLの要素の選び方
HTMLの要素の選び方
TENTO_slide
タイマー
タイマー
TENTO_slide
Sencha study
Sencha study
Shinsuke Sugita
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
Kiyoshi Sawada
Google Developer Day 2010 Japan: Google App Engine についての最新情報 (松尾貴史)
Google Developer Day 2010 Japan: Google App Engine についての最新情報 (松尾貴史)
Google Developer Relations Team
RecentApps
RecentApps
Masahiro Hidaka
20200304 vuejs
20200304 vuejs
yamamotomsc
Semelhante a Vue.js でタイマーを作る
(20)
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Try Webworkers
Try Webworkers
datetime.datetime.now()をモックしたい.pdf
datetime.datetime.now()をモックしたい.pdf
Jawsdays2017(配布用)
Jawsdays2017(配布用)
Vue.js で XSS
Vue.js で XSS
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Aws tools for power shellをつかいこなそう
Aws tools for power shellをつかいこなそう
【ネイティブアドを支えるPhantomJS】
【ネイティブアドを支えるPhantomJS】
Azure で Serverless 初心者向けタッチ&トライ
Azure で Serverless 初心者向けタッチ&トライ
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Azure Machine Learning Services 概要 - 2019年2月版
Azure Machine Learning Services 概要 - 2019年2月版
Arctic.js
Arctic.js
HTMLの要素の選び方
HTMLの要素の選び方
タイマー
タイマー
Sencha study
Sencha study
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
Google Developer Day 2010 Japan: Google App Engine についての最新情報 (松尾貴史)
Google Developer Day 2010 Japan: Google App Engine についての最新情報 (松尾貴史)
RecentApps
RecentApps
20200304 vuejs
20200304 vuejs
Vue.js でタイマーを作る
1.
Vue.js でタイマーを作る
2.
自己紹介 mizdra 学域1年生 ポケモンの乱数調整のツールを作ったりしています
3.
モチベーション Vue.js でタイマーを作る 乱数調整に使われているエメタイマーというタイマーがFlash製な のでリプレースしたい Vue.js 流行ってるし使ってみたい
4.
エメタイマーとは 実際に見たほうが早い http://pokem.client.jp/emloop.htm
5.
仕様 (カウントダウン)タイマー 時間を設定し, カウントダウンを開始する フレーム⇔秒変換機能 60フレーム ==
1秒 メインタイマーが開始する前に別途メインタイマー開始待機用のタ イマー(待機タイマー)を設ける n秒待機してから(メインタイマーの)カウントダウン開始する 機能 エメタイマーの機能を再現するだけ
6.
手順 1. Vue.js +
Webpack のテンプレートを作成 2. Vueコンポーネントをゴリゴリ書く
7.
今日紹介する予定の話題 Vue.js (メイン) vuelidate window.requestAnimationFrame Fetch API Web
Audio API
8.
今日紹介する話題 Vue.js (メイン) vuelidate window.requestAnimationFrame Fetch API Web
Audio API 時間がないのでちょっとだけ...
9.
やっていきます
10.
Vue.js とは ユーザーインターフェイスを構築するためのプログレッシブフレー ムワークです。 https://jp.vuejs.org/v2/guide/#はじめに 仮想DOMのサポート(Vue.js
v2 以降) 新しいDOMと古いDOMを比較し, 差分のみを更新する 新しいDOMで全てを置き換える(更新する)よりもDOM操作の 回数が少なくなる 参考: ReactとFluxのこと// Speaker Deck: https://speakerdeck.com/geta6/reacttofluxfalsekoto リアクティブ(Modelを変更したらDOMが自動で更新される) ルーティングなどは行わず, Viewのみに焦点を当てている Reactっぽい
11.
Reactとの違い 軽い ReactはJSX, Vue.jsはTemplate すべての正しいHTMLはテンプレートとしても正しくなる Pug(旧Jade), Slim,
Hamlなどのメタ言語を自由に使える 単一ファイルコンポーネント Template, ロジック, Styleそれぞれ別々のファイルで管理する のではなく, 1つのファイル(.vue)で管理するという思想 これら3つの要素は互いに関係しており, 1つのファイルで管理 したほうが保守性に優れている...という考え 参考: 他のフレームワークとの比較‑ Vue.js: https://jp.vuejs.org/v2/guide/comparison.html
12.
JSX in React //
https://jp.vuejs.org/v2/guide/comparison.html render () { let { items } = this.props let children if (items.length > 0) { children = ( <ul> {items.map(item => <li key={item.id}>{item.name}</li> )} </ul> ) } else { children = <p>項目は見つかりませんでした。</p> } return ( <div className='list-container'> {children} </div> ) }
13.
Template in Vue.js <!--
https://jp.vuejs.org/v2/guide/comparison.html --> <template> <div class="list-container"> <ul v-if="items.length"> <li v-for="item in items"> {{ item.name }} </li> </ul> <p v-else>項目は見つかりませんでした。</p> </div> </template> 英語らしく読める JSXほどキモくない あくまでも極端な例(当然JSXにも利点はある)
14.
単一ファイルコンポーネント <!-- hello.vue --> <template> <p
class="message"> {{ msg }} </p> </template> <script> export default { name: 'hello', data() { return { msg: 'Welcome to Your Vue.js App' }; } }; </script> <style scoped> .message { color: red; } </style>
15.
Vue.js + Webpack
のテンプレートを作成 Vue.js を導入する方法はいくつかある 今回はそのなかでも最も導入が簡単な公式Vue.jsテンプレートを使った 方法を紹介します
16.
公式Vue.jsテンプレート github.com/vuejs‑templates/webpack Vue.jsプロジェクトのプロトタイプを作成してくれるCLIツール npm install -g
vue-cli でインストール 使い方: $ vue init webpack <project> 対話的に作成するプロジェクトの設定を決めていく
17.
18.
指示された通りに進める $ cd dentoolt-vue $
npm install $ npm run dev
19.
開発サーバが起動して自動でブラウザで開いてくれる
20.
プロジェクト構成 .babelrc .editorconfig .gitignore .postcssrc.js README.md index.html package.json build/ ... 開発サーバやwebpackの設定 config/
... その他設定(環境変数等) node_modules/ src/ App.vue ... エントリポイント main.js assets/ ... アセット(画像とか) components/ ... コンポーネント Hello.vue static/ ... ??? src/components にコンポーネントを追加していく
21.
時間を表示するコンポーネントを書く DurationView.vue mm:ss.ms 形式で残り時間を表示 Template(一部) <template> <div class="view"> <span>{{ minutes
| pad }}分</span> <span>{{ seconds | pad }}秒</span> <span>{{ cs | pad }}</span> </div> </template>
22.
ロジック(一部) <script> export default { name:
'duration-view', props: ['value'], // 0以上の数値 computed: { minutes() { return Math.trunc(this.value / 1000 / 60); }, seconds() { return Math.trunc(this.value / 1000) % 60; }, cs() { return Math.trunc(this.value / 10) % 100; }, }, filters: { pad(value) { // 左側を0詰めして2桁にするフィルタ return value.toString().padStart(2, '0'); }, }, }; </script>
23.
value の単位はms value を親コンポーネントから与えると minutes , seconds , cs プロパティが自動で生成される
24.
補足 プロパティを見るのにVue.js devtoolsを使っている 発行されたアクション(jsネイティブのイベントのようなもの)も見る ことができる
25.
タイマーを書く CountdownTimer.vue Template <template> <duration-view :value="duration" /> </template>
26.
import DurationView from
'./DurationView'; export default { name: 'countdown-timer', components: { DurationView, }, data: function () { return { paused: true, ended: true, duration: 0 }; }, ... }; </script>
27.
..., methods: { start(duration =
this.duration) { if (this.paused) { this.paused = false; this.ended = false; this.updateDuration(duration); // 残り時間を更新 this.startRAFLoop(); // タイマーを起動 } else { this.updateDuration(duration); } this.$emit('start'); // イベント発行 }, stop() { this.updateDuration(0); // 残り時間を0に }, pause() { this.paused = true; // pausedフラグを立てる }, ... } }; </script>
28.
肝心のタイマー起動部分 startRAFLoop() { const raf
= window.requestAnimationFrame; const cb = (currentTime_ms, prevTime_ms) => { if (this.ended) { this.$emit('pause'); this.$emit('ended'); } else if (this.paused) { this.$emit('pause'); } else { // if `this.paused` is `false`, this timer this.updateDuration(this.duration - (currentTime_ms - raf(time_ms => cb(time_ms, currentTime_ms)); } }; const initialTime_ms = window.performance.now(); raf(time_ms => cb(time_ms, initialTime_ms)); },
29.
window.requestAnimationFrame() とは? window.requestAnimationFrame() メソッドは、ブラウザにアニメ ーションを行いたいことを知らせて、次の再描画の前にアニメーシ ョンを更新するために指定した関数を呼び出すことを要求します。 このメソッドの引数はひとつで、再描画の前に呼び出すコールバッ クメソッドです。 描写のタイミングに合わせて登録したコールバック関数が呼び出さ れる ハードウェアに優しい 60回/秒 setTimeout,
setIntervalよりも短い間隔で呼び出される
30.
その他の機能 他にも色々機能を作ったけど時間がないので省略するよ! ほとんどの機能は実装済み https://github.com/mizdra/vue‑test
31.
実演 $ git clone
https://github.com/mizdra/vue-test $ cd vue-test $ npm install $ npm run dev
32.
まとめ 公式Vue.jsテンプレートでお手軽に始められる (個人的に)単一ファイルコンポーネントがしっくりくる Templateで(JSXよりも)読みやすいコードがか書ける
Baixar agora