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
280
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
630
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
610
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
730
Other Decks in Programming
See All in Programming
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
680
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
230
Folding Cheat Sheet #8
philipschwarz
PRO
0
140
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
150
(Deep|Web) Link support with expo-router
mrtry
0
190
今日で分かる!カスタムコップの作り方
krpk1900
2
270
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
1.2k
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2k
いかにして不足・不整合なくデータ移行したか
tjmtmmnk
1
910
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
140
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
250
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
160
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
11k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Six Lessons from altMBA
skipperchong
26
3.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
106
48k
Teambox: Starting and Learning
jrom
132
8.7k
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
A Philosophy of Restraint
colly
203
16k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Facilitating Awesome Meetings
lara
49
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
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層が副作用そのもの - 副作用を排除するのは不可能 - 副作用の有無を見分けて、分離する設計 - 副作用がない処理はテストがしやすい -
バグの原因となり得る箇所を小さくできる
まとめ - フロントエンドでも関数型は適用できる - なんとなく使うならそんなに難しくない - それぞれの考え方を理解した設計が必要 - 副作用の排除は不可能という前提 -
純粋な関数として切り分けれる部分はないか - 副作用の有無でレイヤーを分ける