Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js を使った最近のシステム構成を紹介
Search
kurosame
August 17, 2018
Programming
0
250
Vue.js を使った最近のシステム構成を紹介
Vue.jsを使ったシステムを去年末から会社で作っているので、その使っている技術を会社のイベントで発表したものです
kurosame
August 17, 2018
Tweet
Share
More Decks by kurosame
See All by kurosame
Reactの新機能を紹介
kurosame
0
150
フロントエンドのテストについて
kurosame
0
540
Other Decks in Programming
See All in Programming
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
小さな開発会社を作った理由
polidog
0
1.9k
CSC307 Lecture 05
javiergs
PRO
0
210
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 12
javiergs
PRO
0
220
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Featured
See All Featured
Music & Morning Musume
bryan
43
5.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Six Lessons from altMBA
skipperchong
24
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Teambox: Starting and Learning
jrom
130
8.6k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Building Applications with DynamoDB
mza
89
5.8k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Transcript
Vue.js を使った最近のシステ ム構成を紹介 2018 年 8 月 17 日
None
開発言語 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 を引き続き使うことになりまし た