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.2k
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
150
AIの言う通りにやったら Webアプリが作れるのか試してみた (ChatGPT)
t_pori418
0
930
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
290
Markdownで登壇資料を作りたい
t_pori418
0
340
GitHub Projectsのみでプロダクト開発を管理する
t_pori418
0
290
Nuxt.jsから始めるPWA生活
t_pori418
0
890
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
910
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
620
Other Decks in Technology
See All in Technology
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
ユーザーストーリーのレビューを自動化したみたの
bun913
1
420
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
500
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
160
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.9k
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
280
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
550
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
120
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
270
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
Featured
See All Featured
Making Projects Easy
brettharned
108
5.5k
How to name files
jennybc
65
93k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Navigating Team Friction
lara
178
13k
What the flash - Photography Introduction
edds
64
11k
Optimizing for Happiness
mojombo
370
69k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Being A Developer After 40
akosma
57
580k
Docker and Python
trallard
34
2.7k
Practical Orchestrator
shlominoach
182
9.7k
Designing for Performance
lara
601
67k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
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の実装は有効