勝手にビブリオバトル「JavaScriptで学ぶ関数型プログラミング」#wejs

Transcript

1. 勝⼿にビブリオバトル 「JavaScriptで学ぶ関数型プログラミング」 Yuta Ide (@sadnessOjisan) 2019-03-22 We are JavaScripters #30

2. • Yuta Ide • @sadnessOjisan (Twitter, GitHub, Qiita) • jsonに⾊をつける仕事をしています。

   • 明⽇、誕⽣⽇です。

3. • Yuta Ide • @sadnessOjisan (Twitter, GitHub, Qiita) • jsonに⾊をつける仕事をしています。

   • 明⽇、誕⽣⽇です。 最近、肩がズレてきた。

4. 祝ってくれる⼈がいなくて 来たわけではないです！

5. 本を紹介しに来ました 出版社の回し者

6. 知的評論合戦 ビブリオバトル 1. 発表参加者が読んで⾯⽩いと思った本を持って集まる． 2. 順番に⼀⼈５分間で本を紹介する． 3. それぞれの発表の後に参加者全員でその発表に関するディスカッションを２〜３ 分⾏う． 4.

   全ての発表が終了した後に「どの本が⼀番読みたくなったか？」を基準とした投 票を参加者全員⼀票で⾏い，最多票を集めたものを『チャンプ本』とする． http://www.bibliobattle.jp/

7. これ、技術書でやりたい・・・

8. 書評LTという形でやってみます 普通のビブリオバトルと違って、スライド使 います。（勉強会なので）

9. では早速はじめます

10. ⾃分の置かれた環境 1. エンジニアになって１年経ち、後輩ができる 2. 既存コードのコピペするマンから、参考にされる先輩になる 後輩のためにいろんなパーツやライブラリを作ってあげたい、カ スタマイズするだけで案件をさばける神関数を作ってあげたい

11. そんな⾃分にぴったりの本でした 出版社の回し者

12. こんな⼈に読んでほしい • ⾃分の書いたコードを汎⽤的にしていきたい⼈ Ø ライブラリのインターフェース設計に役⽴ちます Ø ユーザーの要望を汎⽤的に答える、拡張性を⾼めるために関数 型プログラミングのテクニックは有効です

13. 作⽤的プログラミング(2章) 第⼀級関数 値として使えることを第⼀級という。JSの関数は第⼀級オブジェクト。 （=関数を他の関数の引数や戻り値にできる） 作⽤的プログラミング ある関数を実⾏するために他の関数からそれを呼び出すスタイル [1,2,3].map(item => item *

    10)

14. 作⽤的プログラミング(2章) 作⽤的プログラミングって何が嬉しいの？ 実⾏したい関数の実⾏タイミングや組み合わせを制御できる。⼩さい 関数を集めて、複雑な処理をする関数を作りやすくなる。

15. 変数のスコープとクロージャ(3章) クロージャってなに？ それが⽣成された付近の値を確保 する関数のこと const whatWasTheLocal = () => {

    const CAPTURED = "Hello"; return () => { return "ローカル変数: " + CAPTURED; }; }; const printLocal = whatWasTheLocal(); printLocal(); // ローカル変数: Hello 右の例だと、whatWasTheLocalの実⾏後 もCAPTUREDが失われていない

16. 変数のスコープとクロージャ(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

17. 変数のスコープとクロージャ(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

18. この本のすごいところ！ スコープやクロージャの仕組みをシミュレートするコードの開発から 説明がはじまるので、納得が⾏きやすいです！

19. 関数を組み⽴てる関数(5章) 前提: JSの関数には、引数と返り値に関数が使える。そのような性 質を持つ関数を⾼階関数という。（詳しくは4章で扱う） 5章: 関数を組み⽴てる関数&関数を合成する⽅法を学ぶ ⼩さいパーツを組み合わせて複雑な処理をする⽅法を学ぶ

20. 関数を組み⽴てる関数(5章) カリー化 引数が渡されるたびに新しい関数を返すようにすること const leftCurryDiv = n => { return

    d => { return n / d; }; }; const divide10By = leftCurryDiv(10); divide10By(2); // 5 // ⼀気に呼びたい divide10By(10)(2)

21. 関数を組み⽴てる関数(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);

22. 脱線 https://niconare.nicovideo.jp/watch/kn3927 @f_subal さんのスライドがすごくわかりやすかったです！

23. 脱線 const leftCurryDiv = n => { return d =>

    { return n / d; }; }; const divide10By = leftCurryDiv(10); divide10By(2); // 5 // ⼀気に呼びたい divide10By(10)(2) ところで、何か⾒覚えありますよね？

24. 脱線 const mapStateToProps = (state) => ({ modalState: state.hoge.modalState });

    const mapDispatchToProps = (dispatch） => ({ foo: (unitSetting) => dispatch(foo()) }); export default connect( mapStateToProps, mapDispatchToProps )(SettingMonthlyTarget);

25. 脱線 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す るかを設定する関数

26. 関数を組み⽴てる関数(5章) compose 引数と戻り値の関係に基づいて合成する ⾏ってしまえば、合成のためのパイプライン f(g(x)) といったことをしてくれる 実装⽅法１ 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

27. この本のすごいところ！ 流暢なAPIを作るという表現 後から設定を⾜せるための仕組みを作ってるということを⼀貫して説 明しており、テクニックのメリットに納得しやすい！

28. フローベースプログラミング(8章) メソッドチェーン ⼩さい関数を次々と適⽤させていく魔法 createPerson() .setFirstName('mike') .setLastName('fogus) .setAge(108) .toString() この記法どこかでみたことが・・・ :thinking_face:

29. フローベースプログラミング(8章) $(".test").click(function() { $(this).text("クリックされました"); }); _.map(data, d => { return

    d.name; }) .shuffle() .value();

30. フローベースプログラミング(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(""); } }; };

31. 脱線 formatterのために使ってる • 数値の先頭に \ をつける • 数値の後に % をつける

    • 数値を少数点1位まで出す • 数値が整数なら.0をつける • 10000で割ってケツに万を付ける ◦ これらをチェーンして、案件に沿ったフォーマットを返す関数関数を作ると、フォーマッ タに対する仕様変更に強くなる × ただし、遅延実⾏や型のズレの対処はまだ⼯夫が必要 (thunkとactionsという仕組みで解決する。P228- )

32. この本ならではの良かったこと 「設定を加える関数を作るにはどうしたらいいか」を⼀貫しており、学ぶ 時の⽬標を⾒失いづらい サンプルコードが豊富で、それも実務でも欲しくなるサンプルコードがた くさんある 道具を使うだけでなく、道具を作ることができるようになった本でした

33. この本を買いたくなった⼈ーーー？？？