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
Functional Programming Applied in JS
Search
Tak Yanagida
December 22, 2013
Programming
0
96
Functional Programming Applied in JS
「JSで実際に役立った関数型プログラミング」
jsCafe #17で発表しました。
関数型プログラミングの考え方を使うことで、JavaScriptのコードがすっきり書けた事例を紹介。
Tak Yanagida
December 22, 2013
Tweet
Share
More Decks by Tak Yanagida
See All by Tak Yanagida
Non-mercator Projection with Mapnik
tyanagida
1
1.2k
How much we have to study English?
tyanagida
0
120
Brief Introduction of jQuery Mobile
tyanagida
0
130
PowerShell for LL Users
tyanagida
0
1.2k
Other Decks in Programming
See All in Programming
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
550
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
210
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
590
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
280
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
株式会社 Sun terras カンパニーデック
sunterras
0
340
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
910
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
530
理論と実務のギャップを超える
eycjur
0
140
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Optimizing for Happiness
mojombo
379
70k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
For a Future-Friendly Web
brad_frost
180
10k
Done Done
chrislema
185
16k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Being A Developer After 40
akosma
91
590k
Statistics for Hackers
jakevdp
799
220k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
BBQ
matthewcrist
89
9.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
JSで実際に役立った 関数型プログラミング 柳田 @tyanagida
ダムの地図公開してます http://maps.ontarget.cc/dams/
ダムの地図公開してます http://maps.ontarget.cc/dams/
自己紹介補足
自己紹介補足 • 古めのエンジニア コンピュータ歴約30年 Linuxは0.99から
自己紹介補足 • 古めのエンジニア コンピュータ歴約30年 Linuxは0.99から • 実はデューク大学のMBA
自己紹介補足 • 古めのエンジニア コンピュータ歴約30年 Linuxは0.99から • 実はデューク大学のMBA ティム・クックと一緒
自己紹介補足 • 古めのエンジニア コンピュータ歴約30年 Linuxは0.99から • 実はデューク大学のMBA •
ITエンジニアのための英語読解講 座はじめました ティム・クックと一緒
自己紹介補足 • 古めのエンジニア コンピュータ歴約30年 Linuxは0.99から • 実はデューク大学のMBA •
ITエンジニアのための英語読解講 座はじめました ティム・クックと一緒 英語ドキュメントの分からない 箇所があったら解説します http://d.hatena.ne.jp/casualstartup/20131117/it_english_grammar
関数って何?
関数って何? 関数=函数
関数って何? 関数=函数 大昔の教科書表記
関数って何? 関数=函数 f a b ・・・ 大昔の教科書表記 y
関数って何? 関数=函数 f a b ・・・ 大昔の教科書表記 y 値を入力したら、値が返ってくる (副作用はなし)
例題: FizzBuzz
例題: FizzBuzz 1. 1~100まで順に表示する 2. ただし、 1. 3の倍数のときには代わりにFizzと表示 2. 5の倍数のときには代わりにBuzzと表示
3. 15の倍数のときには代わりにFizzBuzzと表示
例題: FizzBuzz 1. 1~100まで順に表示する 2. ただし、 1. 3の倍数のときには代わりにFizzと表示 2. 5の倍数のときには代わりにBuzzと表示
3. 15の倍数のときには代わりにFizzBuzzと表示 まずfor (i = 1; i <= 100; i++)
例題: FizzBuzz 1. 1~100まで順に表示する 2. ただし、 1. 3の倍数のときには代わりにFizzと表示 2. 5の倍数のときには代わりにBuzzと表示
3. 15の倍数のときには代わりにFizzBuzzと表示 まずfor (i = 1; i <= 100; i++) これは手続き脳
関数脳の場合
関数脳の場合 1 ・・・ 2 3 100
f f f f 関数脳の場合 1 ・・・ 2 3 100
f f f f 関数脳の場合 1 ・・・ 2 3 100
1 2 Fizz Buzz
f f f f 関数脳の場合 1 ・・・ 2 3 100
1 2 Fizz Buzz ・fは、数字を1つ受け取って、FizzやBuzzを返す関数
f f f f 関数脳の場合 1 ・・・ 2 3 100
1 2 Fizz Buzz ・fは、数字を1つ受け取って、FizzやBuzzを返す関数 ・配列の各要素に、関数を適用する操作が”map”
JavaScriptで書く var f = function (x) { if (x %
15 === 0) return 'FizzBuzz'; if (x % 5 === 0) return 'Buzz'; if (x % 3 === 0 ) return 'Fizz'; return x; } [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map(f);
JavaScriptで書く var f = function (x) { if (x %
15 === 0) return 'FizzBuzz'; if (x % 5 === 0) return 'Buzz'; if (x % 3 === 0 ) return 'Fizz'; return x; } [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map(f); ECMA Script 5.1以降
ダムの地図で使った場所: フィルタの処理
ダムの地図で使った場所: フィルタの処理 • if文が結構ややこしい • フィルタ条件は増減あるかも • ダムの分類も変わるかも • 画面内のダムだけ対象か、全ダ
ム対象か、決めてない
ダムの地図で使った場所: フィルタの処理 • if文が結構ややこしい • フィルタ条件は増減あるかも • ダムの分類も変わるかも • 画面内のダムだけ対象か、全ダ
ム対象か、決めてない Mapっぽく書いたらすっきり!!
ついでにreduceはこんな感じ * この操作をfoldと呼ぶ言語もある f f f a1 ・・・ a2 a3
an ・・・ y a4 f
言いたかったこと 関数型プログラミングを知って 「コーディングの引き出し」 増やしましょう
参考文献 • プログラミングGauche Scheme (LISP)の本と見せかけつ つ、同時に関数型プログラミング の初歩に触れられる * FizzBuzzの例題は、この本
をもとにJSで書き換えました