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
95
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
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
NEWT Backend Evolution
xpromx
1
140
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
800
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
PipeCDのプラグイン化で目指すところ
warashi
1
300
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Writing Fast Ruby
sferik
628
62k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
A Tale of Four Properties
chriscoyier
160
23k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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で書き換えました