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

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

Transcript

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

   View Slide

2. View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide