Reactで見る！純粋関数で深ぼる副作用

Transcript

1. Reactで見る！純粋関数で深ぼる副作用 in React Tokyo #7 2025.7.18
2. 社内システムを改修したり、インフラを作ったり、APIを生やしたり...etc 趣味：トンチキ技術グッズを作ったり 河村 直樹（@iwonder118） 自己紹介
3. グッズ新作！：叫ぶGop….ビーバーくん 今日のデブサミで 活躍してもらいました 趣味
4. - 最近関数型をかじり始めた感じです - 関数型プログラミングを紹介したいわけではないです - 純粋関数と冪等性の違いは何？から生まれたスライドです - 自分が冪等性を何となくわかったと思ったことの共有です - ちょっと話が一貫しないかもしれないですが、ご容赦ください。 前置き ツヨイヒトコワイ.... 前置き
5. ▶同じ入力に対して常に同じ結果を返す性質 ▶ある操作を 1回行っても複数回行っても、同じ結果になる性質 冪等性 参照透過性 話の入口
7. どちらも 「複数回実行しても同じ結果になる性質のこと」 を言っているのに何が違う？
8. 純粋関数とは ※参照透過性として純粋性、純粋関数のことを純関数のこととして喋ってます (違いがよくわからんです.... • 入力が同じなら、常に同じ出力になる関数。 • 外部の状態を変更しない。 特徴 • テストが簡単になる。 • 挙動の予測がしやすい。 • 結果として保守性が高まる。 メリット
9. 純粋関数とは 参照:コンポーネントを純粋に保つ(https://ja.react.dev/learn/keeping-components-pure)
10. 冪等性を持つ関数について 先にコードを見てみて差分を見てみる
11. 冪等性を持つ関数について stateがいるため 純粋性がない！
12. 冪等性を持つ関数とは 課金処理を何回も実行しても1回のみ実行してほしい！ • 入力が同じなら、常に同じ出力になる関数。 • 外部の状態を変更しない。 特徴 • 純粋関数のメリットは引き継がれる • スナップショット/状態同期が安定 • 副作用の最小化・明示化 メリット フォームの入力値に変更がない状態で保存しても同じ保存状態にしてほしい！ イメージ
13. 純粋関数との差分 純粋性 冪等性 純粋関数のコンポーネント ✅あり ✅あり 冪等性を持つコンポーネント ❌なし ✅あり それ以外 ？ ？ Stateを持つため毎回実行して同じ結果が出ること が担保されない
14. それ以外とは・・・？
15. 関数の実行結果が引数だけでなく、関数の外部の状態にも依存する関数 それってつまり ....?
16. 副作用とは • 出力が引数だけに依存していない • 外部に影響を及ぼす • 副作用は、純粋性を壊す。 特徴（広義の意味 ) • 外部状態の変更・参照(useEffect云々周り) → グローバル変数、DOM操作、API通信など。 • 状態管理 • etc… 特徴（Reactでの意味)
17. 純粋関数との差分 part2 純粋性 冪等性 副作用 純粋関数のコンポーネント ✅あり ✅あり ❌なし 冪等性を持つコンポーネント ❌なし ✅あり 🔼あったりなかったり 副作用を持つコンポーネント ❌なし ❌なし ✅あり 純粋性のメリットを持ちつつ、副作用が同居できる 冪等性を持ったコンポーネントを作っていくべきか？
18. 否！！作るべきではない 冪等性はあくまで.... ある操作を何度実行しても、常に同じ結果になる性質のこと じゃあどうすれば....
19. t-wadaさんに聞いてみた サバンナ (Developers Summit 2025 Summer 7.18) に行って(サイン会をしてたので)聞いてみた
20. t-wadaさんに聞いてみた その他有象無象の関数たち Q:純粋性もない、冪等性も持たない、再現性もない、あれもないこれもないやつらはなん と呼べば？ 基本的には純粋性の部分と副作用などを 持つロジックの部分は分けるべき ->ReactのUIとロジックの分離 ただしそうもいかない場面があり、 そういった関数がビジネスを支えている インペラティブ処理 (t-wadaさんワード ) ※imperative・・・ぜひともしなければならない、緊急の、必須で、肝要で、命令的な、断固とした、　 　　　　　　　　 威厳のある、厳然たる、命令法の サインを貰っている途中に聞いたので齟齬が あるかもしれないですが .....
21. 副作用と共存、付き合っていくために 状態管理ライブラリを使う 副作用を切り出す • 副作用の管理や冪等性の確保を外部化 • コンポーネントの純粋関数性・参照透過性を維持 • コンポーネント内で状態を直接更新すると、表示ロジックと副作用が混ざる。 • 状態管理ライブラリは副作用を隔離するための外部ストレージになる。
22. Daishiさんありがとう！ つまり.... 🎉Daishiさんありがとう🎉