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
1k
関数型プログラミングとフロントエンド
俺の話を聞け!!LT大会 #11(2018/09/12)の発表資料です。
タイトル詐欺感が漂います。
ponday
September 12, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
410
これまでのReact、これからのReact
honda
0
300
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
670
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
680
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
790
Other Decks in Programming
See All in Programming
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
150
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
3
940
Being an ethical software engineer
xgouchet
PRO
0
210
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110
Vibe Coding の話をしよう
schroneko
2
640
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
480
The Evolution of the CRuby Build System
kateinoigakukun
0
700
エンジニアが挑む、限界までの越境
nealle
1
210
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
150
Making TCPSocket.new "Happy"!
coe401_
1
1.3k
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
160
エンジニア未経験が最短で戦力になるためのTips
gokana
0
280
Featured
See All Featured
Statistics for Hackers
jakevdp
798
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Navigating Team Friction
lara
184
15k
Visualization
eitanlees
146
16k
The Invisible Side of Design
smashingmag
299
50k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cult of Friendly URLs
andyhume
78
6.3k
Making Projects Easy
brettharned
116
6.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
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層が副作用そのもの - 副作用を排除するのは不可能 - 副作用の有無を見分けて、分離する設計 - 副作用がない処理はテストがしやすい -
バグの原因となり得る箇所を小さくできる
まとめ - フロントエンドでも関数型は適用できる - なんとなく使うならそんなに難しくない - それぞれの考え方を理解した設計が必要 - 副作用の排除は不可能という前提 -
純粋な関数として切り分けれる部分はないか - 副作用の有無でレイヤーを分ける