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
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
330
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
XP, Testing and ninja testing ZOZ5
m_seki
2
300
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Model Pollution
hschwentner
1
180
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
870
Serena MCPのすすめ
wadakatu
4
900
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Bash Introduction
62gerente
615
210k
The Invisible Side of Design
smashingmag
301
51k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Unsuck your backbone
ammeep
671
58k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Gamification - CAS2011
davidbonilla
81
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Cult of Friendly URLs
andyhume
79
6.6k
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で書き換えました