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
970
関数型プログラミングとフロントエンド
俺の話を聞け!!LT大会 #11(2018/09/12)の発表資料です。
タイトル詐欺感が漂います。
ponday
September 12, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
1.1k
TypeScriptの型表現
honda
10
2.9k
Web Componentsの今
honda
1
380
これまでのReact、これからのReact
honda
0
270
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
630
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
600
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
720
Other Decks in Programming
See All in Programming
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
170
2024 컴포즈 정원사
jisungbin
0
150
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
260
A New Era of Testing
mannodermaus
2
510
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
180
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
GoのIteratorに詳しくなってしまう
inatonix
1
200
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Debugging Ruby Performance
tmm1
72
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
The Language of Interfaces
destraynor
153
23k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
How GitHub (no longer) Works
holman
310
140k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Being A Developer After 40
akosma
84
590k
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層が副作用そのもの - 副作用を排除するのは不可能 - 副作用の有無を見分けて、分離する設計 - 副作用がない処理はテストがしやすい -
バグの原因となり得る箇所を小さくできる
まとめ - フロントエンドでも関数型は適用できる - なんとなく使うならそんなに難しくない - それぞれの考え方を理解した設計が必要 - 副作用の排除は不可能という前提 -
純粋な関数として切り分けれる部分はないか - 副作用の有無でレイヤーを分ける