Upgrade to Pro — share decks privately, control downloads, hide ads and more …

辛いコードを甘くするカリー化のレシピ

03e869e0b971213c12889635e29e0aae?s=47 もなか
June 19, 2021
Technology
0
240

 辛いコードを甘くするカリー化のレシピ

もりけん塾勉強会で使用した勉強会資料です。

03e869e0b971213c12889635e29e0aae?s=128

もなか

June 19, 2021
Tweet

More Decks by もなか

See All by もなか
03e869e0b971213c12889635e29e0aae?s=48 443n0511
0
200

Other Decks in Technology

See All in Technology
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
2
200
93c80c388fe9d8f9df7d030549a0ff0b?s=48 chaspy
0
150
48a913a2e3bb5e68aae6f73079648e84?s=48 jnchito
2
190
1dceaa2dcea41c16004f430c1723b20e?s=48 miso
0
220
58ed7368f1de80df0b380087b19a4ac1?s=48 sugarcrm
PRO
0
140
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
0
280
A2cac4b3dcb2bc0b87917ddc034ef708?s=48 sansandsoc
0
110
9bc35c46b94d7f2657760455cf3fa36a?s=48 nukemberg
1
180
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
1
740
Ac734fc32781678475b577944bb5a9ae?s=48 charity
1
860
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
140
61cd8af33de206c39c875e3321e9c225?s=48 pineapplecandy
0
110

Featured

See All Featured
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
2
20k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
27k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
20k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
210
11k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
23
1.3k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
109
6.7k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
191
14k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.5k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
263
20k

Transcript

  1. 辛いコードを 甘くする カリー化のレシピ

  2. 自己紹介 ソフトウェア開発会社でテスター兼コーダーとして勤務 パンを焼くのが好き ▶Twitter:@ruby443n もなか@js詰まったらパン作る人

  3. 甘口なコードとは？ 扱いやすい

  4. 可読性が高い スマート 保守しやすい バグが少ない

  5. 具体的には？

  6. ・・・。 わかる？ いや、わかんない

  7. 変数・定数 命名 条件式 関数 いろいろあるよ

  8. 変数・定数 命名 条件式 関数 いろいろあるよ 今回はココ

  9. 今日話す内容 高階関数ってなに？ カリー化とは 部分適応って知ってる？

  10. 話さないこと カレーパンのレシピ

  11. 知りたい方はDMください 待ってまーす

  12. さて

  13. 下記のリストからデザートメニューだけを 取り出す場合について考えてみます。 ]; constmenus=[ {menu:'ハンバーガー',type:burger}, {menu:'チーズバーガー',type:burger}, {menu:'ソフトクリーム',type:dessert}, {menu:'ポテト',type:side}, {menu:'チキンナゲット',type:side}, {menu:'ホットアップルパイ',type:dessert},

    {menu:'コーラ',type:drink}, {menu:'オレンジジュース',type:drink} 

  14. for文の場合

  15. デザートメニューだけを取り出す（for文の場合） console.log(dessertMenus); constdessertMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===dessert){   dessertMenus.push(menus[i]);  } } 

  16. 処理が増えていくと どうなるか 考えてみようね

  17. constdessertMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===dessert){   dessertMenus.push(menus[i]);  } }  constburgerMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===burger){

      burgerMenus.push(menus[i]);  } }  constsideMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===side){   sideMenus.push(menus[i]);  } } 

  18. 目がシパシパする

  19. for文の場合 console.log(dessertMenus); constdessertMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===dessert){   dessertMenus.push(menus[i]);  } }  デザートかどうか

  20. for文の場合 console.log(dessertMenus); constdessertMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===dessert){   dessertMenus.push(menus[i]);  } }  配列の中に

    値を追加

  21. console.log(dessertMenus); constdessertMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===dessert){   dessertMenus.push(menus[i]);  } }  for文の場合 処理が2種類ある

  22. 分けちゃいましょう

  23. 高階関数とは 関数を引数または戻り値 として扱う関数のこと 引数：プログラムや関数に渡す値のこと 戻り値：プログラムや関数から戻ってくる値のこと

  24. コールバック関数には 特定の条件を与えて取得したい内容を書くよ すると任意のデータを抽出して新しい配列を生成してくれるよ filter関数をつかって高階関数をつくるよ 配列データ.filter(コールバック関数) constitems= 

  25. へえ〜… わかる？ ぼんやり…

  26. コールバック関数に書くこと 特定の条件を与えて取得したい内容を書くよ すると任意のデータを抽出して新しい配列を生成してくれるよ filterをつかって高階関数をつくるよ 配列データ.filter(コールバック関数) constitems= 

  27. 高階関数の場合 デザートメニューかどうか判断する関数と メニューからデザートメニューを抜き出す関数に分けて考える

  28. 高階関数の場合 デザートメニューかどうか判断する関数と メニューからデザートメニューを抜き出す関数に分けて考える デザートかどうか

  29. 高階関数の場合 デザートメニューかどうか判断する関数と メニューからデザートメニューを抜き出す関数に分けて考える isDessertMenuを抽出

  30. 処理が増えていくと どうなるか 考えてみようね

  31. constisDessertMenus=function(menu){ returnmenu.type===dessert; }; constisBurgerMenus=function(menu){ returnmenu.type===Burger'; }; constisSideMenus=function(menu){ returnmenu.type==='side'; }; constdessertMenus=menus.filter(isDessertMenus);

    constdessertMenus=menus.filter(isBurgerMenus); constdessertMenus=menus.filter(isSideMenus);

  32. カリー化とは

  33. カリー化とは ２つ以上の引数を取る関数 を分割し、 １つの引数だけを取る関数 の組み合わせに書き換える こと

  34. ふ〜ん…？

  35. たとえば

  36. カリー化していない関数（引数を２つ取るもの） 結果

  37. カリー化された関数 （１つの引数だけを取る関数の組み合わせ） 結果

  38. …なんか逆に 複雑になってない？

  39. 何故カリー化が いいのか カリー化をすると 部分適用を簡単に行うこと ができるからぜひ使ってほ しいのです。 順番に説明するね

  40. 部分適用とは

  41. 部分適用とは 複数の引数を受け取る関数 の引数の値を固定し、より 少ない数の引数を受け取る 関数に変換すること 引数を固定化してしまうことで、 バグが起きる可能性を極力抑えることができるよ！

  42. わかりにくいなぁ

  43. カリー化していない関数（引数を２つ取るもの）

  44. カリー化していない関数（引数を２つ取るもの） 毎回１を代入してる

  45. カリー化していない関数（引数を２つ取るもの） 毎回１を代入してる 無駄が多く バグが起こりやすい

  46. カリー化された関数 （１つの引数だけを取る関数の組み合わせ）

  47. カリー化された関数 （１つの引数だけを取る関数の組み合わせ） １を足す部分が固定化

  48. カリー化された関数 （１つの引数だけを取る関数の組み合わせ） １を足す部分が固定化 引数を固定化してしまうことで、 バグが起きる可能性を極力抑えることができたよ！

  49. constisDessertMenus=function(menu){ returnmenu.type===dessert; }; constisBurgerMenus=function(menu){ returnmenu.type===Burger'; }; constisSideMenus=function(menu){ returnmenu.type==='side'; }; constdessertMenus=menus.filter(isDessertMenus);

    constdessertMenus=menus.filter(isBurgerMenus); constdessertMenus=menus.filter(isSideMenus);

  50. constisDessertMenus=function(menu){ returnmenu.type===dessert; }; constisBurgerMenus=function(menu){ returnmenu.type===Burger'; }; constisSideMenus=function(menu){ returnmenu.type==='side'; }; constdessertMenus=menus.filter(isDessertMenus);

    constdessertMenus=menus.filter(isBurgerMenus); constdessertMenus=menus.filter(isSideMenus); カリー化と部分適応を 使ってみるよ

  51. 高階関数の場合 デザートメニューかどうか判断する関数と メニューからデザートメニューを抜き出す関数に分けて考える

  52. 高階関数の場合 デザートメニューかどうか判断する関数と メニューからデザートメニューを抜き出す関数に分けて考える ココを変えるよ

  53. functionmenuType(type){ returnfunction(menu){ returnmenu.type===type }; }; constdessertMenus=menus.filter(menuType( dessert ));  高階関数とカリー化と部分適用を使ったよ

  54. constmenuType=(type)=>{ return(menu)=>{ returnmenu.type===type }; }; constdessertMenus=menus.filter(menuType( dessert ));  【アロー関数変更】functionを=>へ変更

  55. constmenuType=(type)=>(menu)=>menu.type===type; constdessertMenus=menus.filter(menuType( dessert ));  【アロー関数変更】{}とreturnを省略

  56. constmenuType=type=>menu=>menu.type===type; constdessertMenus=menus.filter(menuType( dessert ));  【アロー関数変更】{}とreturnと()を省略

  57. constmenuType=type=>menu=>menu.type===type; constdessertMenus=menus.filter(menuType( dessert )); constburgerMenus=menus.filter(menuType( burger )); constsideMenus=menus.filter(menuType( side ));

     処理が増えても簡潔に書ける

  58. constdessertMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===dessert){   dessertMenus.push(menus[i]);  } }  constburgerMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===burger){

      burgerMenus.push(menus[i]);  } }  constsideMenus=[]; for(leti=0;i<menus.length;i++){  if(menus[i].type===side){   sideMenus.push(menus[i]);  } }  これが

  59. constmenuType=type=>menu=>menu.type===type; constdessertMenus=menus.filter(menuType( dessert )); constburgerMenus=menus.filter(menuType( burger )); constsideMenus=menus.filter(menuType( side ));

     こう

  60. constmenuType=type=>menu=>menu.type===type; constdessertMenus=menus.filter(menuType( dessert )); constburgerMenus=menus.filter(menuType( burger )); constsideMenus=menus.filter(menuType( side ));

     こう

  61. まとめ・質疑応答

  62. ありがとうございました 参考資料 高階関数、カリー化、部分適用 https://qiita.com/nouka/items/d9f29db7b6a69baa650a javascriptのcurry化とは何か https://developer.yukimonkey.com/article/20200303/#h2_3