Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
勝手にビブリオバトル「JavaScriptで学ぶ関数型プログラミング」#wejs
sadnessOjisan
March 22, 2019
Technology
1
430
勝手にビブリオバトル「JavaScriptで学ぶ関数型プログラミング」#wejs
sadnessOjisan
March 22, 2019
Tweet
Share
More Decks by sadnessOjisan
See All by sadnessOjisan
div 上にコメントを流す技術
sadnessojisan
0
76
Rust でパーソナルカラーを診断できる CLI を作った
sadnessojisan
0
43
サーバーアーキテクチャと非同期ランタイムいろいろ
sadnessojisan
0
400
SSG is a compiler
sadnessojisan
6
4.1k
不用品掲示サイトをMicroCMS + NextJS + vanilla-extract で作った話
sadnessojisan
3
700
preactの仕組みを理解する軽量版教育用preactを作ってる話
sadnessojisan
4
2.3k
Node.jsの非同期とI/Oについて調べてみた
sadnessojisan
2
650
TypeScriptのDIはどうすればいいの?
sadnessojisan
10
2.3k
簡単には届かなかったweb push/web-push-is-difficult#pwanight
sadnessojisan
2
290
Other Decks in Technology
See All in Technology
Babylon.js で簡単 WebXR
yuhara0928
1
910
Power BIのモバイルと都 +1 / Tokyo
ishiayaya
0
130
如何使用 Argo Event& Workflow 快速建置自定義的工作流程 @ #CNTUG #47
line_developers_tw
PRO
0
450
Who owns the Service Level?
chaspy
5
730
~スタートアップの人たちに捧ぐ~ 監視再入門 in AWS
track3jyo
PRO
30
8.4k
【OCHaCafe#5】その Pod 突然落ちても大丈夫ですか?
k6s4i53rx
1
120
Power BI Premiumでデータ準備!
hanaseleb
1
180
Power BI ”を” 可視化しよう!
hanaseleb
0
140
5分で完全理解するGoのiota
uji
3
1.8k
スタートアップ入社4日目までに考えたAWSのセキュリティ向上/ Startup AWS Security
shonansurvivors
3
2.4k
數據的多重宇宙 @ LINE Taiwan
line_developers_tw
PRO
0
470
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
fujiwara3
6
2.8k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
310
33k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Become a Pro
speakerdeck
PRO
3
770
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Unsuck your backbone
ammeep
659
55k
Done Done
chrislema
174
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Transcript
勝⼿にビブリオバトル 「JavaScriptで学ぶ関数型プログラミング」 Yuta Ide (@sadnessOjisan) 2019-03-22 We are JavaScripters #30
• Yuta Ide • @sadnessOjisan (Twitter, GitHub, Qiita) • jsonに⾊をつける仕事をしています。
• 明⽇、誕⽣⽇です。
• Yuta Ide • @sadnessOjisan (Twitter, GitHub, Qiita) • jsonに⾊をつける仕事をしています。
• 明⽇、誕⽣⽇です。 最近、肩がズレてきた。
祝ってくれる⼈がいなくて 来たわけではないです!
本を紹介しに来ました 出版社の回し者
知的評論合戦 ビブリオバトル 1. 発表参加者が読んで⾯⽩いと思った本を持って集まる. 2. 順番に⼀⼈5分間で本を紹介する. 3. それぞれの発表の後に参加者全員でその発表に関するディスカッションを2〜3 分⾏う. 4.
全ての発表が終了した後に「どの本が⼀番読みたくなったか?」を基準とした投 票を参加者全員⼀票で⾏い,最多票を集めたものを『チャンプ本』とする. http://www.bibliobattle.jp/
これ、技術書でやりたい・・・
書評LTという形でやってみます 普通のビブリオバトルと違って、スライド使 います。(勉強会なので)
では早速はじめます
⾃分の置かれた環境 1. エンジニアになって1年経ち、後輩ができる 2. 既存コードのコピペするマンから、参考にされる先輩になる 後輩のためにいろんなパーツやライブラリを作ってあげたい、カ スタマイズするだけで案件をさばける神関数を作ってあげたい
そんな⾃分にぴったりの本でした 出版社の回し者
こんな⼈に読んでほしい • ⾃分の書いたコードを汎⽤的にしていきたい⼈ Ø ライブラリのインターフェース設計に役⽴ちます Ø ユーザーの要望を汎⽤的に答える、拡張性を⾼めるために関数 型プログラミングのテクニックは有効です
作⽤的プログラミング(2章) 第⼀級関数 値として使えることを第⼀級という。JSの関数は第⼀級オブジェクト。 (=関数を他の関数の引数や戻り値にできる) 作⽤的プログラミング ある関数を実⾏するために他の関数からそれを呼び出すスタイル [1,2,3].map(item => item *
10)
作⽤的プログラミング(2章) 作⽤的プログラミングって何が嬉しいの? 実⾏したい関数の実⾏タイミングや組み合わせを制御できる。⼩さい 関数を集めて、複雑な処理をする関数を作りやすくなる。
変数のスコープとクロージャ(3章) クロージャってなに? それが⽣成された付近の値を確保 する関数のこと const whatWasTheLocal = () => {
const CAPTURED = "Hello"; return () => { return "ローカル変数: " + CAPTURED; }; }; const printLocal = whatWasTheLocal(); printLocal(); // ローカル変数: Hello 右の例だと、whatWasTheLocalの実⾏後 もCAPTUREDが失われていない
変数のスコープとクロージャ(3章) ローカル変数と引数はクロージャ として保存できる 10と1024は⾜される値として残っている const makeAdder = CAPTURED => {
return free => { return free + CAPTURED; }; }; const add10 = makeAdder(10); const add1024 = makeAdder(1024); add10(32); // 42 add1024(32); // 1056
変数のスコープとクロージャ(3章) で、何が嬉しいの? ある設定がなされた関数を作ることがで きる。 10と1024は⾜される数値として設定され ている。 このテクニックが 5章で効いてくる const makeAdder
= CAPTURED => { return free => { return free + CAPTURED; }; }; const add10 = makeAdder(10); const add1024 = makeAdder(1024); add10(32); // 42 add1024(32); // 1056
この本のすごいところ! スコープやクロージャの仕組みをシミュレートするコードの開発から 説明がはじまるので、納得が⾏きやすいです!
関数を組み⽴てる関数(5章) 前提: JSの関数には、引数と返り値に関数が使える。そのような性 質を持つ関数を⾼階関数という。(詳しくは4章で扱う) 5章: 関数を組み⽴てる関数&関数を合成する⽅法を学ぶ ⼩さいパーツを組み合わせて複雑な処理をする⽅法を学ぶ
関数を組み⽴てる関数(5章) カリー化 引数が渡されるたびに新しい関数を返すようにすること const leftCurryDiv = n => { return
d => { return n / d; }; }; const divide10By = leftCurryDiv(10); divide10By(2); // 5 // ⼀気に呼びたい divide10By(10)(2)
関数を組み⽴てる関数(5章) カリー化は何が嬉しい? • 設定を返し続けることができ、 設定を⾜していける • 流暢なAPIを作ることができる const curry3 =
fun => { return last => { return middle => { first => { fun(first, middle, last); }; }; }; }; const toHex = n => { const hex = n.toString(16); return hex.length < 2 ? [0, hex].join("") : hex; }; const rgbToHexString = (r, g, b) => { return ["#", toHex(r), toHex(g), toHex(b)].join(""); }; const blueGreenish = curry3(rbtToHexString)(255)(200);
脱線 https://niconare.nicovideo.jp/watch/kn3927 @f_subal さんのスライドがすごくわかりやすかったです!
脱線 const leftCurryDiv = n => { return d =>
{ return n / d; }; }; const divide10By = leftCurryDiv(10); divide10By(2); // 5 // ⼀気に呼びたい divide10By(10)(2) ところで、何か⾒覚えありますよね?
脱線 const mapStateToProps = (state) => ({ modalState: state.hoge.modalState });
const mapDispatchToProps = (dispatch) => ({ foo: (unitSetting) => dispatch(foo()) }); export default connect( mapStateToProps, mapDispatchToProps )(SettingMonthlyTarget);
脱線 const mapStateToProps = (state) => ({ modalState: state.hoge.modalState });
const mapDispatchToProps = (dispatch) => ({ foo: (unitSetting) => dispatch(foo()) }); export default connect( mapStateToProps, mapDispatchToProps )(SettingMonthlyTarget); Storeのどのstateを componentで使うかを 設定する関数 Storeのどのactionを componentからdispatchす るかを設定する関数
関数を組み⽴てる関数(5章) compose 引数と戻り値の関係に基づいて合成する ⾏ってしまえば、合成のためのパイプライン f(g(x)) といったことをしてくれる 実装⽅法1 underscoreやlodashの_.compose()を利⽤する _.compose(doubleSay, capitalize,
exclaim, console.log) 実装⽅法2 Pipeline operatorを利⽤する x |> doubleSay |> capitalize |> exclaim |> console.log https://github.com/tc39/proposal-pipeline-operator
この本のすごいところ! 流暢なAPIを作るという表現 後から設定を⾜せるための仕組みを作ってるということを⼀貫して説 明しており、テクニックのメリットに納得しやすい!
フローベースプログラミング(8章) メソッドチェーン ⼩さい関数を次々と適⽤させていく魔法 createPerson() .setFirstName('mike') .setLastName('fogus) .setAge(108) .toString() この記法どこかでみたことが・・・ :thinking_face:
フローベースプログラミング(8章) $(".test").click(function() { $(this).text("クリックされました"); }); _.map(data, d => { return
d.name; }) .shuffle() .value();
フローベースプログラミング(8章) メソッドチェーンを作るためには ⾃⾝の参照を返す関数を作る const createPerson = () => { let
firstName = ""; let age = 0; return { setFirstName: fn => { firstName = fn; return this; }, setAge: a => { age = a; return this; }, toString: () => { return [firstName, age].join(""); } }; };
脱線 formatterのために使ってる • 数値の先頭に \ をつける • 数値の後に % をつける
• 数値を少数点1位まで出す • 数値が整数なら.0をつける • 10000で割ってケツに万を付ける ◦ これらをチェーンして、案件に沿ったフォーマットを返す関数関数を作ると、フォーマッ タに対する仕様変更に強くなる × ただし、遅延実⾏や型のズレの対処はまだ⼯夫が必要 (thunkとactionsという仕組みで解決する。P228- )
この本ならではの良かったこと 「設定を加える関数を作るにはどうしたらいいか」を⼀貫しており、学ぶ 時の⽬標を⾒失いづらい サンプルコードが豊富で、それも実務でも欲しくなるサンプルコードがた くさんある 道具を使うだけでなく、道具を作ることができるようになった本でした
この本を買いたくなった⼈ーーー???