Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
関数型プログラミングとフロントエンド
Search
ponday
September 12, 2018
Programming
1
980
関数型プログラミングとフロントエンド
俺の話を聞け!!LT大会 #11(2018/09/12)の発表資料です。
タイトル詐欺感が漂います。
ponday
September 12, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.1k
TypeScriptの型表現
honda
10
2.9k
Web Componentsの今
honda
1
380
これまでのReact、これからのReact
honda
0
280
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
630
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
620
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
740
Other Decks in Programming
See All in Programming
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
140
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
subpath importsで始めるモック生活
10tera
0
310
Arm移行タイムアタック
qnighy
0
330
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
受け取る人から提供する人になるということ
little_rubyist
0
250
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
The Cult of Friendly URLs
andyhume
78
6k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Optimizing for Happiness
mojombo
376
70k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Why Our Code Smells
bkeepers
PRO
334
57k
Transcript
関数型プログラミングとフロントエンド 俺の話を聞け!!LT大会 #11 / Sep 12th, 2018 ponday (@ponday_dev)
Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like
: TypeScript / Elixir / Python etc… - フロントエンドの人ではない
最近のフロントエンド - 関数型に影響を受けた(らしい)ライブラリの増加 - React - Redux - Immutable.js -
RxJS - 結局のところ関数型プログラミングって何?
関数型プログラミング? ※ wikiから
何をもって関数型プログラミングとするか、 正確な定義や合意は存在しない
はずなのに
圏論 参照透過性 正格評価 モナド 不変性 副作用 ? ? ? 純粋関数
うわああああ▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂ああああああ
関数型の雰囲気を掴むのに必要なもの
圏論 参照透過性 正格評価 不変性 副作用 ! モナド 純粋関数
関数 - 「引数を取って、計算して、戻り値を返す」もの - プログラミングでは、それ以外の動作をする場合も - コンポーネントの内部状態を変更する - Viewを書き換える -
etc....
副作用 - 関数の戻り値を返す以外の動作全て - 破壊的な操作 = 副作用 - Object.assign -
Array.prototype.push - 極端な話、画面を変化させるのも副作用
副作用 [ array.pushの動作 ] - 要素追加後の配列長を返す - 配列に要素を追加する
副作用 [ array.pushの動作 ] - 要素追加後の配列長を返す - 配列に要素を追加する 副作用!
不変性 - 値が書き換わらない性質。イミュータブルとも - JSのconstは再代入不可能性 ≠ イミュータブル - 値型ならこれだけでも充分 -
参照型の変数だとふいに書き換えられる可能性が
不変性
不変性 - Object.assignはshallow copy - barとobj.barは共有されている - 他の関数で書き換えられてしまう可能性が
不変性
純粋関数 - 副作用がない - 戻り値が引数によってのみ変化する - 何回実行しても、引数が同じなら結果は同じ - ユニットテストが楽に書ける
純粋でない関数 関数 引数 戻り値 外部変数 外部
純粋な関数 関数 引数 戻り値
フロントエンドの例 - ステートレスなコンポーネント - 関数コンポーネント(React) - functionalオプション(Vue) - Flux -
複数の関数の組み合わせ - State -> View、Action -> State
関数コンポーネント(React) 関数 prop View
classコンポーネント(React/純粋でない関数) 関数 引数 戻り値 外部変数
Flux Component State View Dispatcher Action
実際、副作用なしでフロントエンドって作れるの?
無理
副作用とフロントエンド - そもそも、View層が副作用そのもの - 副作用を排除するのは不可能 - 副作用の有無を見分けて、分離する設計 - 副作用がない処理はテストがしやすい -
バグの原因となり得る箇所を小さくできる
まとめ - フロントエンドでも関数型は適用できる - なんとなく使うならそんなに難しくない - それぞれの考え方を理解した設計が必要 - 副作用の排除は不可能という前提 -
純粋な関数として切り分けれる部分はないか - 副作用の有無でレイヤーを分ける