【フロントエンド編】1ヶ月でできる！？仕様書なしから機械学習予測システムを Web サービスにして納品
この記事は 1ヶ月でできる！？仕様書なしから機械学習予測システムを Web サービスにして納品 の続編です．
前述の記事では全体構成の説明でしたが，この記事では実際に用いたライブラリ等をなぜ選択したかを含めてメモがわりに残しておきます．
なお，私自身はフロントよりバックよりの人間（しかも最近はあまり Web 開発してない）なのでいろいろ間違いや改善点がありましたら，コメントや Twitter で教えていただけると嬉しいです．
なお，今回は研究の一環でありほぼ身内開発である点，開発期間が短すぎる点よりライセンスに関して細かく検証を行っていません．
商用利用などの際にはご注意ください．
フレームワーク
フレームワークは Vue.js を使用しました．
このプロジェクトでは以下が必要であると考えていました:
- 非同期に実行できるようにする
- 企業への提供後もアップデートの必要がある（仕様・要件が定まっていないため）→メンテナンス性が高い方が良い
また，せっかくやるので勉強の意味を込めて SPA (single page application) で構築したい欲もありました．
SPA であれば，フロントとバックエンドを分離できメンテナンス性が上がり，非同期実行はお手の物です．
SPA で構築するのであれば，現状では Vue.js と React が選択肢に上がると思います（Angular に恨みはありませんが，学習コストが高いイメージが…）．
私個人としては React は GatsbyJS を触るときに弄りましたが少し難しく感じており，Vue.js の方がお友達になれそうなので選択しました．
また，日本国内では Vue.js の使用例が多く，検索したら日本語で情報がいろいろ出てくるのも大きな利点です（なにぶん初回リリースまで1ヶ月なので）．
ライブラリ
導入した Vue.js のライブラリを紹介します．
- vue-router
- SPA 化のためには必須
- vue-loading-overlay
- いい感じに loading 表示を簡単にできる (props をいじるだけでいろいろできる)
- to C 案件ではないし，デザイン性はひとまず置いておいての，とりあえずリリースなのでこれで全ての loading が必要十分
- vue-js-toggle-button
- 簡単にいい感じのトグルボタンを導入できる
- 表示する文字の差し替えとかもできる
- intro.js
- コーチマーク[1] と呼ばれる類のヘルプを導入するため
- 簡単に導入できる
- 画面上のヘルプボタンを押すと出てくるようにすることで鬱陶しさを軽減（毎回出るとマジで鬱陶しいので／Cookie などブラウザ側で記憶して云々は実装の手間が増える）
- SheetJS
- JavaScript 上でエクセルのパースができる！（画期的）
- 変なデータがサーバにアップロードされてサーバが死ぬ前にフロントエンド側で止めるために使用
- ただし，ファイルが大きいとクライアント側で時間かかってしまうのはご愛敬
- 共同研究で情報系の人間意外とやりとりする都合上，エクセルなどのデータはロクなものが来ない（多分自分の経験が偏ってる）ので導入
- フロント側でエクセルから json に変換してサーバにアップロードしています
開発系ライブラリ
- webpack-dev-server
- JS のみで確認できる
- プロキシもできるので，APIサーバへの通信はプロキシすることも可能 (
/api/*は API サーバへ飛ばすとかやってました)
- browser-sync
- ライブリロードしてくれる，超便利，人権
- webpack でファイル監視→更新されればブラウザもリロード
注意すべき点
Scoped CSS
ここまで横着するやつは私だけだとは思いますが，Chrome でテストしてる限りは問題なかったので，「<style scoped> って書く必要ないじゃん」って思ってました．
ただ，フロントエンド側に導入するギミック的なものの構築にヘルプを入れていたので，その方が実行のテストをするときに予期していないページにまで style が適用されてしまい，いろいろと察しました…
ただ工数が増えるだけなので，ちゃんと style は <style scoped> で書き始めるのが安全です．
なお，Scoped CSS も万能ではないので，複雑になると問題があるようです（【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 – Qiita）．
ただ，今回の案件の規模的にそんなに問題はないでしょうということで Scoped CSS でやりました．
その他参考にしたもの
UI デザインフレームワーク
何もデザイン性がないのはいやですが，自分で書いたりする時間はないですし，Bootstrap や Vuetify，vue-materialやその他諸々にかまっている時間もないと考えました．
Bootstrap は何度も触ったことがありますが，いろいろと調べながら書かなきゃいけないので Bootstrap に工数を持ってかれるのは痛いです．
その他のものも触ったりしたことはありますが，Bootstrap よりも工数が取られるのは必至です．
そこで oxalorg/sakura: a minimal css framework/theme. を導入しました．
これはただの HTML にこれを読み込ませるだけでそれなりのものになる優れものです．
class の指定などもなく工数は導入以外に取られることなく，いい感じになるのは今回の案件にぴったりでした．
使ってみた感想としては社内ツールや自分用なら今後これを使って行こうかなと思えるものです．
導入方法は公式ページがいろいろなパターンが記述されており，大変参考になりますが，パッとイメージを掴みたい方はこちらをどうぞ: CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura | コリス
改善したいこと
フロントエンド開発周りの中で改善したい点をあげます．
API サーバの切り替え機能
webpack-dev-server の紹介で書きましたが，API サーバへプロキシできるようにはしていたのですが，API サーバを切り替えられるようにはしていませんでした．
その影響で本番サーバ，開発版サーバ，ローカルPC上のサーバと3種類のサーバへの切り替えをいちいち webpack.config.js を書き換えて対応していました．
なかなかめんどくさく，また書き換えると git に commit しないのか確認が表示されるので改善したい点です．
最後に
ブラウザのタブ整理がてら簡単にまとめました．
思い出したらまた追加します．
-
yk
