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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. Confidential
    Confidential
    26
    ©Showcase Gig
    「カード番号のテキストフィールド」に
    値オブジェクトを適用した場合
    

    View Slide

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

    View Slide

28. Confidential
    Confidential
    28
    ©Showcase Gig
    Value Objectの具体例
    「カード番号のテキストフィールド」に
    Value Objectを適用してみます。
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide