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
580
ReactとValue Objectで凝集度を高める
Naoto
November 18, 2021
Tweet
Share
More Decks by Naoto
See All by Naoto
React_コンポーネントの設計.pdf
knaot0
1
2.4k
Other Decks in Programming
See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
What's new in AppKit on macOS 26
1024jp
0
150
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
CDK引数設計道場100本ノック
badmintoncryer
2
480
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
ニーリーにおけるプロダクトエンジニア
nealle
0
950
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A better future with KSS
kneath
238
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Thoughts on Productivity
jonyablonski
69
4.7k
Producing Creativity
orderedlist
PRO
346
40k
The Language of Interfaces
destraynor
158
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for Performance
lara
610
69k
Code Reviewing Like a Champion
maltzj
524
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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 の親和性