Deveroper メモ

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

require('vue') する時の注意点

javascript

目的

  • Vue.js を require して使う時のメモ書き(エラーになる時 ならない時)
  • webpack を使う時

エラーになるパターン

// src/main.js
const Vue = require('vue')

//...

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/main.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist')
  }
}

エラーにならないパターン

// src/main.js
const Vue = require('vue')

//...

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/main.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist')
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.common.js'
    }
  }
}

resolve 以降がミソ

参考元

vuejs.org

詳しくはここに書いてある。

  • ※ Runtime + Compiler vs. Runtime-only の箇所

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

javascript

以前書いた 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

javascript

そもそも 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 色々..

javascript

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

python 機械学習

前回の 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！(ビール飲み放題)

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

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

 

子供向けにビンゴゲーム

javascript

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

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

github.com

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

思ったより好評でした笑