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

Slide 1

Slide 1 text

関数型プログラミングとフロントエンド俺の話を聞け！！LT大会 #11 / Sep 12th, 2018 ponday (@ponday_dev)

Slide 2

Slide 2 text

Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーションエンジニア - Like : TypeScript / Elixir / Python etc… - フロントエンドの人ではない

Slide 3

Slide 3 text

最近のフロントエンド - 関数型に影響を受けた（らしい）ライブラリの増加 - React - Redux - Immutable.js - RxJS - 結局のところ関数型プログラミングって何？

Slide 4

Slide 4 text

関数型プログラミング？ ※ wikiから

Slide 5

Slide 5 text

何をもって関数型プログラミングとするか、正確な定義や合意は存在しない

Slide 6

Slide 6 text

はずなのに

Slide 7

Slide 7 text

圏論参照透過性正格評価モナド不変性副作用？？？純粋関数

Slide 8

Slide 8 text

うわああああ▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂ああああああ

Slide 9

Slide 9 text

関数型の雰囲気を掴むのに必要なもの

Slide 10

Slide 10 text

圏論参照透過性正格評価不変性副作用！モナド純粋関数

Slide 11

Slide 11 text

関数 - 「引数を取って、計算して、戻り値を返す」もの - プログラミングでは、それ以外の動作をする場合も - コンポーネントの内部状態を変更する - Viewを書き換える - etc....

Slide 12

Slide 12 text

副作用 - 関数の戻り値を返す以外の動作全て - 破壊的な操作＝副作用 - Object.assign - Array.prototype.push - 極端な話、画面を変化させるのも副作用

Slide 13

Slide 13 text

副作用 [ array.pushの動作 ] - 要素追加後の配列長を返す - 配列に要素を追加する

Slide 14

Slide 14 text

副作用 [ array.pushの動作 ] - 要素追加後の配列長を返す - 配列に要素を追加する副作用！

Slide 15

Slide 15 text

不変性 - 値が書き換わらない性質。イミュータブルとも - JSのconstは再代入不可能性 ≠ イミュータブル - 値型ならこれだけでも充分 - 参照型の変数だとふいに書き換えられる可能性が

Slide 16

Slide 16 text

不変性

Slide 17

Slide 17 text

不変性 - Object.assignはshallow copy - barとobj.barは共有されている - 他の関数で書き換えられてしまう可能性が

Slide 18

Slide 18 text

不変性

Slide 19

Slide 19 text

純粋関数 - 副作用がない - 戻り値が引数によってのみ変化する - 何回実行しても、引数が同じなら結果は同じ - ユニットテストが楽に書ける

Slide 20

Slide 20 text

純粋でない関数関数引数戻り値外部変数外部

Slide 21

Slide 21 text

純粋な関数関数引数戻り値

Slide 22

Slide 22 text

フロントエンドの例 - ステートレスなコンポーネント - 関数コンポーネント（React） - functionalオプション（Vue） - Flux - 複数の関数の組み合わせ - State -> View、Action -> State

Slide 23

Slide 23 text

関数コンポーネント（React）関数 prop View

Slide 24

Slide 24 text

classコンポーネント（React／純粋でない関数）関数引数戻り値外部変数

Slide 25

Slide 25 text

Flux Component State View Dispatcher Action

Slide 26

Slide 26 text

実際、副作用なしでフロントエンドって作れるの？

Slide 27

Slide 27 text

無理

Slide 28

Slide 28 text

副作用とフロントエンド - そもそも、View層が副作用そのもの - 副作用を排除するのは不可能 - 副作用の有無を見分けて、分離する設計 - 副作用がない処理はテストがしやすい - バグの原因となり得る箇所を小さくできる

Slide 29

Slide 29 text

まとめ - フロントエンドでも関数型は適用できる - なんとなく使うならそんなに難しくない - それぞれの考え方を理解した設計が必要 - 副作用の排除は不可能という前提 - 純粋な関数として切り分けれる部分はないか - 副作用の有無でレイヤーを分ける