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
600
ReactとValue Objectで凝集度を高める
Naoto
November 18, 2021
Tweet
Share
More Decks by Naoto
See All by Naoto
React_コンポーネントの設計.pdf
knaot0
1
2.6k
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.3k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
120
CSC509 Lecture 03
javiergs
PRO
0
330
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
170
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
370
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
1k
Cursorハンズオン実践!
eltociear
2
1k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Code Reviewing Like a Champion
maltzj
526
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Balancing Empowerment & Direction
lara
4
690
How GitHub (no longer) Works
holman
315
140k
Navigating Team Friction
lara
190
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Bash Introduction
62gerente
615
210k
A better future with KSS
kneath
239
18k
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 の親和性