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
98
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.2k
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
1.2k
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
840
Other Decks in Technology
See All in Technology
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
140
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1.3k
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
6.5k
テストを実行してSorbetのsigを書こう!
sansantech
PRO
1
100
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
220
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
740
Lambda management with ecspresso and Terraform
ijin
2
160
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
250
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
140
データモデリング通り #2オンライン勉強会 ~方法論の話をしよう~
datayokocho
0
160
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
160
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Automating Front-end Workflow
addyosmani
1370
200k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Rails Girls Zürich Keynote
gr2m
95
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Navigating Team Friction
lara
188
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
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の実装は有効