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
1
100
AIとプロダクトエンジニア
t_pori418
0
110
WebAPIのPATCHについて
t_pori418
0
220
AIの言う通りにやったら Webアプリが作れるのか試してみた (ChatGPT)
t_pori418
0
1.1k
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
370
Markdownで登壇資料を作りたい
t_pori418
0
470
GitHub Projectsのみでプロダクト開発を管理する
t_pori418
0
350
Nuxt.jsから始めるPWA生活
t_pori418
0
1.2k
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
1.2k
Other Decks in Technology
See All in Technology
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
sony
0
130
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.8k
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
450
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
社内お問い合わせBotの仕組みと学び
nish01
1
530
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
100
Wasmのエコシステムを使った ツール作成方法
askua
0
110
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
240
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
240
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
580
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
430
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Visualization
eitanlees
148
16k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Side Projects
sachag
455
43k
How to train your dragon (web standard)
notwaldorf
96
6.3k
How to Ace a Technical Interview
jacobian
280
24k
Fireside Chat
paigeccino
40
3.7k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Why Our Code Smells
bkeepers
PRO
339
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The World Runs on Bad Software
bkeepers
PRO
71
11k
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の実装は有効