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によるSPAのDDDについて考える(導入編)
Search
thori
January 20, 2018
Technology
0
3.5k
Vue.jsによるSPAのDDDについて考える(導入編)
Gunma.web #30 LTスライドです。
DDDそのものの説明よりも自分が実装に取り入れるならどう考えるかについてになります。
例にしているコードはまだまだ改善の余地があると思います。
thori
January 20, 2018
Tweet
Share
More Decks by thori
See All by thori
AIとプロダクトエンジニア
t_pori418
0
94
WebAPIのPATCHについて
t_pori418
0
210
AIの言う通りにやったら Webアプリが作れるのか試してみた (ChatGPT)
t_pori418
0
1.1k
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
370
Markdownで登壇資料を作りたい
t_pori418
0
460
GitHub Projectsのみでプロダクト開発を管理する
t_pori418
0
340
Nuxt.jsから始めるPWA生活
t_pori418
0
1.1k
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
1.1k
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
810
Other Decks in Technology
See All in Technology
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.7k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
530
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
Lazy application authentication with Tailscale
bluehatbrit
0
210
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
OPENLOGI Company Profile
hr01
0
67k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
210
Claude Code に プロジェクト管理やらせたみた
unson
6
4.2k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing Experiences People Love
moore
142
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Thoughts on Productivity
jonyablonski
69
4.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Applications with DynamoDB
mza
95
6.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
Vue.jsによるSPAの DDDについて考える(導⼊編) 2018-01-20 Gunma.web #30 堀 貴詞
⾃⼰紹介 • 名前: 堀 貴詞 • Twitter: @t_pori418 • JavaScript,
PHP, Python … • Vue.js, Laravel … • 業務webアプリ開発
どのようなアプローチで ドメイン駆動設計を 実装で実現するかを考えます
経緯 1. 短い期間で機能継ぎ⾜しを繰り返されて 作られたシステム 2. 品質、保守性の低さ 3. システムを移⾏→DDDの考えを取り⼊れる • やっていること:
SPA+APIで業務アプリ開発 vue.js + laravel を使⽤
今回考えるのは フロントエンドに絞ります
課題 画⾯主体の実装 • 画⾯(page)駆動開発になりがち • 複雑なロジックが書かれた共通コンポーネント • データ構造が画⾯依存(APIの設計にも問題あり) • テストができないコード・・・
フロントエンドのDDD • 部品となるコンポーネントは関⼼事で まとめて分ける • ただし最⼩コンポーネントは汎⽤的になる • データモデル,ビジネスロジックは関⼼事でま とめて分ける •
ビジネスロジックやviewに渡すデータ整形処理を ドメインモデルと結びつけ整理する
データモデルとドメインモデル • Storeパターンの活⽤→vuexの導⼊ • 取得したデータはドメイン毎にstateで保持 • コンポーネント内の⼀時的なデータはモデルに 渡して保持
View Methods Data Actions Mutations State Backend API DevTool Computed
Vuex Vue Components
View Methods Data Actions Mutations State Backend API DevTool Computed
Vuex Vue Components model
安定したオブジェクトにする • TypeScriptの採⽤ • TypeScriptで型安全を⽬指す • 不変な値のためのオブジェクトの実装 • 基本的なデータはvuexのstateに保持している →
mutationsで不正値が⼊らないかチェック • ⼀時的なデータはコンポーネントに持っている →不正値チェックは外部のクラス
vuex
失敗するTest
実際の処理例 action: model: method:
課題 • コンポーネント(view)に密結合するビジネスロ ジックがドメインモデルに切り出せない →改善できそうなところは多い • Vuexで状態管理しているデータはコミットすれ ばどこからでも容易に変更が可能である →vuexに保持しているデータを使⽤時にモデル に格納すべき?
まとめ • 画⾯主体、データ主体の実装にならないように • ドメインモデルに分け修正時の変更対象を狭く • 部分的なDDDの実装は有効