Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Naoto
November 18, 2021

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

Naoto

November 18, 2021
Tweet

More Decks by Naoto

Other Decks in Programming

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