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
もなか
June 19, 2021
Technology
0
760
辛いコードを甘くするカリー化のレシピ
もりけん塾勉強会で使用した勉強会資料です。
もなか
June 19, 2021
Tweet
Share
More Decks by もなか
See All by もなか
知っているようで知らないOGPの書き方
443n0511
0
390
Other Decks in Technology
See All in Technology
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
Agile PBL at New Grads Trainings
kawaguti
PRO
1
420
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
11k
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
520
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
130
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
190
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
120
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
250
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
4
1.5k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
810
Building Adaptive Systems
keathley
43
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Done Done
chrislema
185
16k
A Modern Web Designer's Workflow
chriscoyier
696
190k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Rails Girls Zürich Keynote
gr2m
95
14k
Unsuck your backbone
ammeep
671
58k
Being A Developer After 40
akosma
90
590k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
辛いコードを 甘くする カリー化のレシピ
自己紹介 ソフトウェア開発会社でテスター兼コーダーとして勤務 パンを焼くのが好き ▶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);
カリー化とは
カリー化とは 2つ以上の引数を取る関数 を分割し、 1つの引数だけを取る関数 の組み合わせに書き換える こと
ふ〜ん…?
たとえば
カリー化していない関数(引数を2つ取るもの) 結果
カリー化された関数 (1つの引数だけを取る関数の組み合わせ) 結果
…なんか逆に 複雑になってない?
何故カリー化が いいのか カリー化をすると 部分適用を簡単に行うこと ができるからぜひ使ってほ しいのです。 順番に説明するね
部分適用とは
部分適用とは 複数の引数を受け取る関数 の引数の値を固定し、より 少ない数の引数を受け取る 関数に変換すること 引数を固定化してしまうことで、 バグが起きる可能性を極力抑えることができるよ!
わかりにくいなぁ
カリー化していない関数(引数を2つ取るもの)
カリー化していない関数(引数を2つ取るもの) 毎回1を代入してる
カリー化していない関数(引数を2つ取るもの) 毎回1を代入してる 無駄が多く バグが起こりやすい
カリー化された関数 (1つの引数だけを取る関数の組み合わせ)
カリー化された関数 (1つの引数だけを取る関数の組み合わせ) 1を足す部分が固定化
カリー化された関数 (1つの引数だけを取る関数の組み合わせ) 1を足す部分が固定化 引数を固定化してしまうことで、 バグが起きる可能性を極力抑えることができたよ!
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);
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); カリー化と部分適応を 使ってみるよ
高階関数の場合 デザートメニューかどうか判断する関数と メニューからデザートメニューを抜き出す関数に分けて考える
高階関数の場合 デザートメニューかどうか判断する関数と メニューからデザートメニューを抜き出す関数に分けて考える ココを変えるよ
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 ));
こう
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