Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vuexに型を付けるパターンを調べた #gotandajs
mizuki_r
July 26, 2019
Technology
0
83
Vuexに型を付けるパターンを調べた #gotandajs
mizuki_r
July 26, 2019
Tweet
Share
More Decks by mizuki_r
See All by mizuki_r
税理士ドットコムの 技術的挑戦 #tapioca_lt
rymizuki
0
180
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
380
モダンとレガシー #gotandaem
rymizuki
0
330
DockerでNodeの開発は厳しいのか? #gotandajs
rymizuki
3
260
マネージャー!きみは何者だ! #gotandaem
rymizuki
0
1.3k
物語を楽しむための物語論
rymizuki
0
390
失敗と向き合う
rymizuki
0
900
社内勉強会と組織の成長を考える
rymizuki
1
2k
Webpackのビルド時間を1/3にした話 #gotandajs
rymizuki
9
3.6k
Other Decks in Technology
See All in Technology
ログ基盤をCloudWatchLogからNewRelic Logs + S3に変えたら 利便性も上がってコストも下がった話
onohiroshi1
0
170
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
580
機械学習システムアーキテクチャ入門 #1
asei
3
1.2k
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
720
Target SDK Versionを上げない Notification runtime permission対応
napplecomputer
0
120
Camp Digital 2022: tailored advice
kyliehavelock
0
140
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
alvarosanchez
0
110
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
1k
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
140
データをモデリングしていたら、組織をモデリングし始めた話 / engineers-in-carta-vol3-data-engineer
pei0804
4
3.2k
2022年度新卒技術研修「 ソフトウェアテスト」講義
excitejp
PRO
0
360
ROS再入門-はじめてのSLAM-
miura55
0
380
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
324
55k
How to Ace a Technical Interview
jacobian
265
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Support Driven Design
roundedbygravity
86
8.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Web Components: a chance to create the future
zenorocha
303
40k
Transcript
Vuexに型を付けるパターン を調べた 2019/07/26 Gotanda.js #12 @mizuki_r
@mizuki_r 弁護士ドットコム株式会社 税理士ドットコム事業部/開発チーム チームマネージャー 2 自己紹介 PHP, Vue, Nuxt, Management,
Recruitment, etc…
今日のお話
運用中のサービスに Vue+TypeScriptを導入した話
ーーを、しようと思ったが…
Vuexの型付けで悩み…
今日までに 結論が出せなかった…
ーーので、 Vuexの型付を調べた話 をします
免責事項 • 個人の見解に基づく発表であり組織・団体の主張する意見 ではありません • 業務の片手間でググった範囲なので最新の情報ではない可 能性があります • 時間の都合上、各ライブラリの型定義までしっかり読み込 んできたわけではないので間違いがあるかもしれません
• 予めご了承ください
背景
税理士ドットコム • 日本最大級の税理士/税務ポータルサイト • 税理士紹介、Q&A、ニュースなど • 2016年〜 • 私 +
業務委託エンジニアx5
管理画面 with Vue • もともとPHP Yii Frameworkが内包するUIモ ジュール+ jQuery を使っていた
• 長年の運用と範囲の拡大にインタラクションが不 足 • システムの一部でVueを導入(半年ほど前) • Form操作の複雑化に伴い、型が欲しくなる←イマココ
型に対する期待 • データ構造の補完 • データ構造のドキュメント化 • 値の受け渡しミスの抑止 • メンバーの学習
悩みどころ • Vueの中でのレールが無い • サードパーティを使う必要がある • Vue+Vuex+VueRouterの範囲なら公式のライブラリ使いたい • dispatch, getters,
commitで型が落ちる • サードパーティ(ry • これまでの「Vueを使う」インタラクションから離れる必要がある • Vuexのパターンがライブラリに引っ張られる • VuexのモジュールをVueに露出させないといけない
方針
前提 • Vueを使う • メンバーの知識的、学習補助のコスパ的に • 段階的にTypeScriptを導入する • 全体をまとめて、はリスクとコスト的にやらない •
Multiple Page Application + Single Page Application • システムの一部をSPAにする
方針 • Vue - Vuex 間で型情報を維持する • Vuexで構築するデータ構造には固く型を付 けられる •
将来的にはAPIの構造が変わったらコンパイ ルで気付ける構造にしたい(遠い未来)
Vuex + TypeScriptの パターンを調べた
パターン • vuex + vuex-class • vuex-type-helper + vuex-class •
vuex-module-decorator • vuex-smart-module
vuex + vuex-class
vuex + vuex-class • vuexに搭載されている型 + vuex-class を使う • 標準にもっとも近い形で書ける
• dispatchとgetterをvuex-classが隠蔽する • Store内部でのdispatch, getterの型が抜ける • Component側のインタラクションが若干変わる
import Vue from 'vue' import Vuex, { GetterTree, MutationTree, ActionTree
} from 'vuex' import { RootState, NoteForm } from './types' import * as notes from './notes' Vue.use(Vuex) const state: RootState = {} const getters: GetterTree<RootState, RootState> = { getNotes(state) { return () => (state.notes ? state.notes.rows : []) } } const mutations: MutationTree<RootState> = {} const actions: ActionTree<RootState, RootState> = { async viewIndex(ctx) { ctx.dispatch('notes/fetch') }, async addNote(ctx, form: NoteForm) { ctx.dispatch('notes/add', form) } } const modules = { notes } export default new Vuex.Store({ state, mutations, actions, modules })
vuex-type-helper
vuex-type-helper • vuexの型ではなくvuex-type-helperを使う • interfaceに基づいて片付けができる • dispatchとgetterにinterfaceを適応できる • ネストモジュールに対してはすべてのaction とpayloadをinterfaceに記載する必要がある
JNQPSU\%FGJOF(FUUFST %FGJOF.VUBUJPOT %FGJOF"DUJPOT^GSPNWVFYUZQFIFMQFS FYQPSUDPOTUOBNFTQBDFEUSVF FYQPSUDPOTUTUBUF/PUFT4UBUF\SPXT<>^ FYQPSUDPOTUHFUUFST%FGJOF(FUUFST/PUFT(FUUFST /PUFT4UBUF 3PPU4UBUF\ SPXT TUBUF
\ SFUVSO TUBUFSPXT ^ ^ FYQPSUDPOTUNVUBUJPOT%FGJOF.VUBUJPOT/PUFT.VUBUJPOT /PUFT4UBUF\ '&5$)@3&40-7& TUBUF \SPXT^ \ TUBUFSPXTSPXT ^ "%%@3&40-7& TUBUF \GPSN^ \ DPOTUMBTU*ETUBUFSPXT<TUBUFSPXTMFOHUI>JE DPOTUOPUF/PUF&OUJUZ\ JEMBTU*E DPOUFOUGPSNDPOUFOU DSFBUFEOFX%BUF ^ TUBUFSPXTQVTI OPUF ^ ^ FYQPSUDPOTUBDUJPOT%FGJOF"DUJPOT /PUFT"DUJPOT /PUFT4UBUF /PUFT.VUBUJPOT 3PPU4UBUF \ BTZODGFUDI DUY \ DPOTUSPXT/PUF&OUJUZ<>< \JE DPOUFOUUFTU DSFBUFEOFX%BUF ^ > DUYDPNNJU '&5$)@3&40-7& \SPXT^ ^ BTZODBEE DUY \GPSN^ \ DUYDPNNJU "%%@3&40-7& \GPSN^ ^ ^
vuex-module-decorator
vuex-module-decorator • Vuexのモジュール一つのクラスとしてみなす • VuexModuleクラスを継承してデコレータで mutation, actionを定義する • vue-property-decratorに感触的には近い •
Componentからはモジュールを直接呼び出す ことで型抜けを防ぐ
JNQPSU\/PUF&OUJUZ /PUF'PSN^GSPNUZQFT JNQPSU\7VFY.PEVMF .VUBUJPO "DUJPO^GSPNWVFYNPEVMFEFDPSBUPST FYQPSUEFGBVMUDMBTT/PUFT.PEVMFFYUFOET7VFY.PEVMF\ SPXT/PUF&OUJUZ<><> !.VUBUJPO '&5$)@3&40-7& SPXT/PUF&OUJUZ<>
\ UIJTSPXTSPXT ^ !.VUBUJPO "%%@3&40-7& GPSN/PUF'PSN \ DPOTUMBTU*EUIJTSPXT<UIJTSPXTMFOHUI>JE DPOTUOPUF/PUF&OUJUZ\ JEMBTU*E DPOUFOUGPSNDPOUFOU DSFBUFEOFX%BUF ^ UIJTSPXTQVTI OPUF ^ !"DUJPO BTZODGFUDI \ DPOTUSPXT/PUF&OUJUZ<>< \JE DPOUFOUUFTU DSFBUFEOFX%BUF ^ > SFUVSOSPXT ^ !"DUJPO BTZODBEE GPSN/PUF'PSN \ SFUVSOGPSN ^ ^
vuex-smart-module
vuex-smart-module • state, getter, mutation, actionを継承してクラ ス化してModuleに集約する • ComponentからはModuleを呼び出す •
Vuexの機能単位で分割できる部分を残しているので 既存構造にも適応させやすい • Contextの概念があり、ネストしたModuleへの dispatch, getterが呼び出せる
JNQPSU\(FUUFST .VUBUJPOT "DUJPOT .PEVMF^GSPNWVFYTNBSUNPEVMF JNQPSU\/PUF&OUJUZ /PUF'PSN^GSPNUZQFT FYQPSUDPOTUOBNFTQBDFEUSVF FYQPSUDMBTT/PUFT4UBUF\ SPXT/PUF&OUJUZ<><> ^
FYQPSUDMBTT/PUFT(FUUFSTFYUFOET(FUUFST/PUFT4UBUF\ SPXT \ SFUVSOUIJTTUBUFSPXT ^ ^ FYQPSUDMBTT/PUFT.VUBUJPOTFYUFOET.VUBUJPOT/PUFT4UBUF\ '&5$)@3&40-7& SPXT/PUF&OUJUZ<> \ UIJTTUBUFSPXTSPXT ^ "%%@3&40-7& GPSN/PUF'PSN \ DPOTUMBTU*EUIJTTUBUFSPXT<UIJTTUBUFSPXTMFOHUI>JE DPOTUOPUF/PUF&OUJUZ\ JEMBTU*E DPOUFOUGPSNDPOUFOU DSFBUFEOFX%BUF ^ UIJTTUBUFSPXTQVTI OPUF ^ ^ FYQPSUDMBTT/PUFT"DUJPOTFYUFOET"DUJPOT /PUFT4UBUF /PUFT(FUUFST /PUFT.VUBUJPOT /PUFT"DUJPOT \ BTZODGFUDI \ DPOTUSPXT/PUF&OUJUZ<>< \JE DPOUFOUUFTU DSFBUFEOFX%BUF ^ > UIJTDPNNJU '&5$)@3&40-7& SPXT ^ BTZODBEE GPSN/PUF'PSN \ UIJTDPNNJU "%%@3&40-7& GPSN ^ ^ FYQPSUEFGBVMUOFX.PEVMF \ TUBUF/PUFT4UBUF HFUUFST/PUFT(FUUFST NVUBUJPOT/PUFT.VUBUJPOT BDUJPOT/PUFT"DUJPOT ^
まとめ
Vuexに型をつけようと思ったら Vuex-Frameworkの選定になった
Vuex-Typeパターン • Vuexに対して型を付与パターン(既存のVuexと相 性が良い) • vuex • vuex-type-helper, etc •
モジュール化パターン(新しくモジュール構成を考 える) • vuex-module-decorator, • vuex-smart-module, etc
何を採用するか? • Vue-Vuexの間でどういうやり取りするかが 大きく関わるので全体を考える必要がある • アプリがライブラリに依存する • サードパーティなので、アップデートの追 従とかも考えたほうがいい •
Vue+TypeScriptは発展途上
まとめ • Vuexで片付けするパターンを紹介しました • まだVuexの型は方言が多い • 「ゆるく書ける」Vueの良さとどう同居していくか模 索している • みなさんの意見を聞かせてください
ご清聴ありがとうございました