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
ReactとValue Objectで凝集度を高める
Search
Naoto
November 18, 2021
Programming
0
590
ReactとValue Objectで凝集度を高める
Naoto
November 18, 2021
Tweet
Share
More Decks by Naoto
See All by Naoto
React_コンポーネントの設計.pdf
knaot0
1
2.5k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
1から理解するWeb Push
dora1998
7
1.9k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
220
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.7k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
Navigating Dependency Injection with Metro
zacsweers
3
250
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
290
旅行プランAIエージェント開発の裏側
ippo012
2
900
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Documentation Writing (for coders)
carmenintech
74
5k
Faster Mobile Websites
deanohume
309
31k
GitHub's CSS Performance
jonrohan
1032
460k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Testing 201, or: Great Expectations
jmmastey
45
7.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
Confidential ReactとValue Objectで凝集度を高める 2021.11.18
Confidential Confidential 2 ©Showcase Gig 今日話す内容 ReactにValue Objectを適用した事例と、 実装で得た気づきを共有します。
Confidential 3 ©Showcase Gig 1. 自己紹介 2. 背景 3. 提案手法
4. まとめ アジェンダ
Confidential Confidential 4 ©Showcase Gig 自己紹介 • 金子 直人(かねこ なおと)
• 株式会社Showcase Gigに2021年8月入社 • ReactとGraphQLが好き • 最近は、WasmとBlitz.jsに興味があります • テイクアウト向けモバイルオーダーサービス 「O:der ToGo(オーダートゥーゴー)」のフロントエンドエンジニア
Confidential Confidential 5 ©Showcase Gig 背景 多くのドメインロジックをフロントエンドで実装していた 引用元: https://github.com/takefumi-yoshii/redux-ddd-example#demand-of-domain-model
Confidential Confidential 6 ©Showcase Gig 多くのドメインロジックをフロントエンドで実装していた 引用元: https://github.com/takefumi-yoshii/redux-ddd-example#demand-of-domain-model 1. 作成日時を取り出す
2. 現在時刻のタイムスタンプを取得 3. 作成日時のタイムスタンプを取得 4. 現在時刻と作成日時の差分を計算 5. 差分の単位をdayに変換 6. 下記の場合、nullを返す • 「完了済み」 • 「フラグがfalse」 • 「差分が1日以上ある」 背景
Confidential Confidential 7 ©Showcase Gig 具体例 「カード番号のテキストフィールド」を例に説明します
Confidential Confidential 8 ©Showcase Gig カード番号のテキストフィールドにおける仕様 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 9 ©Showcase Gig 特定の桁数ごとに空白を入れる 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 10 ©Showcase Gig 特定の桁数ごとに空白を入れる 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 11 ©Showcase Gig 特定の桁数ごとに空白を入れる 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 12 ©Showcase Gig 特定の桁数ごとに空白を入れる 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 13 ©Showcase Gig カード番号よりブランドを判別する 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 14 ©Showcase Gig カード番号よりブランドを判別する 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 15 ©Showcase Gig カード番号よりブランドを判別する 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 16 ©Showcase Gig カード番号よりブランドを判別する 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 17 ©Showcase Gig 14桁〜16桁の数字 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 18 ©Showcase Gig 14桁〜16桁の数字 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する
3. 14桁〜16桁の数字
Confidential Confidential 19 ©Showcase Gig カード番号を引数とする 関数がバラバラと 作られていた まとめると
Confidential Confidential 20 ©Showcase Gig プリミティブ型の 表現力は高められれば良 いのでは? カード番号を引数とする 関数がバラバラと
作られていた まとめると
Confidential Confidential 21 ©Showcase Gig プリミティブ型の 表現力は高められれば良 いのでは? カード番号を引数とする 関数がバラバラと
作られていた まとめると Value Objectを検討
Confidential Confidential 22 ©Showcase Gig 「プリミティブ型の問題点」を整理します
Confidential Confidential 23 ©Showcase Gig プリミティブ型の問題点 値を更新する際に、空白を除去する関数をかませることにより 実現していた。 不正な値が 存在し得る
ブランド判定のメソッドを、別の関数をかますことにより実現して いた。 表現力が低い 空白付与、空白除去、ブランド判定、などのメソッドをその都度つくって いた。 ロジックが 散財する
Confidential Confidential 24 ©Showcase Gig 「値オブジェクトを採用するモチベーション」を整理します
Confidential Confidential 25 ©Showcase Gig 値オブジェクトを採用するモチベーション 引用元: ドメイン駆動設計入門 ボトムアップでわかる !
ドメイン駆動設計の基本 成瀬 允宣 (著) 1. 表現力が増す 2. 不正な値を存在させない 3. 誤った代入を防ぐ 4. ロジックの散在を防ぐ
Confidential Confidential 26 ©Showcase Gig 「カード番号のテキストフィールド」に 値オブジェクトを適用した場合
Confidential Confidential 27 ©Showcase Gig 値オブジェクトを適用すると? 空白文字列を含んだカード番号を、存在させないようにできる。 不正な値を存在させ ない /
誤った代入を防ぐ カード番号に振る舞いを追加できるようになる。 表現力が増す カード番号特有のロジックを Value Objectに凝集できる。 ロジックの散財を 防ぐ 引用元: ドメイン駆動設計入門 ボトムアップでわかる ! ドメイン駆動設計の基本 成瀬 允宣 (著)
Confidential Confidential 28 ©Showcase Gig Value Objectの具体例 「カード番号のテキストフィールド」に Value Objectを適用してみます。
Confidential Confidential 29 ©Showcase Gig カード番号のValue Object • コンストラクタで空白を除去し、空白なしの カード番号のみ存在するようにする
• カード番号に関連する振る舞いを Value Object内に凝集する
Confidential Confidential 30 ©Showcase Gig カード番号のValue Object • コンストラクタで空白を除去し、空白なしの カード番号のみ存在するようにする
• カード番号に関連する振る舞いを Value Object内に凝集する
Confidential Confidential 31 ©Showcase Gig カード番号のValue Object • コンストラクタで空白を除去し、空白なしの カード番号のみ存在するようにする
• カード番号に関連する振る舞いを Value Object内に凝集する
Confidential Confidential 32 ©Showcase Gig React から Value Object を利用する
1. useStateにカード番号インスタンスを設定 2. クレカ判定 (isVisa) や 空白付与 (withWhiteSpace) 等のメソッドを呼び出す 3. 値を更新する際は、新しいインスタンスを作成し、交換する
Confidential Confidential 33 ©Showcase Gig React から Value Object を利用する
1. useStateにカード番号インスタンスを設定 2. クレカ判定 (isVisa) や 空白付与 (withWhiteSpace) 等のメソッドを呼び出す 3. 値を更新する際は、新しいインスタンスを作成し、交換する
Confidential Confidential 34 ©Showcase Gig React から Value Object を利用する
1. useStateにカード番号インスタンスを設定 2. クレカ判定 (isVisa) や 空白付与 (withWhiteSpace) 等のメソッドを呼び出す 3. 値を更新する際は、新しいインスタンスを作成し、交換する
Confidential Confidential 35 ©Showcase Gig まとめ・気づき 表現力が増し、不正な値は存在しなくなり、ロジックの散財を防げるようになった。 Value Objectの不変かつ交換可能という性質が、 Reactのステートの特性と相性が良かった。
Value Objectの恩恵を得られた React と Value Object の親和性