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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide