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

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

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

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

具体的には？

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

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

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

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

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

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

さて

下記のリストからデザートメニューだけを取り出す場合について考えてみます。 ]; 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}

for文の場合

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

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

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]); } }

目がシパシパする

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

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

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

分けちゃいましょう

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

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

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

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

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

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

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

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

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);

カリー化とは

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

ふ〜ん…？

たとえば

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

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

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

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

部分適用とは

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

わかりにくいなぁ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

constmenuType=type=>menu=>menu.type===type; constdessertMenus=menus.filter(menuType( dessert )); constburgerMenus=menus.filter(menuType( burger )); constsideMenus=menus.filter(menuType( side ));
処理が増えても簡潔に書ける

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]); } } これが

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

まとめ・質疑応答

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

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

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

More Decks by もなか

Other Decks in Technology

Featured

Transcript