ReactとValue Objectで凝集度を高める

by Naoto

Slide 1

Slide 1 text

Confidential ReactとValue Objectで凝集度を高める 2021.11.18

Slide 2

Slide 2 text

Confidential Confidential 2 ©Showcase Gig 今日話す内容 ReactにValue Objectを適用した事例と、実装で得た気づきを共有します。

Slide 3

Slide 3 text

Confidential 3 ©Showcase Gig 1. 自己紹介 2. 背景 3. 提案手法 4. まとめアジェンダ

Slide 4

Slide 4 text

Confidential Confidential 4 ©Showcase Gig 自己紹介 • 金子直人（かねこなおと） • 株式会社Showcase Gigに2021年8月入社 • ReactとGraphQLが好き • 最近は、WasmとBlitz.jsに興味があります • テイクアウト向けモバイルオーダーサービス「O:der ToGo（オーダートゥーゴー）」のフロントエンドエンジニア

Slide 5

Slide 5 text

Confidential Confidential 5 ©Showcase Gig 背景多くのドメインロジックをフロントエンドで実装していた引用元: https://github.com/takefumi-yoshii/redux-ddd-example#demand-of-domain-model

Slide 6

Slide 6 text

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日以上ある」背景

Slide 7

Slide 7 text

Confidential Confidential 7 ©Showcase Gig 具体例「カード番号のテキストフィールド」を例に説明します

Slide 8

Slide 8 text

Confidential Confidential 8 ©Showcase Gig カード番号のテキストフィールドにおける仕様 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 9

Slide 9 text

Confidential Confidential 9 ©Showcase Gig 特定の桁数ごとに空白を入れる 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 10

Slide 10 text

Confidential Confidential 10 ©Showcase Gig 特定の桁数ごとに空白を入れる 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 11

Slide 11 text

Confidential Confidential 11 ©Showcase Gig 特定の桁数ごとに空白を入れる 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 12

Slide 12 text

Confidential Confidential 12 ©Showcase Gig 特定の桁数ごとに空白を入れる 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 13

Slide 13 text

Confidential Confidential 13 ©Showcase Gig カード番号よりブランドを判別する 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 14

Slide 14 text

Confidential Confidential 14 ©Showcase Gig カード番号よりブランドを判別する 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 15

Slide 15 text

Confidential Confidential 15 ©Showcase Gig カード番号よりブランドを判別する 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 16

Slide 16 text

Confidential Confidential 16 ©Showcase Gig カード番号よりブランドを判別する 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 17

Slide 17 text

Confidential Confidential 17 ©Showcase Gig 14桁〜16桁の数字 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 18

Slide 18 text

Confidential Confidential 18 ©Showcase Gig 14桁〜16桁の数字 1. 特定の桁数ごとに空白を入れる 2. カード番号よりブランドを判別する 3. 14桁〜16桁の数字

Slide 19

Slide 19 text

Confidential Confidential 19 ©Showcase Gig カード番号を引数とする関数がバラバラと作られていたまとめると

Slide 20

Slide 20 text

Confidential Confidential 20 ©Showcase Gig プリミティブ型の表現力は高められれば良いのでは？カード番号を引数とする関数がバラバラと作られていたまとめると

Slide 21

Slide 21 text

Confidential Confidential 21 ©Showcase Gig プリミティブ型の表現力は高められれば良いのでは？カード番号を引数とする関数がバラバラと作られていたまとめると Value Objectを検討

Slide 22

Slide 22 text

Confidential Confidential 22 ©Showcase Gig 「プリミティブ型の問題点」を整理します

Slide 23

Slide 23 text

Confidential Confidential 23 ©Showcase Gig プリミティブ型の問題点値を更新する際に、空白を除去する関数をかませることにより実現していた。不正な値が存在し得るブランド判定のメソッドを、別の関数をかますことにより実現していた。表現力が低い空白付与、空白除去、ブランド判定、などのメソッドをその都度つくっていた。ロジックが散財する

Slide 24

Slide 24 text

Confidential Confidential 24 ©Showcase Gig 「値オブジェクトを採用するモチベーション」を整理します

Slide 25

Slide 25 text

Confidential Confidential 25 ©Showcase Gig 値オブジェクトを採用するモチベーション引用元: ドメイン駆動設計入門ボトムアップでわかる ! ドメイン駆動設計の基本　成瀬允宣 (著) 1. 表現力が増す 2. 不正な値を存在させない 3. 誤った代入を防ぐ 4. ロジックの散在を防ぐ

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Confidential Confidential 27 ©Showcase Gig 値オブジェクトを適用すると？空白文字列を含んだカード番号を、存在させないようにできる。不正な値を存在させない / 誤った代入を防ぐカード番号に振る舞いを追加できるようになる。表現力が増すカード番号特有のロジックを Value Objectに凝集できる。ロジックの散財を防ぐ引用元: ドメイン駆動設計入門ボトムアップでわかる ! ドメイン駆動設計の基本　成瀬允宣 (著)

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Confidential Confidential 29 ©Showcase Gig カード番号のValue Object • コンストラクタで空白を除去し、空白なしのカード番号のみ存在するようにする • カード番号に関連する振る舞いを Value Object内に凝集する

Slide 30

Slide 30 text

Confidential Confidential 30 ©Showcase Gig カード番号のValue Object • コンストラクタで空白を除去し、空白なしのカード番号のみ存在するようにする • カード番号に関連する振る舞いを Value Object内に凝集する

Slide 31

Slide 31 text

Confidential Confidential 31 ©Showcase Gig カード番号のValue Object • コンストラクタで空白を除去し、空白なしのカード番号のみ存在するようにする • カード番号に関連する振る舞いを Value Object内に凝集する

Slide 32

Slide 32 text

Confidential Confidential 32 ©Showcase Gig React から Value Object を利用する 1. useStateにカード番号インスタンスを設定 2. クレカ判定 (isVisa) や空白付与 (withWhiteSpace) 等のメソッドを呼び出す 3. 値を更新する際は、新しいインスタンスを作成し、交換する

Slide 33

Slide 33 text

Confidential Confidential 33 ©Showcase Gig React から Value Object を利用する 1. useStateにカード番号インスタンスを設定 2. クレカ判定 (isVisa) や空白付与 (withWhiteSpace) 等のメソッドを呼び出す 3. 値を更新する際は、新しいインスタンスを作成し、交換する

Slide 34

Slide 34 text

Confidential Confidential 34 ©Showcase Gig React から Value Object を利用する 1. useStateにカード番号インスタンスを設定 2. クレカ判定 (isVisa) や空白付与 (withWhiteSpace) 等のメソッドを呼び出す 3. 値を更新する際は、新しいインスタンスを作成し、交換する

Slide 35

Slide 35 text

Confidential Confidential 35 ©Showcase Gig まとめ・気づき表現力が増し、不正な値は存在しなくなり、ロジックの散財を防げるようになった。 Value Objectの不変かつ交換可能という性質が、 Reactのステートの特性と相性が良かった。 Value Objectの恩恵を得られた React と Value Object の親和性