以前のbingoゲームを Vue.js で書き直す
以前書いた bingoゲーム
GitHub - kanayannet/bingo: bingo game helper
を Vue.js を使い 勉強がてらに書き直して見ました。
やってみての感想は 前回が データを整形するアルゴリズムの部分 と DOMにデータを反映するコードが一緒くたになってしまったのですが、今回は比較的分離する事に成功しました。
( そうする事で データを整形するアルゴリズムの部分だけにテストコードを適用できる )
なぜやり易かったのか、振り返って見ると..
変数の値を書き換えるだけで view(dom)の書き換えを自動的に行ってくれるポイントが大きかったように見えます。(双方向のデータバインド)
jquery だけの場合 変数の値を書き換える -> DOM にその情報を渡す という二つのコーディングが必要ですが( 非同期処理内で行うと 一緒くたになりやすい) Vueの事前に宣言しておくだけで双方向のデータバインドが可能になる方法だと 非同期処理内では データ書き換えだけを行えば良く上手くいきました。
言葉にすると解りづらいのですが(汗) コードを比較すると解ると思います。
おまけ: 非同期処理のテストコードを jest で書いたのですが、setInterval した後の値の評価を どうしたら良いか始め解らなかったのでついでにここに記します。
http://jestjs.io/docs/ja/timer-mocks.html
非同期処理が全て走った後, 非同期処理が何回繰り返した など 拾え(コントロールできる)て便利です。
Jest で Promise
そもそも Promise をきちんと理解してなかったのが原因なのですが..
このサンプルページを見てもイマイチ理解できなかったのでメモ。
ここで表示されてるサンプルコードはコピってもそのまま実行できません(汗)
まあ、理解してやってくれということだろうね。
そこで他の Promise のページなどを見ながら自分なりに理解し..
テストが通るコードを作成したのが↓
let async = (data) => {
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve(data);
}, 3000);
})
};test('the data is peanut butter', () => {
expect.assertions(1);
return async('peanut butter').then((data) => {
expect(data).toBe('peanut butter');
});
});
出来た!
copy event 色々..
copy event が絡んだ実装を勉強がてらにして気がついた事をつらつらと...
通常
$(document).on('copy', function(event) {...
しかしこれだと、IE8 が発火せず(汗)
ところが下記に変更したら動いた(何故だ)
$('body').on('copy',function(event){...
また、選択中の文字も
通常
window.getSelection().getRangeAt(0);
で取得可能だがIE8では対応できないので下記に変更
try{
data = window.getSelection().getRangeAt(0);
}catch(err){
data = document.selection.createRange();
};
ユーザのコピーイベントをoverride したいので
e.preventDefault したかったがこれもNGなので下記にする
try{
e.preventDefault();
}catch(err){
e.returnValue=false;
};
なんだが、当初より長いコード&サポート大変そうな感じ。
以上、ちょっとしたメモ書きでした。
naive_bayes
Gunma.web #28
3ヶ月に一度開催のGunma.webを今回も開催してきました。
今回のテーマは「Vue.js と Angular」という事でここをメインに記事を書きます。
- 「Electronでクロスプラットフォーム音楽プレイヤーを作ってみた」
- 「Angular」を使ってデスクトップアプリをElectronで作った話でした。
残念ながら完成品はお目にかかれませんでしたが、「使えるのか?」という事が新鮮な驚きでした。 - 「ネイティブアプリのかじりかた」
- 「React」「Angular」「Vue」をそれぞれ使っての文字通りの発表でした。
会場から「どれがどういう団体がどういう具合に開発してるか?」的な質問が飛び自分はReact Native くらいしか聞いた事がなかったので知る事ができてよかったです。 - 「Compared Tips」
- 自分の発表です。
- 発表後 twitter のtimeline を見て気がつきましたが、自分が解らなかったというポイントに対してレスをいただけて助かりました。(@Yug1224 さん感謝!)
-
https://t.co/NGsfqQpO8Z#gunmaweb
— ぷーじ (@YuG1224) 2017年7月15日
他にも通常LT(中には半分ネタLT)、飛び込みLTがあり楽しくも様々な技術を知る事ができました。
2次会は夏ということもあり屋外(屋根付き)でBBQ!(ビール飲み放題)
当初予定と違って(?)、ラムチョップ、ホタテ、エビなどやや豪華(?)になりましたが気にしない!
とてもおいしく頂きました!
#gunmaweb 2次会 pic.twitter.com/lYhFMTd54s
— Hiroaki Kanazawa (@kanayannet) 2017年7月15日
子供向けにビンゴゲーム
先日、子供向けにビンゴゲームの手助け(?)をするブラウザ上で動くアプリを作りました。
色んな人に見せたところウケが良い(?)ので久々に github に公開しました。
手助けというか..ボタンを押すと音楽を流しながら次の番号を画面上に数字をシャッフルし決めてくれるだけなんすけどね。
思ったより好評でした笑
Takasaki.go #3
月一開催 Takasaki.go に参加してきました。
今回は pointer から始まり...slice に突入。
slice に突入した途端..
「おうっふ」的な...。
「:」を挟んで前と後ろで数え方(0からか1からか)が違う。
https://go-tour-jp.appspot.com/moretypes/7
「マジか」
慣れなんだろうな〜(遠い目)
他の方も奇妙な印象を受けてくれたので
「あ、自分だけじゃないんだ」と心のどこかで安心?(汗)
次回は何が出てくるだろう?