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.3k
Vue.jsによるSPAのDDDについて考える(導入編)
Gunma.web #30 LTスライドです。
DDDそのものの説明よりも自分が実装に取り入れるならどう考えるかについてになります。
例にしているコードはまだまだ改善の余地があると思います。
thori
January 20, 2018
Tweet
Share
More Decks by thori
See All by thori
WebAPIのPATCHについて
t_pori418
0
160
AIの言う通りにやったら Webアプリが作れるのか試してみた (ChatGPT)
t_pori418
0
960
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
320
Markdownで登壇資料を作りたい
t_pori418
0
370
GitHub Projectsのみでプロダクト開発を管理する
t_pori418
0
300
Nuxt.jsから始めるPWA生活
t_pori418
0
950
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
960
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
660
Other Decks in Technology
See All in Technology
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
620
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
190
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
地理情報とAPIのトレンド
nagix
0
160
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
A designer walks into a library…
pauljervisheath
201
24k
GraphQLとの向き合い方2022年版
quramy
36
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Debugging Ruby Performance
tmm1
71
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Scaling GitHub
holman
458
140k
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の実装は有効