Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Vue.js でタイマーを作る
自己紹介
mizdra
学域1年生
ポケモンの乱数調整のツールを作ったりしています
モチベーション
Vue.js でタイマーを作る
乱数調整に使われているエメタイマーというタイマーがFlash製な
のでリプレースしたい
Vue.js 流行ってるし使ってみたい
エメタイマーとは
実際に見たほうが早い
http://pokem.client.jp/emloop.htm
仕様
(カウントダウン)タイマー
時間を設定し, カウントダウンを開始する
フレーム⇔秒変換機能
 60フレーム == 1秒 
メインタイマーが開始する前に別途メインタイマー開始待機用のタ
イマー(待機タイマー)を設ける
n秒待機してから(メイ...
手順
1. Vue.js + Webpack のテンプレートを作成
2. Vueコンポーネントをゴリゴリ書く
今日紹介する予定の話題
Vue.js (メイン)
vuelidate
window.requestAnimationFrame
Fetch API
Web Audio API
今日紹介する話題
Vue.js (メイン)
vuelidate
window.requestAnimationFrame
Fetch API
Web Audio API
時間がないのでちょっとだけ...
やっていきます
Vue.js とは
ユーザーインターフェイスを構築するためのプログレッシブフレー
ムワークです。 https://jp.vuejs.org/v2/guide/#はじめに
仮想DOMのサポート(Vue.js v2 以降)
新しいDOMと古いDOM...
Reactとの違い
軽い
ReactはJSX, Vue.jsはTemplate
すべての正しいHTMLはテンプレートとしても正しくなる
Pug(旧Jade), Slim, Hamlなどのメタ言語を自由に使える
単一ファイルコンポーネント
Tem...
JSX in React
// https://jp.vuejs.org/v2/guide/comparison.html
render () {
let { items } = this.props
let children
if (item...
Template in Vue.js
<!-- https://jp.vuejs.org/v2/guide/comparison.html -->
<template>
<div class="list-container">
<ul v-if...
単一ファイルコンポーネント
<!-- hello.vue -->
<template>
<p class="message"> {{ msg }} </p>
</template>
<script>
export default {
name:...
Vue.js + Webpack のテンプレートを作成
Vue.js を導入する方法はいくつかある
今回はそのなかでも最も導入が簡単な公式Vue.jsテンプレートを使った
方法を紹介します
公式Vue.jsテンプレート
github.com/vuejs‑templates/webpack
Vue.jsプロジェクトのプロトタイプを作成してくれるCLIツール
 npm install -g vue-cli でインストール
使い方:  ...
指示された通りに進める
$ cd dentoolt-vue
$ npm install
$ npm run dev
開発サーバが起動して自動でブラウザで開いてくれる
プロジェクト構成
.babelrc
.editorconfig
.gitignore
.postcssrc.js
README.md
index.html
package.json
build/ ... 開発サーバやwebpackの設定
con...
時間を表示するコンポーネントを書く
 DurationView.vue 
 mm:ss.ms 形式で残り時間を表示
Template(一部)
<template>
<div class="view">
<span>{{ minutes | pa...
ロジック(一部)
<script>
export default {
name: 'duration-view',
props: ['value'], // 0以上の数値
computed: {
minutes() {
return Math....
 value の単位はms
 value を親コンポーネントから与えると minutes ,  seconds ,
 cs プロパティが自動で生成される
補足
プロパティを見るのにVue.js devtoolsを使っている
発行されたアクション(jsネイティブのイベントのようなもの)も見る
ことができる
タイマーを書く
 CountdownTimer.vue 
Template
<template>
<duration-view :value="duration" />
</template>
import DurationView from './DurationView';
export default {
name: 'countdown-timer',
components: {
DurationView,
},
data: ...
...,
methods: {
start(duration = this.duration) {
if (this.paused) {
this.paused = false;
this.ended = false;
this.updateD...
肝心のタイマー起動部分
startRAFLoop() {
const raf = window.requestAnimationFrame;
const cb = (currentTime_ms, prevTime_ms) => {
if (t...
window.requestAnimationFrame() とは?
window.requestAnimationFrame() メソッドは、ブラウザにアニメ
ーションを行いたいことを知らせて、次の再描画の前にアニメーシ
ョンを更新するために...
その他の機能
他にも色々機能を作ったけど時間がないので省略するよ!
ほとんどの機能は実装済み
https://github.com/mizdra/vue‑test
実演
$ git clone https://github.com/mizdra/vue-test
$ cd vue-test
$ npm install
$ npm run dev
まとめ
公式Vue.jsテンプレートでお手軽に始められる
(個人的に)単一ファイルコンポーネントがしっくりくる
Templateで(JSXよりも)読みやすいコードがか書ける
Vue.js でタイマーを作る
Nächste SlideShare
Wird geladen in …5
×

Vue.js でタイマーを作る

4.924 Aufrufe

Veröffentlicht am

Dentoo.LT #16 飛び入り枠でのスライドです

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Vue.js でタイマーを作る

  1. 1. Vue.js でタイマーを作る
  2. 2. 自己紹介 mizdra 学域1年生 ポケモンの乱数調整のツールを作ったりしています
  3. 3. モチベーション Vue.js でタイマーを作る 乱数調整に使われているエメタイマーというタイマーがFlash製な のでリプレースしたい Vue.js 流行ってるし使ってみたい
  4. 4. エメタイマーとは 実際に見たほうが早い http://pokem.client.jp/emloop.htm
  5. 5. 仕様 (カウントダウン)タイマー 時間を設定し, カウントダウンを開始する フレーム⇔秒変換機能  60フレーム == 1秒  メインタイマーが開始する前に別途メインタイマー開始待機用のタ イマー(待機タイマー)を設ける n秒待機してから(メインタイマーの)カウントダウン開始する 機能 エメタイマーの機能を再現するだけ
  6. 6. 手順 1. Vue.js + Webpack のテンプレートを作成 2. Vueコンポーネントをゴリゴリ書く
  7. 7. 今日紹介する予定の話題 Vue.js (メイン) vuelidate window.requestAnimationFrame Fetch API Web Audio API
  8. 8. 今日紹介する話題 Vue.js (メイン) vuelidate window.requestAnimationFrame Fetch API Web Audio API 時間がないのでちょっとだけ...
  9. 9. やっていきます
  10. 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. 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. 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. 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. 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. 15. Vue.js + Webpack のテンプレートを作成 Vue.js を導入する方法はいくつかある 今回はそのなかでも最も導入が簡単な公式Vue.jsテンプレートを使った 方法を紹介します
  16. 16. 公式Vue.jsテンプレート github.com/vuejs‑templates/webpack Vue.jsプロジェクトのプロトタイプを作成してくれるCLIツール  npm install -g vue-cli でインストール 使い方:  $ vue init webpack <project>  対話的に作成するプロジェクトの設定を決めていく
  17. 17. 指示された通りに進める $ cd dentoolt-vue $ npm install $ npm run dev
  18. 18. 開発サーバが起動して自動でブラウザで開いてくれる
  19. 19. プロジェクト構成 .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 にコンポーネントを追加していく
  20. 20. 時間を表示するコンポーネントを書く  DurationView.vue   mm:ss.ms 形式で残り時間を表示 Template(一部) <template> <div class="view"> <span>{{ minutes | pad }}分</span> <span>{{ seconds | pad }}秒</span> <span>{{ cs | pad }}</span> </div> </template>
  21. 21. ロジック(一部) <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>
  22. 22.  value の単位はms  value を親コンポーネントから与えると minutes ,  seconds ,  cs プロパティが自動で生成される
  23. 23. 補足 プロパティを見るのにVue.js devtoolsを使っている 発行されたアクション(jsネイティブのイベントのようなもの)も見る ことができる
  24. 24. タイマーを書く  CountdownTimer.vue  Template <template> <duration-view :value="duration" /> </template>
  25. 25. import DurationView from './DurationView'; export default { name: 'countdown-timer', components: { DurationView, }, data: function () { return { paused: true, ended: true, duration: 0 }; }, ... }; </script>
  26. 26. ..., 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>
  27. 27. 肝心のタイマー起動部分 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)); },
  28. 28. window.requestAnimationFrame() とは? window.requestAnimationFrame() メソッドは、ブラウザにアニメ ーションを行いたいことを知らせて、次の再描画の前にアニメーシ ョンを更新するために指定した関数を呼び出すことを要求します。 このメソッドの引数はひとつで、再描画の前に呼び出すコールバッ クメソッドです。 描写のタイミングに合わせて登録したコールバック関数が呼び出さ れる ハードウェアに優しい 60回/秒 setTimeout, setIntervalよりも短い間隔で呼び出される
  29. 29. その他の機能 他にも色々機能を作ったけど時間がないので省略するよ! ほとんどの機能は実装済み https://github.com/mizdra/vue‑test
  30. 30. 実演 $ git clone https://github.com/mizdra/vue-test $ cd vue-test $ npm install $ npm run dev
  31. 31. まとめ 公式Vue.jsテンプレートでお手軽に始められる (個人的に)単一ファイルコンポーネントがしっくりくる Templateで(JSXよりも)読みやすいコードがか書ける

×