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

Vue.js を使った最近のシステム構成を紹介 2018 年 8 月 17 日

開発言語 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

何が変わったのか Vue.js のようなオブジェクト構文の言語上で、 TypeScript は this を推論できなかったので、エディタが補完してくれない Vue.js 2.4
以前の解決方法 Vue.js 2.5 以降

・vue-class-component を使う必要無く、Vue.js の標準APIのみで解決できるようになった・今までJSで使っていたオブジェクト構文で書ける ⇒ つまりVue.js 2.5 以降であれば、TypeScriptへの移行もしやすい
・VSCode などのIDEの自動補完が大幅に改善されている良くなった点

Vue.js + Vuex Flux系フレームワークのVuexを使っている

その他の使っているライブラリ Chart.js: チャート Vuetify: テーブルとUI全体 ElementUI: Datepickerのみ

ビルド環境 vue-cli 等のスキャフォールディングツールは使わず、自作

テストについて以下をテスト対象にしている・Vuex (Action, Mutation, Getter) ・Vue.js (Component全て) ・E2E

テスト環境 ▪ UnitTest Jest + vue-test-utils ▪ E2E Jest +
Puppeteer ▪ CircleCI プルリク時にUnitTestとE2Eを実行

Vue.jsの最近のテスト状況について開発を始めた当初（去年末）は、テストライブラリの選定が難しかった理由は、vue-test-utils と Jest + Vue.jsという構成がが新しかったため、導入を見送った現在は、Jest + vue-test-utils
で安定だと思う当初は Karma + Mocha で作っており、環境を全て作り変えました

今後やること・課題開発当初は、Vue の良いテストライブラリが無かったので、Vue のテストを書いていなかった（Vuex は書いている） Babel7 の検証とバージョンアップ（TypeScriptをサポートするので） webpack-dev-server から
webpack-serve に移行する ⇒ webpack-serve は非推奨となり webpack-dev-server を引き続き使うことになりました

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

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

kurosame

More Decks by kurosame

Other Decks in Programming

Featured

Transcript