(元)データサイエンティストらしく、見える化をしてみたって話

TypeScript Vue.js JavaScript フロントエンド

f:id:ecb_tkaihatsu:20200730174359p:plain

この記事は前回（TSTSTS）の続きです。

前回の記事は ↓↓↓↓↓こちら↓↓↓↓↓

blog.ecbeing.tech

はじめに

ブンブンHello World.

最近はフロントエンドよりのコーディングにハマりつつある開発です。

どうせフロントエンドやるなら、見た目に凝った何かを入れたい。

だってフロントエンドだもの。

そんな感じで今回は、実行結果をグラフにしてそれっぽい感じにする方法をまとめたいと思います。

見える化、出来ていますか？

前回までのあらすじ

多くの方にご覧いただけいるようで、感謝の極みです。

前回の記事を簡単に一言で説明すると、TypeScriptに入門してみました。

TS入門してみた

「エンジニアは1年に1言語」と一部では言われており、それに倣って私も新しい言語を学ぼうと思いました。

そこで、最近注目されている「JSを静的型付き言語にした」TypeScript(TS)なるものを触ってた次第でございます。

  • 面白いでござる
  • なんか書いてみましょう
  • なんか書いてみたら言語の勉強できました(/・ω・)/

やはり言語に慣れるには何か書いてみるのが手っ取り早いですね。

特に自分で動作の結果が分かっているものを別の言語で実現する場合、正しい挙動に向かって実装できるので効率が良いと思います。

アルゴリズムを把握していると実装のパターンを考えやすく学習コストが高くなりにくと感じました。

何かしらのアルゴリズムの実装を通じて、TSの基本のキくらいはわかったような気がします。

静的型付き言語万歳。

課題点

そんな感じで何かしらを実装してTSを学習しましたが、TS勉強のために書いたコードにおいて以下のような課題を感じています。

  • 結果を文字列で出力してるだけ
  • コードの出力の方法もダサい
  • コードが汚い

結論：いろいろ見づらい…どうにかできないだろうか…

コードが汚い点については私のコーディング力如何であるため、一朝一夕で解決できるものではありません。

一方のそれ以外の2点については解決の糸口があり、それが「見える化」です。

所謂データを何かしらのグラフや絵などに落とし込んだりするわけですが、これが絶大な効果を発揮します。

今回はそんな「見える化」のために新しく導入したものについて紹介致します。

vue-chartjs

今回の目的である「見える化」のためにグラフに強いライブラリを探した結果、以下のようなものを発見いたしました。

  • c3.js(14289)
  • chart.js(910)
  • Google Charts(267)
  • Plotly.js(91)
  • vue-chartjs(81)

※括弧の数字はQiitaでのキーワード検索ヒット数

この中でも、今回は「vue-chartjs」を選択しました。

理由としては

  1. 最近Vueを触っているので多少慣れるのが早そう
  2. vue-chartjsの記事が少ない

といったところが挙げられます。

今回記事を書くことで、少しでも誰かの助けになれば…といったところですね。

そんな感じで、今回は TS+Vue.js+vue-chartjs の構成でやっていこうと思います。

Vue.js

React, Angularと並んで最近人気なJSのフレームワーク。

Vue.jsではTSも公式でサポートされているので、今回の目的にも合致します。

vue-chartjs

Chart.jsをVue環境で使用するためのラッパー。

Chart.jsを頑張って導入するよりかはシンプルに書けそうな気がする。

何はともあれ実装

エンジニアたるもの、手を動かすべし。

打鍵回数は経験値。

今回実装したもののリポジトリはこちらになります。

クローンして以下のコマンドで実行が可能です。

npm start

以下ではやったことを簡単に説明していきます。

環境構築

今回の実装もすべてNode.jsを用いて行いました。

もし環境を一から再現する場合は以下のものを利用するので、インストールしましょう。

  • webpack
  • TypeScript
  • vue-cli
  • chartjs
  • vue-chartjs
npm install webpack webpack-cli webpack-dev-server
npm install typescript ts-loader
npm install vue vue-loader vue-template-compiler css-loader
npm install chart.js vue-chartjs

Node.js環境で様々なスクリプトを1つにまとめるためのwebpackおよびwebpack-cli、ローカルホストで開発環境webサーバーとして実行するためのwebpack-dev-serverをはじめに用意します。

次に、今回の主役であるtypescriptと、webpack上で処理するためのts-loaderをインストールしてTypeScript環境を整えます。

Vue.jsの環境を整えるためにvueと、.vueファイルを読み込むためのvue-loader, vue-template-compiler、そして.vueファイルでCSSを扱うためのcss-loaderをインストールします。

最後に、今回もう一つの主役であるchart.js, およびvueでラップしたvue-chartjs をインストールして準備完了です。

もしかしたら何か抜けているかもしれません。その際はリポジトリの「package.json」を参照していただければ必要なもの一式が設定されています。
※最終的に利用していないモジュールが含まれていることがあります。

…インストールするものが多いですね。

この辺は最近注目されているDenoを用いることで解決ができるかもしれません。

vue-chartjsのコーディング

vue-chartjsでは、APIを呼び出すことで簡単にグラフを描画することができます。

例えば線グラフを描画する場合、以下のようにすることでレンダリングすることが可能です。

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  mounted () {
    this.renderChart(data, options)
  }
}

renderChart()の引数で渡しているdataとoptionsについては、以下のようなデータ構造になっております。

const data = {
    labels: ['hoge','fuga','var','test'],  /* 出力されるデータラベルの配列(String) */
    datasets: [
        {
            data: [0,1,2,3],  /* プロットされるデータの配列(Number) */
            label: "Optimization Result",  /* 出力されたデータの凡例(String) */
            borderWidth: 1,  /* 出力される線の太さ(Number) */
            lineTension: 0  /* ベジェ曲線のテンション(Number) */
        }
    ]
};

const options = {
    responsive: true,  /* ブラウザの横幅に応じて横幅、高さをレスポンシブに変更するか否か(Boolean) */
    maintainAspectRatio: false,  /* 高さの自動調節をするか否か(Boolean) */
    legend: {
      display: true  /* 凡例を出力するか否か(Boolean) */
    }
};

上記以外のプロパティも沢山ありますが、今回は利用しなかったので説明を省きます(都合がよい)。

これらについてはvue-chartjs公式や、Chart.js公式、有志の方が作成している日本語翻訳したサイトを参照いただけると、より詳細な内容がわかります。

合☆体

今回はTypeScriptとVue、Vueとvue-chartjsをそれぞれ連結させることでTypeScriptとvue-chartjsの連結を実現しています。

  1. エントリーポイントをTypeScriptに設定
  2. TypeScriptからVue .jsを読み込み、画面の描画を実行
  3. 画面側のボタンアクションでTypeScriptで書かれた最適化エンジンを実行
  4. 出力された結果をvue-chartjsでグラフ描画

今回のソースのざっくりとした流れは上記のようになります。

これらのアクションをNode.jsでまとめることで、1つのアプリケーションとして実行しています。

結果

なんかスゲーじゃん！！

今回は最適化の結果と、各世代の最適解の変数の並行座標をプロットしてみました。

ここら辺は専門知識になるので、さらっと説明します。

今回の実装で、グラフの動的な更新が実現できました。

ボタンを押すごとに新しいデータが生成され、それに合わせてグラフの内容が変化します。

今回は100世代分の最適解の推移と、各最適解の変数の推移を相関関係として出力しています。

また、データが更新されるたびに再描画がされるので、パラメータを変更しての結果をすぐに確認することができます。

交叉率を0.8に変えた場合

交叉率を0.2に変えた場合

上の図左軸に注目していただければわかりますが、縦軸の数値が0.8の時と0.2の時で変わっていることがわかります。

パラメータの値を小さくしたほうが成績が良くなっていることがパっと見でわかりますね。

おわりに

なんとか「見える化」をすることができました。

今回は比較的使いやすそうなvue-chartjsを利用しましたが、いずれ他のものも利用してみたいと思います。

Pythonなどでもよく利用されているPlotlyにJSのAPIが存在するらしく、それを利用できればより多くの種類のグラフを利用することができますね。

総括：ナウいエンジニアに一歩近づいた気がした


～ecbeingでは、「1年に1言語」の精神で成長を続けたいエンジニアを大募集中です！～ careers.ecbeing.tech