2024年8月30日(金)
今朝は7:00起床。
昨日寝るのが遅くなってしまった影響で大幅に寝坊してしまった。
いや、眠気の誘惑に負けてしまったと言うべきか。
朝活
今日も自転車はサボってというかそもそも台風の影響で乗れないけど、冷水シャワーを浴びてコーヒーを淹れる。
今日のコーヒーは猿田彦のオリジナルブレンド。
今日もReactアンチパターンの洋書を読む。
Reactアンチパターン
- Props drilling
- propsを必要とする下層のコンポーネントにpropsを渡すため、propsを必要としない中間のコンポーネントを中継すること
- コードが複雑になり保守性が低下する
- Business leakage （In-component data transformation）
- UIコンポーネントに意図せずにロジックが露出すること
- コンポーネントの保守性と再利用性を低下させる
- Complicated logic in views
- UIコンポーネントが複雑なロジックを持つこと
- UIコンポーネントはシンプルさを保ち、データをレンダリングする機能だけを持つべき
- Lack of tests (at each level)
- ユニットテスト、インテグレーションテスト、E2Eテストの不足はバグや手戻りの原因となる
- リファクタリングや拡張性を低下させる
- Duplicated code
- 複数のコンポーネントに似たようなコードが存在している状態
- 保守性を低下させバグの原因となる
- Long props list, big component（Long component with too much responsibility）
- 広範囲のpropsを受け取ったり、多くのロジックを持つコンポーネントは再利用性や保守性が低下する
- このコンポーネントは単一責任の原則に反する
対応するデザインパターン
- Render props
- コンポーネントへpropsとして関数を渡し、その関数がJSXを返却する手法
- 対象アンチパターン：多過ぎるpropsと長大なコンポーネント
- Headless components
- 振る舞い関するロジックを担い、UIをレンダリングしないコンポーネント
- 対象アンチパターン：ロジックの漏洩、ビューでの複雑なロジック
- Data modeling
- データを系統立てたり定義すること
- アプリケーション内のデータを管理することで、ロジックを理解しやすくする
- 対象アンチパターン：ロジックの漏洩、ビューでの複雑なロジック
- Layered architecture
- 各レイヤーに特定の責務を持たせ、コードを系統立てること
- 対象アンチパターン：ロジックの漏洩、ビューでの複雑なロジック
- Context as an interface
- Context APIをコンポーネント間のインターフェースとして使用する
- 対象アンチパターン：propsの多層伝達、多過ぎるprops
- Higher-Order Components (HOCs)
- 高階コンポーネントはコンポーネントを受け取り、プロパティや振る舞いを付加されたコンポーネントを返す
- コンポーネントの共通化に貢献し、propsの余計な受け渡しやコードの重複を防ぐ
- ※注記：モダンなReactコードではあまり使われず、カスタムフックを使用する
- 対象アンチパターン：propsの多層伝達、コードの重複
1時間程お勉強して朝活終了。
もう少しでこの本も読み終わりそう。
昼食
今日もお昼寝の時間が無かった。
- 味噌汁
- 小粒納豆
夕食
- ほっけの開き
- ゆで卵
- 味噌汁
- 雑穀ごはんと海苔
- 糠漬けとミニトマト
ほっけの開きが瑞々しくて美味しかった！
あと味噌汁も出汁が効いていて美味しかった！
身体測定
金曜日の身体測定。
- 体重：60.0kg
- 体脂肪率：14.2%
- 体年齢：29歳
- BMI：19.5
- 基礎代謝：1478kcal
- 内臓脂肪レベル：3.5
体年齢が29歳に！
内臓脂肪レベルが下がったのが何気に嬉しい。
明日は立川に行って朝活する予定。
コメント