Deveroper メモ

記事内容に絶対の保証はなく..どちらかというと自分用のノウハウ蓄積ページ。 それでも良ければ見ていってください。

以前のbingoゲームを Vue.js で書き直す

以前書いた bingoゲーム

GitHub - kanayannet/bingo: bingo game helper

を Vue.js を使い 勉強がてらに書き直して見ました。

github.com

やってみての感想は 前回が データを整形するアルゴリズムの部分 と DOMにデータを反映するコードが一緒くたになってしまったのですが、今回は比較的分離する事に成功しました。

( そうする事で データを整形するアルゴリズムの部分だけにテストコードを適用できる )

なぜやり易かったのか、振り返って見ると..

変数の値を書き換えるだけで view(dom)の書き換えを自動的に行ってくれるポイントが大きかったように見えます。(双方向のデータバインド)

jquery だけの場合 変数の値を書き換える -> DOM にその情報を渡す という二つのコーディングが必要ですが( 非同期処理内で行うと 一緒くたになりやすい) Vueの事前に宣言しておくだけで双方向のデータバインドが可能になる方法だと 非同期処理内では データ書き換えだけを行えば良く上手くいきました。

言葉にすると解りづらいのですが(汗) コードを比較すると解ると思います。

 

おまけ: 非同期処理のテストコードを jest で書いたのですが、setInterval した後の値の評価を どうしたら良いか始め解らなかったのでついでにここに記します。

http://jestjs.io/docs/ja/timer-mocks.html

非同期処理が全て走った後, 非同期処理が何回繰り返した など 拾え(コントロールできる)て便利です。

Jest で Promise

そもそも Promise をきちんと理解してなかったのが原因なのですが..

このサンプルページを見てもイマイチ理解できなかったのでメモ。

doc.ebichu.cc

ここで表示されてるサンプルコードはコピってもそのまま実行できません(汗)

まあ、理解してやってくれということだろうね。

 

そこで他の 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 #29 で「機械学習で奇妙な冒険」を話しました。

その時の言語は Ruby だったのですが..

ウケが良かったし機械学習といえば python なので

python で実装したものをアップしました。

 

github.com

 

アルゴリズムが公開されており意外と特殊なライブラリ(rubyだとclassifierを使って出来ました)を使わずに出来ました。

別言語で実装し直しは「その言語や言語の文化に慣れる」いい機会ですね。

Gunma.web #28

3ヶ月に一度開催のGunma.webを今回も開催してきました。

今回のテーマは「Vue.js と Angular」という事でここをメインに記事を書きます。

  • 「Electronでクロスプラットフォーム音楽プレイヤーを作ってみた」
    • 「Angular」を使ってデスクトップアプリをElectronで作った話でした。
      残念ながら完成品はお目にかかれませんでしたが、「使えるのか?」という事が新鮮な驚きでした。
  • 「ネイティブアプリのかじりかた」
    • 「React」「Angular」「Vue」をそれぞれ使っての文字通りの発表でした。
      会場から「どれがどういう団体がどういう具合に開発してるか?」的な質問が飛び自分はReact Native くらいしか聞いた事がなかったので知る事ができてよかったです。
    • ネイティブアプリのかじりかた / Gunma.web#28 // Speaker Deck

  • 「Compared Tips」

他にも通常LT(中には半分ネタLT)、飛び込みLTがあり楽しくも様々な技術を知る事ができました。


2次会は夏ということもあり屋外(屋根付き)でBBQ!(ビール飲み放題)

当初予定と違って(?)、ラムチョップ、ホタテ、エビなどやや豪華(?)になりましたが気にしない!

とてもおいしく頂きました!

 

子供向けにビンゴゲーム

先日、子供向けにビンゴゲームの手助け(?)をするブラウザ上で動くアプリを作りました。

色んな人に見せたところウケが良い(?)ので久々に github に公開しました。

github.com

手助けというか..ボタンを押すと音楽を流しながら次の番号を画面上に数字をシャッフルし決めてくれるだけなんすけどね。

思ったより好評でした笑

Takasaki.go #3

月一開催 Takasaki.go に参加してきました。

takasakigo.connpass.com

今回は pointer から始まり...slice に突入。

slice に突入した途端..

「おうっふ」的な...。

「:」を挟んで前と後ろで数え方(0からか1からか)が違う。

https://go-tour-jp.appspot.com/moretypes/7

「マジか」

慣れなんだろうな〜(遠い目)

他の方も奇妙な印象を受けてくれたので

「あ、自分だけじゃないんだ」と心のどこかで安心?(汗)

次回は何が出てくるだろう?