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
350
ReactとValue Objectで凝集度を高める
Naoto
November 18, 2021
Tweet
Share
More Decks by Naoto
See All by Naoto
React_コンポーネントの設計.pdf
knaot0
0
1k
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
950
見た目から始める生産性向上
ikumatadokoro
7
850
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1k
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Netty Chicago Java User Group 2024-04-17
sullis
0
180
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Goのmultiple errorsについて (2024年4月版)
syumai
4
910
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
250
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
A designer walks into a library…
pauljervisheath
200
23k
The Language of Interfaces
destraynor
151
23k
Designing the Hi-DPI Web
ddemaree
276
33k
BBQ
matthewcrist
80
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Embracing the Ebb and Flow
colly
80
4.1k
A Philosophy of Restraint
colly
197
16k
Being A Developer After 40
akosma
57
580k
Six Lessons from altMBA
skipperchong
21
3k
Designing Experiences People Love
moore
136
23k
A better future with KSS
kneath
231
16k
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 の親和性