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

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

Avatar for Naoto Naoto
November 18, 2021

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

Avatar for Naoto

Naoto

November 18, 2021
Tweet

More Decks by Naoto

Other Decks in Programming

Transcript

  1. Confidential Confidential 4 ©Showcase Gig 自己紹介 • 金子 直人(かねこ なおと)

    • 株式会社Showcase Gigに2021年8月入社 • ReactとGraphQLが好き • 最近は、WasmとBlitz.jsに興味があります • テイクアウト向けモバイルオーダーサービス 「O:der ToGo(オーダートゥーゴー)」のフロントエンドエンジニア
  2. 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日以上ある」 背景
  3. Confidential Confidential 23 ©Showcase Gig プリミティブ型の問題点 値を更新する際に、空白を除去する関数をかませることにより 実現していた。 不正な値が 存在し得る

    ブランド判定のメソッドを、別の関数をかますことにより実現して いた。 表現力が低い 空白付与、空白除去、ブランド判定、などのメソッドをその都度つくって いた。 ロジックが 散財する
  4. Confidential Confidential 25 ©Showcase Gig 値オブジェクトを採用するモチベーション 引用元: ドメイン駆動設計入門 ボトムアップでわかる !

    ドメイン駆動設計の基本 成瀬 允宣 (著) 1. 表現力が増す 2. 不正な値を存在させない 3. 誤った代入を防ぐ 4. ロジックの散在を防ぐ
  5. Confidential Confidential 27 ©Showcase Gig 値オブジェクトを適用すると? 空白文字列を含んだカード番号を、存在させないようにできる。 不正な値を存在させ ない /

    誤った代入を防ぐ カード番号に振る舞いを追加できるようになる。 表現力が増す カード番号特有のロジックを Value Objectに凝集できる。 ロジックの散財を 防ぐ 引用元: ドメイン駆動設計入門 ボトムアップでわかる ! ドメイン駆動設計の基本 成瀬 允宣 (著)
  6. Confidential Confidential 32 ©Showcase Gig React から Value Object を利用する

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

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

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