関数型プログラミングとフロントエンド

俺の話を聞け！！LT大会 #11（2018/09/12）の発表資料です。
タイトル詐欺感が漂います。

Transcript

1. 関数型プログラミングとフロントエンド 俺の話を聞け！！LT大会 #11 / Sep 12th, 2018 ponday (@ponday_dev)
2. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like : TypeScript / Elixir / Python etc… - フロントエンドの人ではない
3. 最近のフロントエンド - 関数型に影響を受けた（らしい）ライブラリの増加 - React - Redux - Immutable.js - RxJS - 結局のところ関数型プログラミングって何？
4. 関数型プログラミング？ ※ wikiから
5. 何をもって関数型プログラミングとするか、 正確な定義や合意は存在しない
6. はずなのに
7. 圏論 参照透過性 正格評価 モナド 不変性 副作用 ？ ？ ？ 純粋関数
8. うわああああ▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂ああああああ
9. 関数型の雰囲気を掴むのに必要なもの
10. 圏論 参照透過性 正格評価 不変性 副作用 ！ モナド 純粋関数
11. 関数 - 「引数を取って、計算して、戻り値を返す」もの - プログラミングでは、それ以外の動作をする場合も - コンポーネントの内部状態を変更する - Viewを書き換える - etc....
12. 副作用 - 関数の戻り値を返す以外の動作全て - 破壊的な操作 ＝ 副作用 - Object.assign - Array.prototype.push - 極端な話、画面を変化させるのも副作用
13. 副作用 [ array.pushの動作 ] - 要素追加後の配列長を返す - 配列に要素を追加する
14. 副作用 [ array.pushの動作 ] - 要素追加後の配列長を返す - 配列に要素を追加する 副作用！
15. 不変性 - 値が書き換わらない性質。イミュータブルとも - JSのconstは再代入不可能性 ≠ イミュータブル - 値型ならこれだけでも充分 - 参照型の変数だとふいに書き換えられる可能性が
16. 不変性
17. 不変性 - Object.assignはshallow copy - barとobj.barは共有されている - 他の関数で書き換えられてしまう可能性が
18. 不変性
19. 純粋関数 - 副作用がない - 戻り値が引数によってのみ変化する - 何回実行しても、引数が同じなら結果は同じ - ユニットテストが楽に書ける
20. 純粋でない関数 関数 引数 戻り値 外部変数 外部
21. 純粋な関数 関数 引数 戻り値
22. フロントエンドの例 - ステートレスなコンポーネント - 関数コンポーネント（React） - functionalオプション（Vue） - Flux - 複数の関数の組み合わせ - State -> View、Action -> State
23. 関数コンポーネント（React） 関数 prop View
24. classコンポーネント（React／純粋でない関数） 関数 引数 戻り値 外部変数
25. Flux Component State View Dispatcher Action
26. 実際、副作用なしでフロントエンドって作れるの？
27. 無理
28. 副作用とフロントエンド - そもそも、View層が副作用そのもの - 副作用を排除するのは不可能 - 副作用の有無を見分けて、分離する設計 - 副作用がない処理はテストがしやすい - バグの原因となり得る箇所を小さくできる
29. まとめ - フロントエンドでも関数型は適用できる - なんとなく使うならそんなに難しくない - それぞれの考え方を理解した設計が必要 - 副作用の排除は不可能という前提 - 純粋な関数として切り分けれる部分はないか - 副作用の有無でレイヤーを分ける