Vue.js を使った最近のシステム構成を紹介

Vue.jsを使ったシステムを去年末から会社で作っているので、その使っている技術を会社のイベントで発表したものです

Transcript

1. Vue.js を使った最近のシステ ム構成を紹介 2018 年 8 月 17 日
3. 開発言語 Vue.js と TypeScript で開発している ちょうど 開発を始めるタイミングで Vue.js 2.5 がリリース バージョン2.5 はTypeScriptでVue.jsを書く上で大きな変更があったバージョン！ Vue.js作者のEvan Youもブログで紹介しているくらいです Upcoming TypeScript Changes in Vue 2.5 by Evan You https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7 e2ecf08
4. 何が変わったのか Vue.js のようなオブジェクト構文の言語上で、 TypeScript は this を推論できなかったの で、エディタが補完してくれない Vue.js 2.4 以前の解決方法 Vue.js 2.5 以降
5. ・vue-class-component を使う必要無く、Vue.js の標準APIのみで 解決できるようになった ・今までJSで使っていたオブジェクト構文で書ける ⇒ つまりVue.js 2.5 以降であれば、TypeScriptへの移行もしやす い ・VSCode などのIDEの自動補完が大幅に改善されている 良くなった点
6. Vue.js + Vuex Flux系フレームワークのVuexを使っている
7. その他の使っているライブラリ Chart.js: チャート Vuetify: テーブルとUI全体 ElementUI: Datepickerのみ
8. ビルド環境 vue-cli 等のスキャフォールディングツールは使わず、自作
9. テストについて 以下をテスト対象にしている ・Vuex (Action, Mutation, Getter) ・Vue.js (Component全て) ・E2E
10. テスト環境 ▪ UnitTest Jest + vue-test-utils ▪ E2E Jest + Puppeteer ▪ CircleCI プルリク時にUnitTestとE2Eを実行
11. Vue.jsの最近のテスト状況について 開発を始めた当初（去年末）は、テストライブラリの選定が難しかった 理由は、vue-test-utils と Jest + Vue.jsという構成がが新しかったため、導入を見送った 現在は、Jest + vue-test-utils で安定だと思う 当初は Karma + Mocha で作っており、環境を全て作り変えました
12. 今後やること・課題 開発当初は、Vue の良いテストライブラリが無かったので、Vue のテストを書いていな かった（Vuex は書いている） Babel7 の検証とバージョンアップ（TypeScriptをサポートするので） webpack-dev-server から webpack-serve に移行する ⇒ webpack-serve は非推奨となり webpack-dev-server を引き続き使うことになりまし た