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
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
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
840
Other Decks in Technology
See All in Technology
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
570
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
AWSで始める実践Dagster入門
kitagawaz
1
700
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
270
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
170
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Gamification - CAS2011
davidbonilla
81
5.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
GitHub's CSS Performance
jonrohan
1032
460k
A designer walks into a library…
pauljervisheath
207
24k
We Have a Design System, Now What?
morganepeng
53
7.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
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の実装は有効