Submit Search
Upload
これからのJavaScriptー関数型プログラミングとECMAScript6
•
34 likes
•
6,522 views
T
TanUkkii
Follow
2014/9/5にLIG社で行われたWebフロント勉強会で発表した資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 46
Download now
Download to read offline
Recommended
ECMAScript6による関数型プログラミング
ECMAScript6による関数型プログラミング
TanUkkii
LINQ 概要 + 結構便利な LINQ to XML
LINQ 概要 + 結構便利な LINQ to XML
ShinichiAoyagi
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
Tomohiro Kumagai
JavaScript入門
JavaScript入門
Ryo Maruyama
Clojure programming-chapter-2
Clojure programming-chapter-2
Masao Kato
Frege, What a Non-strict Language
Frege, What a Non-strict Language
y_taka_23
はてなブックマーク in Scala
はてなブックマーク in Scala
Lintaro Ina
Spectacular Future with clojure.spec
Spectacular Future with clojure.spec
Kent Ohashi
Recommended
ECMAScript6による関数型プログラミング
ECMAScript6による関数型プログラミング
TanUkkii
LINQ 概要 + 結構便利な LINQ to XML
LINQ 概要 + 結構便利な LINQ to XML
ShinichiAoyagi
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
Tomohiro Kumagai
JavaScript入門
JavaScript入門
Ryo Maruyama
Clojure programming-chapter-2
Clojure programming-chapter-2
Masao Kato
Frege, What a Non-strict Language
Frege, What a Non-strict Language
y_taka_23
はてなブックマーク in Scala
はてなブックマーク in Scala
Lintaro Ina
Spectacular Future with clojure.spec
Spectacular Future with clojure.spec
Kent Ohashi
Sns suite presentation
Sns suite presentation
Jason Namkung
Thinking in Cats
Thinking in Cats
Eugene Yokota
Rpscala2011 0601
Rpscala2011 0601
Hajime Yanagawa
JSクラス定義
JSクラス定義
Wataru Nakaseko
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
YujiSoftware
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
y_taka_23
Effective Modern C++ 読書会 Item 35
Effective Modern C++ 読書会 Item 35
Keisuke Fukuda
並行プログラミングと継続モナド
並行プログラミングと継続モナド
Kousuke Ruichi
GoCon 2015 Summer GoのASTをいじくって新しいツールを作る
GoCon 2015 Summer GoのASTをいじくって新しいツールを作る
Masahiro Wakame
はてなブックマークにおけるアクセス制御 - 半環構造に基づくモデル化
はてなブックマークにおけるアクセス制御 - 半環構造に基づくモデル化
Lintaro Ina
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
Fujio Kojima
JavaScript 講習会 #1
JavaScript 講習会 #1
Susisu
Java8 コーディングベストプラクティス and NetBeansのメモリログから...
Java8 コーディングベストプラクティス and NetBeansのメモリログから...
なおき きしだ
C# 7.2 with .NET Core 2.1
C# 7.2 with .NET Core 2.1
信之 岩永
C# 8.0 Preview in Visual Studio 2019 (16.0)
C# 8.0 Preview in Visual Studio 2019 (16.0)
信之 岩永
なぜリアクティブは重要か #ScalaMatsuri
なぜリアクティブは重要か #ScalaMatsuri
Yuta Okamoto
15分でざっくり分かるScala入門
15分でざっくり分かるScala入門
SatoYu1ro
Objective-C のキャストと Swift の型変換を比べてみる #akibaswift
Objective-C のキャストと Swift の型変換を比べてみる #akibaswift
Tomohiro Kumagai
Java SE 8 lambdaで変わる プログラミングスタイル
Java SE 8 lambdaで変わる プログラミングスタイル
なおき きしだ
あなたのScalaを爆速にする7つの方法(日本語版)
あなたのScalaを爆速にする7つの方法(日本語版)
x1 ichi
Architecture of Falcon, a new chat messaging backend system build on Scala
Architecture of Falcon, a new chat messaging backend system build on Scala
TanUkkii
プログラミング言語Scala
プログラミング言語Scala
TanUkkii
More Related Content
What's hot
Sns suite presentation
Sns suite presentation
Jason Namkung
Thinking in Cats
Thinking in Cats
Eugene Yokota
Rpscala2011 0601
Rpscala2011 0601
Hajime Yanagawa
JSクラス定義
JSクラス定義
Wataru Nakaseko
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
YujiSoftware
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
y_taka_23
Effective Modern C++ 読書会 Item 35
Effective Modern C++ 読書会 Item 35
Keisuke Fukuda
並行プログラミングと継続モナド
並行プログラミングと継続モナド
Kousuke Ruichi
GoCon 2015 Summer GoのASTをいじくって新しいツールを作る
GoCon 2015 Summer GoのASTをいじくって新しいツールを作る
Masahiro Wakame
はてなブックマークにおけるアクセス制御 - 半環構造に基づくモデル化
はてなブックマークにおけるアクセス制御 - 半環構造に基づくモデル化
Lintaro Ina
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
Fujio Kojima
JavaScript 講習会 #1
JavaScript 講習会 #1
Susisu
Java8 コーディングベストプラクティス and NetBeansのメモリログから...
Java8 コーディングベストプラクティス and NetBeansのメモリログから...
なおき きしだ
C# 7.2 with .NET Core 2.1
C# 7.2 with .NET Core 2.1
信之 岩永
C# 8.0 Preview in Visual Studio 2019 (16.0)
C# 8.0 Preview in Visual Studio 2019 (16.0)
信之 岩永
なぜリアクティブは重要か #ScalaMatsuri
なぜリアクティブは重要か #ScalaMatsuri
Yuta Okamoto
15分でざっくり分かるScala入門
15分でざっくり分かるScala入門
SatoYu1ro
Objective-C のキャストと Swift の型変換を比べてみる #akibaswift
Objective-C のキャストと Swift の型変換を比べてみる #akibaswift
Tomohiro Kumagai
Java SE 8 lambdaで変わる プログラミングスタイル
Java SE 8 lambdaで変わる プログラミングスタイル
なおき きしだ
あなたのScalaを爆速にする7つの方法(日本語版)
あなたのScalaを爆速にする7つの方法(日本語版)
x1 ichi
What's hot
(20)
Sns suite presentation
Sns suite presentation
Thinking in Cats
Thinking in Cats
Rpscala2011 0601
Rpscala2011 0601
JSクラス定義
JSクラス定義
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
Effective Modern C++ 読書会 Item 35
Effective Modern C++ 読書会 Item 35
並行プログラミングと継続モナド
並行プログラミングと継続モナド
GoCon 2015 Summer GoのASTをいじくって新しいツールを作る
GoCon 2015 Summer GoのASTをいじくって新しいツールを作る
はてなブックマークにおけるアクセス制御 - 半環構造に基づくモデル化
はてなブックマークにおけるアクセス制御 - 半環構造に基づくモデル化
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
JavaScript 講習会 #1
JavaScript 講習会 #1
Java8 コーディングベストプラクティス and NetBeansのメモリログから...
Java8 コーディングベストプラクティス and NetBeansのメモリログから...
C# 7.2 with .NET Core 2.1
C# 7.2 with .NET Core 2.1
C# 8.0 Preview in Visual Studio 2019 (16.0)
C# 8.0 Preview in Visual Studio 2019 (16.0)
なぜリアクティブは重要か #ScalaMatsuri
なぜリアクティブは重要か #ScalaMatsuri
15分でざっくり分かるScala入門
15分でざっくり分かるScala入門
Objective-C のキャストと Swift の型変換を比べてみる #akibaswift
Objective-C のキャストと Swift の型変換を比べてみる #akibaswift
Java SE 8 lambdaで変わる プログラミングスタイル
Java SE 8 lambdaで変わる プログラミングスタイル
あなたのScalaを爆速にする7つの方法(日本語版)
あなたのScalaを爆速にする7つの方法(日本語版)
Viewers also liked
Architecture of Falcon, a new chat messaging backend system build on Scala
Architecture of Falcon, a new chat messaging backend system build on Scala
TanUkkii
プログラミング言語Scala
プログラミング言語Scala
TanUkkii
CRDT in 15 minutes
CRDT in 15 minutes
Shingo Omura
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
ES6 - JavaCro 2016
ES6 - JavaCro 2016
Nenad Pecanac
150421 es6とかな話
150421 es6とかな話
kotaro_hirayama
jQuery勉強会#4
jQuery勉強会#4
Ryo Maruyama
FileReader and canvas and server silde
FileReader and canvas and server silde
Net Kanayan
ES6 はじめました
ES6 はじめました
Net Kanayan
JavaScript.Next Returns
JavaScript.Next Returns
dynamis
kontainer-js
kontainer-js
Kuu Miyazaki
JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6
Aayush Shrestha
Prototypeベース in JavaScript
Prototypeベース in JavaScript
Ryo Maruyama
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
クラスメソッド株式会社
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
Mohd Saeed
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
kenji4569
はじめてのWallaby.js
はじめてのWallaby.js
Shunta Saito
Startup JavaScript
Startup JavaScript
Akinari Tsugo
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
taskie
アニメーションの実装つらい話
アニメーションの実装つらい話
kata shin
Viewers also liked
(20)
Architecture of Falcon, a new chat messaging backend system build on Scala
Architecture of Falcon, a new chat messaging backend system build on Scala
プログラミング言語Scala
プログラミング言語Scala
CRDT in 15 minutes
CRDT in 15 minutes
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
ES6 - JavaCro 2016
ES6 - JavaCro 2016
150421 es6とかな話
150421 es6とかな話
jQuery勉強会#4
jQuery勉強会#4
FileReader and canvas and server silde
FileReader and canvas and server silde
ES6 はじめました
ES6 はじめました
JavaScript.Next Returns
JavaScript.Next Returns
kontainer-js
kontainer-js
JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6
Prototypeベース in JavaScript
Prototypeベース in JavaScript
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
はじめてのWallaby.js
はじめてのWallaby.js
Startup JavaScript
Startup JavaScript
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
アニメーションの実装つらい話
アニメーションの実装つらい話
Similar to これからのJavaScriptー関数型プログラミングとECMAScript6
データサイエンスワールドからC++を眺めてみる
データサイエンスワールドからC++を眺めてみる
Shintaro Fukushima
T69 c++cli ネイティブライブラリラッピング入門
T69 c++cli ネイティブライブラリラッピング入門
伸男 伊藤
JavaScriptクイックスタート
JavaScriptクイックスタート
Shumpei Shiraishi
URLで遊ぼう
URLで遊ぼう
Hiraku Nakano
[TL06] 日本の第一人者が C# の現状と今後を徹底解説! 「この素晴らしい C# に祝福を!」
[TL06] 日本の第一人者が C# の現状と今後を徹底解説! 「この素晴らしい C# に祝福を!」
de:code 2017
お前は PHP の歴史的な理由の数を覚えているのか
お前は PHP の歴史的な理由の数を覚えているのか
Kousuke Ebihara
本当にあった怖い話し (やきに駆動 2.0)
本当にあった怖い話し (やきに駆動 2.0)
Oda Shinsuke
知って得するC#
知って得するC#
Shota Baba
分散メモリ環境におけるシェルスクリプトの高速化手法の提案
分散メモリ環境におけるシェルスクリプトの高速化手法の提案
Keisuke Umeno
中3女子が狂える本当に気持ちのいい constexpr
中3女子が狂える本当に気持ちのいい constexpr
Genya Murakami
あまぁいRcpp生活
あまぁいRcpp生活
Masaki Tsuda
Project lambda
Project lambda
Appresso Engineering Team
GNU awk (gawk) を用いた Apache ログ解析方法
GNU awk (gawk) を用いた Apache ログ解析方法
博文 斉藤
Material
Material
_TUNE_
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
Rのデータ構造とメモリ管理
Rのデータ構造とメモリ管理
Takeshi Arabiki
lispmeetup#63 Common Lispでゼロから作るDeep Learning
lispmeetup#63 Common Lispでゼロから作るDeep Learning
Satoshi imai
関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)
啓 小笠原
多次元配列の効率的利用法の検討
多次元配列の効率的利用法の検討
Yu Sato
秀スクリプトの話
秀スクリプトの話
Hiroshi Tokumaru
Similar to これからのJavaScriptー関数型プログラミングとECMAScript6
(20)
データサイエンスワールドからC++を眺めてみる
データサイエンスワールドからC++を眺めてみる
T69 c++cli ネイティブライブラリラッピング入門
T69 c++cli ネイティブライブラリラッピング入門
JavaScriptクイックスタート
JavaScriptクイックスタート
URLで遊ぼう
URLで遊ぼう
[TL06] 日本の第一人者が C# の現状と今後を徹底解説! 「この素晴らしい C# に祝福を!」
[TL06] 日本の第一人者が C# の現状と今後を徹底解説! 「この素晴らしい C# に祝福を!」
お前は PHP の歴史的な理由の数を覚えているのか
お前は PHP の歴史的な理由の数を覚えているのか
本当にあった怖い話し (やきに駆動 2.0)
本当にあった怖い話し (やきに駆動 2.0)
知って得するC#
知って得するC#
分散メモリ環境におけるシェルスクリプトの高速化手法の提案
分散メモリ環境におけるシェルスクリプトの高速化手法の提案
中3女子が狂える本当に気持ちのいい constexpr
中3女子が狂える本当に気持ちのいい constexpr
あまぁいRcpp生活
あまぁいRcpp生活
Project lambda
Project lambda
GNU awk (gawk) を用いた Apache ログ解析方法
GNU awk (gawk) を用いた Apache ログ解析方法
Material
Material
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
Rのデータ構造とメモリ管理
Rのデータ構造とメモリ管理
lispmeetup#63 Common Lispでゼロから作るDeep Learning
lispmeetup#63 Common Lispでゼロから作るDeep Learning
関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)
多次元配列の効率的利用法の検討
多次元配列の効率的利用法の検討
秀スクリプトの話
秀スクリプトの話
More from TanUkkii
Distributed ID generator in ChatWork
Distributed ID generator in ChatWork
TanUkkii
Non-blocking IO to tame distributed systems ー How and why ChatWork uses async...
Non-blocking IO to tame distributed systems ー How and why ChatWork uses async...
TanUkkii
JSON CRDT
JSON CRDT
TanUkkii
Akka Clusterの耐障害設計
Akka Clusterの耐障害設計
TanUkkii
WaveNet
WaveNet
TanUkkii
スケールするシステムにおけるエンティティの扱いと 分散ID生成
スケールするシステムにおけるエンティティの扱いと 分散ID生成
TanUkkii
Akka HTTP
Akka HTTP
TanUkkii
すべてのアクター プログラマーが知るべき 単一責務原則とは何か
すべてのアクター プログラマーが知るべき 単一責務原則とは何か
TanUkkii
ディープニューラルネット入門
ディープニューラルネット入門
TanUkkii
プログラミング言語のパラダイムシフト(ダイジェスト)ーScalaから見る関数型と並列性時代の幕開けー
プログラミング言語のパラダイムシフト(ダイジェスト)ーScalaから見る関数型と並列性時代の幕開けー
TanUkkii
プログラミング言語のパラダイムシフトーScalaから見る関数型と並列性時代の幕開けー
プログラミング言語のパラダイムシフトーScalaから見る関数型と並列性時代の幕開けー
TanUkkii
Scalaによる型安全なエラーハンドリング
Scalaによる型安全なエラーハンドリング
TanUkkii
More from TanUkkii
(12)
Distributed ID generator in ChatWork
Distributed ID generator in ChatWork
Non-blocking IO to tame distributed systems ー How and why ChatWork uses async...
Non-blocking IO to tame distributed systems ー How and why ChatWork uses async...
JSON CRDT
JSON CRDT
Akka Clusterの耐障害設計
Akka Clusterの耐障害設計
WaveNet
WaveNet
スケールするシステムにおけるエンティティの扱いと 分散ID生成
スケールするシステムにおけるエンティティの扱いと 分散ID生成
Akka HTTP
Akka HTTP
すべてのアクター プログラマーが知るべき 単一責務原則とは何か
すべてのアクター プログラマーが知るべき 単一責務原則とは何か
ディープニューラルネット入門
ディープニューラルネット入門
プログラミング言語のパラダイムシフト(ダイジェスト)ーScalaから見る関数型と並列性時代の幕開けー
プログラミング言語のパラダイムシフト(ダイジェスト)ーScalaから見る関数型と並列性時代の幕開けー
プログラミング言語のパラダイムシフトーScalaから見る関数型と並列性時代の幕開けー
プログラミング言語のパラダイムシフトーScalaから見る関数型と並列性時代の幕開けー
Scalaによる型安全なエラーハンドリング
Scalaによる型安全なエラーハンドリング
Recently uploaded
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
Recently uploaded
(9)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
これからのJavaScriptー関数型プログラミングとECMAScript6
1.
これからのJavaScript 関数型プログラミングとECMAScript 6
/46 1
2.
自己紹介 • 名前:安田裕介
• Trifortに今年4月入社の新卒1年生 • JavaScript, Scala, C++が好き • Webフロントエンジニアやってます • GitHubアカウント: TanUkkii007 この資料に出てくるサンプルコードはhttps://github.com/TanUkkii007/js_pitch_sample_codeにあります /46 2
3.
Webアプリケーション開発の 現状 /46
より大規模に • クライアントマシンのパフォーマンスの向上 • WebブラウザのAPIの充実 • ランタイムの強化 • SPAやMVCの導入 • JavaScriptのサーバーサイドへの進出 3
4.
スケーラブルで保守性の高いコードを JavaScriptで書く必要がある /46
4
5.
どうやって? • 短く書く
• 変更しない(させない) /46 5
6.
今日話す内容 /46 •
関数型プログラミング • 第一級オブジェクトとしての関数 • 不変性 • 副作用をなくす • 不変なデータ • ECMAScript 6 • const • 分割代入(デストラクチャリング) • 末尾呼び出し最適化 • for-ofループ 6
7.
関数型プログラミング スケーラブルで保守性の高いコードを構築する手 法として関数型プログラミングが注目されている
関数型のスタイルを言語レベルでサポートしたも のが関数型プログラミング言語 e.g. Lisp, Scheme, SML, Erlang, Haskell, OCaml, F#, Scala /46 7
8.
JavaScriptは関数型プログラミング言語 ではない しかし
関数型プログラミングの考え方は 大規模化するコードに立ち向かう際に 役に立つ /46 8
9.
JavaScriptとは • Javaのシンタックス
• Selfのプロトタイプ • Schemeの第一級関数オブジェクト ポータビリティに優れたダイナミックな言語 /46 9
10.
JavaScriptとは • Javaのシンタックス
• Selfのプロトタイプ • Schemeの第一級関数オブジェクト JavaScriptの先祖であるSchemeが 関数型プログラミング言語 =>JavaScriptでもある程度関数型プログラミングが可能 10 /46
11.
関数型プログラミングの 構成要素 •
第一級オブジェクトとしての関数 • イミュータビリティ(不変性) 11 /46
12.
• 第一級オブジェクトとしての関数 •
イミュータビリティ(不変性) 12 /46
13.
第一級オブジェクトとしての 関数とは オブジェクトとしてのすべての能力をもつ関数である
13 /46
14.
オブジェクト(値)は 1 //変数に代入できる!
2 var one = 1;! 3 //関数からの返り値として返すことができる! 4 function getOne() {! 5 return 1;! 6 }! 7 //関数の引数として渡すことができる! 8 function identity(num) {! 9 return num;! 10 }! 11 //意味はないが値が書けるところにはどこにでも書ける! 12 1;! 13 "1";! 14 //メンバーとしてメソッドをもつ! 15 "1".toString();! 16 //メンバーとしてプロパティをもつ! 17 "1".length;! 14 /46
15.
関数オブジェクトも同様 1 //変数に関数を代入する!
2 var func = function() {};! 3 //関数からの返り値として関数を返す! 4 function emptyFunc() {! 5 return function() {};! 6 }! 7 ///関数の引数として関数を渡す! 8 function result(f) {! 9 return typeof f === 'function' ? f() : f; ! 10 }! 11 //意味はないが値が書けるところにはどこにでも書ける! 12 (function(){});! 13 func;! 14 //関数がメンバーとしてメソッドをもつ! 15 (function(){}).apply(null, []);! 16 //関数がメンバーとしてプロパティをもつ! 17 (function(){}).length;! 15 /46
16.
関数オブジェクトを用いれば 短いコードで柔軟な処理が可能だ Array.prototype.reduceの例
*配列の要素を集約し1つの値にする reduce(callback(prev, next, index, array){}, initial) 16 /46
17.
1 //合計! 2
[0,1,2,3,4,5].reduce(function(prev, current) {! 3 return prev + current;! 4 });! 5 // > 15! 6 //平均! 7 [0,1,2,3,4,5].reduce(function(prev, current, index, array) {! 8 return prev + current/array.length;! 9 });! 10 // > 2.5! 11 //最大値! 12 [0,1,2,3,4,5].reduce(function(prev, current, index, array) {! 13 return prev < current ? current : prev;! 14 });! 15 // > 5! 16 //配列の平坦化! 17 [! 18 [1,2,3,4,5],! 19 [6,7,8,9,10],! 20 [11,12,13,14,15],! 21 [16,17,18,19,20],! 22 ].reduce(function(prev, current) {! 23 return prev.concat(current);! 24 }, []);! 25 // > [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, /46 17, 18, 19, 20]! 17
18.
• 第一級オブジェクトとしての関数 •
イミュータビリティ(不変性) 18 /46
19.
JavaScriptはSchemeから 関数オブジェクトを受け継いだが、 イミュータビリティ(不変性)は受け継がな
かった /46 ! JavaScriptは ダイナミックであることを選んだ 19
20.
JavaScriptは言語として イミュータビリティを提供しない。 なのでイミュータビリティを実現
したければ、 プログラマーの手によって なしとげなければならない 20 /46
21.
副作用 副作用とは プログラミングにおける副作用(ふくさよう)とは、ある機能が
コンピュータの(論理的な)状態を変化させ、それ以降で得られる結 果に影響を与えることをいう。 wikipedia 関数型プログラミングでは副作用を徹底的に排除する 21 /46
22.
/46 副作用をもつ 関数の例
副作用がある関数 は有意な値を返さ ない特徴がある 1 // 1/2! 2 var half = {! 3 numer: 1,! 4 denom: 2! 5 };! 6 console.log(half.numer + '/' + half.denom);! 7 // > 1/2! 8 //halfに1を足す! 9 function plusOne() {! 10 half.numer += half.denom;! 11 }! 12 //rationalをnumで割る! 13 function devide(rational, num) {! 14 rational.denom *= num;! 15 }! 16 plusOne();! 17 // > undefined! 18 console.log(half.numer + '/' + half.denom);! 19 // > 3/2! 20 devide(half, 2);! 21 // > undefined! 22 console.log(half.numer + '/' + half.denom);! 23 // > 3/4! 22
23.
副作用をもたない関数の例 • 外部のデータや状態に依存しない
• 外部のデータや状態を変更しない • 引数をもとにただマップ(写像)するだけ 23 /46
24.
1 //分数r1とr2を足す関数! 2
function plus(r1, r2) {! 3 return {! 4 numer: r1.numer*r2.denom + r2.numer* r1.denom,! 5 denom: r1.denom*r2.denom! 6 };! 7 }! 8 // 1/2! 9 var half = {! 10 numer: 1,! 11 denom: 2! 12 };! 13 // 1/4! 14 var quarter = {! 15 numer: 1,! 16 denom: 4! 17 };! 18 // 1/2 + 1/4! 19 var threeOverFour = plus(half, quarter);! 20 ! 21 console.log(threeOverFour.numer + '/' + threeOverFour.denom);! 22 // > 6/8! 23 console.log(half.numer + '/' + half.denom);! 24 // > 1/2! 25 console.log(quarter.numer + '/' + quarter.denom);! 26 // > 1/4 24 /46
25.
副作用をもたない関数の利点 /46 •
汎用性が高い • 安全である • 結果を予測できる 25
26.
おなじみの 副作用をもつ関数 1
// DOM API! 2 image.setAttribute('href', 'image.png');! 3 element.appendChild(child);! 4 element.removeChild(child);! 5 element.classList.add('someclass');! 6 element.classList.remove('someclass');! 7 ! 8 // IO! 9 console.log('side effect'); DOM APIやコンソールへの出力は副作用 副作用はGUIや入出力にはなくてはならないもの 26 /46
27.
関数型プログラミングの手法はModelとController /46 M
V C で新価を発揮する 27
28.
イミュータブル(不変)な データをつくる 不変な分数を作りたい
/46 ! ! とりあえずオブジェクト指向の考え 方に基づきカプセル化する 28
29.
1 var Rational
= function(numer, denom) {! 2 this.numer = numer || 0; this.denom = denom || 1;! 3 };! 4 Rational.prototype = {! 5 toString: function() {! 6 return this.numer + '/' + this.denom;! 7 },! 8 ensure: function(r) {! 9 return (r instanceof Rational)? r: new Rational(r, 1);! 10 },! 11 plus: function(rational) {! 12 var r = this.ensure(rational);! 13 this.numer = this.numer*r.denom + r.numer*this.denom;! 14 this.denom *= r.denom; return this;! 15 },! 16 minus: function(rational) {! 17 var r = this.ensure(rational);! 18 this.numer = this.numer*r.denom - r.numer*this.denom;! 19 this.denom *= r.denom; return this;! 20 },! 21 multiply: function(rational) {! 22 var r = this.ensure(rational);! 23 this.numer *= r.numer;! 24 this.denom *= r.denom; return this;! 25 },! 26 divide: function(rational) {! 27 var r = this.ensure(rational);! 28 this.numer *= r.denom;! 29 this.denom *= r.numer; return this;! 30 }! 31 }; 29 /46 • 自身の状態を変更することに よって分数の計算を行う • 自分自身を返す
30.
1 // 1/2!
2 var half = new Rational(1,2);! 3 // 1/2! 4 var threeOverTwo = half.plus(1);! 5 ! 6 half === threeOverTwo;! 7 // > true! 8 console.log(half);! 9 // > 3/2! 10 console.log(threeOverTwo);! 11 // > 3/2! 12 ! 13 // 3/2 * 2/3! 14 threeOverTwo.multiply(new Rational(2,3));! 15 // > 6/6! データの状態はメソッドの呼び出しごとに変化していく 30 /46
31.
イミュータブルにする 31 /46
32.
1 var Rational
= function(numer, denom) {! 2 this.numer = numer || 0; this.denom = denom || 1;! 3 };! 4 Rational.prototype = {! 5 toString: function() {! 6 return this.numer + '/' + this.denom;! 7 },! 8 ensure: function(r) {! 9 return (r instanceof Rational)? r: new Rational(r, 1);! 10 },! 11 plus: function(rational) {! 12 var r = this.ensure(rational);! 13 var numer = this.numer*r.denom + r.numer*this.denom;! 14 var denom = this.denom * r.denom;! 15 return new Rational(numer, denom);! 16 },! 17 minus: function(rational) {! 18 var r = this.ensure(rational);! 19 var numer = this.numer*r.denom - r.numer*this.denom;! 20 var denom = this.denom * r.denom;! 21 return new Rational(numer, denom);! 22 },! 23 multiply: function(rational) {! 24 var r = this.ensure(rational);! 25 var numer = this.numer * r.numer;! 26 var denom = this.denom * r.denom;! 27 return new Rational(numer, denom);! 28 },! 29 divide: function(rational) { /* omitted */ }! 30 };! 32 /46 • 自身の状態を変更しない • 新しいオブジェクトを返す
33.
1 // 1/2!
2 var half = new Rational(1,2);! 3 ! 4 // 1/2 + 1! 5 var threeOverTwo = half.plus(1);! 6 // > 3/2! 7 // halfとthreeOverTwoは違うオブジェクト! 8 half === threeOverTwo;! 9 // > false! 10 ! 11 console.log(half);! 12 // > 1/2! 13 console.log(threeOverTwo);! 14 // > 3/2! 15 ! 16 3/2 * 2/3! 17 threeOverTwo.multiply(new Rational(2,3));! 18 // > 6/6! 19 ! 20 console.log(threeOverTwo);! 21 // > 3/2! /46 いずれも メソッド呼び出 しの後に 変化していない 33
34.
ES6で導入される 便利な機能 短く、より安全に書けるようになります
• const • 分割代入(デストラクチャリング) • 末尾呼び出し最適化 • for-ofループ /46 すべてFF33で動作 34
35.
const • constキーワードを使うことで、再代入不可能な
定数を宣言できる 35 /46
36.
1 const foo
= 'foo';! 2 //再代入しても値は変わらない! 3 foo = 'bar';! 4 console.log(foo);! 5 // > foo! 6 ! 7 const cobj = {foo: 'foo'};! 8 //再代入しても値は変わらない! 9 cobj = {};! 10 console.log(cobj.foo);! 11 // > foo! 12 //プロパティは変更できる! 13 cobj.foo = 'bar';! 14 console.log(cobj.foo);! 15 // > bar! 16 ! 17 Object.freeze(cobj);! 18 //Writable is false! 19 cobj.foo = 'baz';! 20 console.log(cobj.foo);! 21 // > 'foo'! 22 //Extensible is false! 23 cobj.bar = 'bar';! 24 console.log(cobj.bar);! 25 // > undefined 36 /46 • const指定された変数は 再代入できない • const指定のオブジェクトでは参照 先は変わらないが、プロパティは変 更できる • プロパティの変更を防ぐには Object.freeze()を慎重に使う
37.
分割代入(デストラクチャリング) • 配列やオブジェクトをパターンで分解し、値を
取り出す • 代入文を逆にしたような構文 • 元の配列やオブジェクトを変更しない • 代入の回数を減らせる 37 /46
38.
1 //配列パターンによる分割! 2
var [a,b] = [1,2];! 3 console.log(a, b);! 4 // > 1 2! 5 ! 6 //従来の値の交換! 7 var tmp = a;! 8 a = b;! 9 b = tmp;! 10 //分割代入による値の交換! 11 [b, a] = [a,b];! 12 ! 13 //オブジェクトパターンによる分割! 14 var half = {numer: 1, denom: 2};! 15 var {numer, a, denom: b} = half;! 16 console.log(a, b);! 17 // > 1 2! 18 ! 19 //ネストも可能! 20 var {name: name, family: {sister: sister}} =! {name: 'John Doe', family: {sister: 1}}! 21 console.log(name, sister);! 22 // "John Doe" 1 38 /46
39.
末尾呼び出し最適化 • 繰り返し計算では関数の再帰の方がループより
も短く書ける • 関数内の代入文という副作用を排除できる 39 /46
40.
例えば階乗の計算を 再帰とループの2通りで書いてみると 1
// 再帰による階乗計算! 2 function factorial1(n) {! 3 if (n === 0)! 4 return 1;! 5 return n * factorial1(n - 1);! 6 }! 7 ! 8 //ループによる階乗計算! 9 function factorial2(n) {! 10 var result = 1;! 11 for (var i = 1; i <= n; ++i) {! 12 result *= i;! 13 }! 14 return result;! 15 }! 16 ! 17 // 5 * 4 * 3 * 2 * 1! 18 factorial1(5);! 19 // > 120! 40/46
41.
再帰の問題 • 関数呼び出しのオーバーヘッド
• スタックオーバーフローの危険性 ES6で導入される末尾呼び出し最適化 により末尾再帰に限り これらは解決される 41 /46
42.
for-ofループ • オブジェクトの列挙可能なプロパティの名前を列挙する。値ではない。
• 配列のインデックスを文字列にして列挙する。 • prototype中の列挙可能なプロパティも対象にする • 順番が未定義 • カスタマイズ不能 /46 for-inループの問題 for-ofループは値を列挙し、カスタマイズ可能である 42
43.
1 //for-inループはキーを列挙する! 2
for (var i in [1,2,3,4,5])! 3 console.log(i);! 4 // > "0" "1" "2" "3" "4"! 5 ! 6 //for-inループは[[Enumerable]]なprototypeプロパティを列挙する! 7 var F = function() {};! 8 F.prototype = {enumerable: 'enumerable'};! 9 var obj = new F();! 10 for (var key in obj)! 11 console.log(obj[key], obj.hasOwnProperty(key));! 12 // > enumerable false! 13 ! 14 //独自のデータ構造はfor-inでループできない! 15 var LinkedList = function(value, next) {! 16 this.value = value;! 17 this.next = next || null;! 18 };! 19 var list = ! new LinkedList(1, new LinkedList(2, new LinkedList(3)));! 20 for (var curr = list; curr !== null; curr = curr.next)! 21 console.log(curr.value);! 22 // > 1 2 3! 開始、終了、次のデータを知っている必要がある 43/46
44.
1 //for-ofループは値を列挙する 2
for (var i of [1,2,3,4,5]) 3 console.log(i); 4 // > 1 2 3 4 5 5 //@@iteratorを定義すれば、独自のデータ構造もループ可能 6 var LinkedList = function(value, next) { 7 this.value = value; 8 this.next = (next === undefined)? new LinkedList(null, null) /46 : next; 9 }; 10 LinkedList.prototype = { 11 '@@iterator': function() { 12 return { 13 current: this, 14 next: function() { 15 var prev = this.current; 16 this.current = prev.next; 17 return {value: prev.value, done: prev.value === null}; 18 } 19 }; 20 } 21 }; 22 var list = new LinkedList(1, new LinkedList(2, new LinkedList(3))); 23 //@@iteratorの暗黙の呼び出しがおきる 24 for (var value of list) 25 console.log(value); 26 // > 1 2 3 44
45.
@@iteratorの定義が長いって? ジェネレーターつかえば簡単に書けるよ 1
var LinkedList = function(value, next) {! 2 this.value = value;! 3 this.next = (next === undefined)? ! new LinkedList(null, null) : next;! 4 };! 5 LinkedList.prototype = {! 6 //! 7 '@@iterator': function*() {! 8 for (var curr = list; curr.next !== null; curr = /46 curr.next) {! 9 yield curr.value;! 10 }! 11 }! 12 };! 13 var list = ! new LinkedList(1, new LinkedList(2, new LinkedList(3)));! 14 //! 15 for (var value of list)! 16 console.log(value);! 17 // > 1 2 3 45
46.
まとめ • JavaScriptの関数オブジェクトは強力
• 関数、データは副作用をもたないように設計す べき • JavaScriptで不変性を強制することは難しい =>プログラマ自身が努力するしかない • ES6の登場をお楽しみに 46 /46
Download now