【日記】Vue.jsのUIからNode.jsで5秒足を作る

May 21, 2020

特別面白くない開発日記である

kaihatu_nikki

日記について

今回はこれといって新しいことをやっておらず今までの積み重ねなので特に書くことが無くただの開発日記になってしまった。

今回の目的

今回は以前制作したNode.jsにてbitFlyer(FX)の約定履歴から5秒足のデータを作るシステムがありそちらをVue.jsUIから操作できるようにするという目的。

約定データはローカルネットワーク上のPCがInfluxDBにて記録している。

最後の記事にコード全体を貼り付けてある。

UI

突貫工事のため酷いデザインであるが、1日分のデータを作成するのにInfluxDBにアクセスする必要があり約50秒ほどかかるのでプログレスバー(サークル)を実装した。

生の約定データをローカルで保存している場合はもっと早くなると思われる。

相変わらずマテリアルデザインにはVuetifyを使っている。

GIFによる動作サンプル

spread

カレンダーで日付を選択して実行するだけで1日分のファイルがローカルに出来上がってくる。

2020-05-20_19h23_33

データ範囲は「1時間だけ...」のようにに絞ってデータが欲しいということは今のところ無く、2日以上の大きなデータの利用も考えていないので設定した1日分のみを取ってくることとしている。

Vue.js <> Node.jsとの通信

Socket.ioで実装している。非常にコードが少なく済むのでオススメ。

Socket.ioもEvent-Drivenの概念で動くので先日の私の記事

【Node.js】EventEmitterとは何?いつ使うの?

を読んでいるとより扱いやすくなると思う。

今回のTips

これは備忘録でもある。

5秒足を作っているモジュールが内部でいくつかPromiseの入れ子になっている。つまり非同期処理に非同期処理を重ねるという複雑な構造になりかけている(今回の例はまだ易しい方)

これをさらに別のプログラムから呼び出して実行しており、5秒足作成が終わったかどうかのを親が判断をするときに内部のPromiseの末端をハンドリングして返す必要がある。

これは非常に面倒だと考えここでもEventEmitterを採用することにした。

単純に親側でイベントエミッターを作成しモジュールに渡す。一番末端の処理が終了した時に渡されたイベントエミッターをemitすることにより処理が終了したかどうかのハンドルができるようになっている。

今後の課題

  • すでに出力済みの日付を指定した場合の上書き確認
  • データをバックテストするモジュールおよびUIの構想が未だ曖昧
  • BLOGを日記形式ではなく役立つ記事にする方法の考案 ← 重要

さいごに

とりあえず今回は目標としたものは実装完了し正常動作している。

しかしながら具体的に「こうしたい」というイメージがまったくないため成り行きで作っているのはいかがなものか。

いまのところは目先で追加+修正できるところを細かくやっていくほかない。

ただ、日記形式はBLOGとしては最悪だと思うので出来る限りなにか役に立つ情報を載せたい。

とにかく「ドヤ」するBLOG(とTwitter)ではダメだというのは常に頭に置いておきたい。必ず読者に何かしらメリットがなければ読まれるに値しない。

ブロガーとしても先は長い。

この記事をシェア:

author icon

仮想トイレ @CrypticToilet
プログラミングや仮想通貨のシステムトレードに関する情報を更新中!どんな情報を流しても詰まらないトイレ。