SlideShare uma empresa Scribd logo
1 de 42
JavaScript で味わう!
関数型プログラミングのメリット!!
for {
Type <- Person
Name <- Keigo Magami
Github <- k5jp1015
Job <- Server Side Engineer
Scala Experience <- 5 Month
Hobby <- Training(筋トレのことです♪)
} yeild Self Introduction(自己紹介)
※上はScalaにおける糖衣構文をパクりましたw
話す内容
→JavaScript(ライブラリ使わないVer)で
関数型プログラミングのメリットを話します!
ReactもAngularも出てこない世界(゚д゚)!
対象にならない人
→ScalaとかHaskellとかelmとかpurescriptとか詳しい人
→名言的な先人のありがたいお言葉がとか嫌いな人
なぜ、関数型プログラミングなのか
→ブームだからwww
→私がScalaが好きだからwww
→もちろん、メリットが有るから
→どんな?
→これから説明します〜
• 関数型プログラミングで担保できるメリットは?
1.コードのモジュール性が高まる
2.コードのテストが容易になる
3.コードの正しさを証明できる
• 1.コードのモジュール性が高まる
→抽象度が高く、単一責任性が担保できるソースを書く
ことができる
単一責任の原則とは、
「変更する理由が同じものは集める、
変更する理由が違うものは分ける。」
→1つのサブシステムやモジュール、クラス、関数などに、
変更する理由が2つ以上あるようではいけない
let cityInfo ="; // 1.
if(existKey){ // 2.
cityInfo =
countryData[key]; // 3.
}else{
cityInfo = “NoData" ; // 4.
}
左のソースがやっていること
1.変数「cityInfo」を定義する
2.引数の条件判定をする
3.条件が正ならcountryDataからkeyに対応する
valueをcityInfoに設定
4.条件が負なら”NoData”なる文字列をcityInfoに設定
役割が4つもある(単一責任の原則に反している)
これ役割多くないですか?
変更する理由が1つ以上有る!
→なので、個別にモジュール化!!
1.コードのモジュール性が高まる
→具体的には
• それぞれの役割をモジュール化
1. 変数「cityInfo」を定義する
←省略可能
2. 引数の条件判定をする
←モジュール化
3. 条件が正ならcountryDataからkeyに対応するvalueをcityInfoに
設定
←モジュール化
4. 条件が負なら”NoData”なる文字列をcityInfoに設定
←モジュール化
引数の条件判定をするを関数としてモジュール化
let abstractFuncIfElse = (funcOnTrue,funcOnFalse) => {
return(flg) => {
if(flg){
return funcOnTrue;
}else{
return funcOnFalse;
}
}
};
countryDataからkeyに対応するvalueを取得を関数としてモ
ジュール化
let getValue = (key) => {
return(obj) =>{
return obj[key];
};
};
条件が負なら”NoData”なる文字列をcityInfoに設定を関数と
してモジュール化
const setNonData = “NoData";
作成したモジュールを組み合わせる
let getCityInfo = (flg) => {
return(key,obj) => {
return abstractFuncIfElse(getValue(key)(obj),setNonData)(flg);
}
};
変数「existKey」の条件判定をする
条件が正ならcountryDataからkeyに対応するvalueを取得
条件が負なら”NoData”なる文字列を取得
単一責任の原則を担保している3つのモジュールを組み合わせることで、
要件を新たな関数を作ることが出来た!
abstractFuncIfElse setNoData
getCityInfo
getValue
できたモジュールを使ってみよう!
let countryData = {
japan: "tokyo,37843",
china: "beijing,23416",
usa: "new york,20630”
};
getCityInfo(true)("japan",countryData);
→”tokyo,37843"が出力されるよ!
一度作成したモジュールはもちろん再利用可能!
// 引数が2の倍数かどうかを判定
let isEven = (number) =>
{ return number % 2 === 0};
let checkEven = (num) => {
return abstractFuncIfElse('◯','✕')(isEven(num));
};
少々の処理でもモジュール化することができる!
モジュール化することで再利用がしやすくなる!!
複雑な処理のメリットはいうに及ばす!!!
1.コードのモジュール性が高まる
→終わり
2.コードのテストが容易になる
→次
2.コードのテストが容易になる
→大きなもの(条件分岐)が多いものをテストしようとすると
大変。
しかし、単一責任の原則が守られているモジュールをテスト
するのは簡単。
let abstractFuncIfElse = (funcOnTrue,funcOnFalse) => {
return(flg) => {
if(flg){
return funcOnTrue;
}else{
return funcOnFalse;
}
}
};
let isEven = (number) => { return number % 2 === 0};
let checkEven = (num) => {
return abstractFuncIfElse('◯','✕')(isEven(num));
};
expect(
abstractFuncIfElse('OK','NG')(true)
).to.eql(
'OK'
);
expect(
abstractFuncIfElse('OK','NG')(false)
).to.eql(
‘NG'
);
expect(
// 2の倍数かどうかを判定
isEven(4)
).to.eql(
true
);
expect(
isEven(5)
).to.eql(
false
);
expect(
checkEven(4)
).to.eql(
'◯'
);
expect(
checkEven(5)
).to.eql(
'×'
);
abstractFuncIfElse isEven
checkEven
funcA funcZ
hugeFunction
・・・・・・・・
個々のモジュールをテストすることで、巨大なモジュールも
複雑な条件分岐が少なくテストができる!
2.コードのテストが容易になる
→終わり
3.コードの正しさを証明できる
→次
3.コードの正しさを証明できる
→副作用が存在せず、参照透過性を担保されている関数型の
ソースは、その動作の正しさを証明される
→上記を守っていれば、安心して使える。
保守らくちん♪
副作用とは、「目的」以外の操作・影響のことをいいます。
※「副作用」は意味の捉え方が広いので、今回は上記の意味で用います。
副作用が存在するケース
let data = {1:’js’,2:’scala’,3:’java’};
// どこに副作用があるでしょうか?
let getValue = (key) => {
let returnValue = data[key];
delete data[key];
return returnValue;
};
副作用が存在するケース
let data = {1:’js’,2:’scala’,3:’java’};
// 答え合わせ
let getValue = (key) => {
let returnValue = data[key];
delete data[key]; // ←値の取得以外の処理をしている
return returnValue;
};
参照透過性とは
計算機言語の概念の一種である。 ある式が参照透過である
とは、その式をその式の値に置き換えてもプログラムの振る
舞いが変わらない(言い換えれば、同じ入力に対して同じ作
用と同じ出力とを持つプログラムになる)ことを言う。
※Wikipediaより
参照透過性が担保されていないケース
// 引数に渡した年が西暦何年であるかを取得
let getYearAfter = (yearSpecified) => {
return new Date().getFullYear() + yearSpecified;
};
一見問題ないように見えるが、「同じ入力に対して同じ作用
と同じ出力とを持つプログラム」とは言えない。
参照透過性が担保されていないケース
// 引数に渡した年が西暦何年であるかを取得
let getYearAfter = (yearSpecified) => {
return new Date().getFullYear() + yearSpecified;
};
なぜなら、プログラムを動作させる年によって、
取得できる値が違う😨
理想的なソース
let addOneValue = (number) => {
return number + 1;
};
// f(x) = x + 1
副作用が存在せず、参照透過性を担保されている
関数型のソース
注意点
プログラムの外に対して行う処理、例えばファイル入出力やDB操作
は厳密に言うと、副作用も有る上に、参照透過性も担保されない処理
となる。
なので、実際に実装する際には、
「副作用が存在せず、参照透過性が担保されているモジュール」と
「それ以外のモジュール」をしっかり分けるように設計し、
実装することが大切
副作用が存在せず、参照透過性を担保されている
→「『目的』以外の操作・影響」がなく、
「同じ入力に対して同じ作用と同じ出力とを持つ」
プログラムである!
→作成者以外にも処理の正しさが伝わるので、安心!
保守らくちん♪(2回目)
3.コードの正しさを証明できる
→終わり
まとめ
→次
まとめ
・JavaScriptでも関数型プログラミングができたよ!
・JavaScriptでも、というよりJavaScriptだからこそ、
関数型プログラミング言語のメリットを活かすことができる!!
・小さなことから関数型でモジュールを作ってみませんか!!!
Small is beautiful
From The UNIX philosophy
• 参考書籍
立川察理 著
「JavaScriptを使って学ぶ関数型プログラミングの基礎」
ご清聴、ありがとうございました!

Mais conteúdo relacionado

Mais procurados

Google Glassでできること XE12版 最新開発情報 Mirror API & GDK
Google Glassでできること XE12版 最新開発情報 Mirror API & GDKGoogle Glassでできること XE12版 最新開発情報 Mirror API & GDK
Google Glassでできること XE12版 最新開発情報 Mirror API & GDK
Masahiro Wakame
 
第1回名古屋Android勉強会Lt用資料
第1回名古屋Android勉強会Lt用資料第1回名古屋Android勉強会Lt用資料
第1回名古屋Android勉強会Lt用資料
tantack
 
2013 08-19 jjug
2013 08-19 jjug2013 08-19 jjug
2013 08-19 jjug
sk44_
 

Mais procurados (19)

PHP Application E2E with Capybara
PHP Application E2E with CapybaraPHP Application E2E with Capybara
PHP Application E2E with Capybara
 
おっさんES6/ES2015,React.jsを学ぶ
おっさんES6/ES2015,React.jsを学ぶおっさんES6/ES2015,React.jsを学ぶ
おっさんES6/ES2015,React.jsを学ぶ
 
jQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScriptjQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScript
 
Google Glassでできること XE12版 最新開発情報 Mirror API & GDK
Google Glassでできること XE12版 最新開発情報 Mirror API & GDKGoogle Glassでできること XE12版 最新開発情報 Mirror API & GDK
Google Glassでできること XE12版 最新開発情報 Mirror API & GDK
 
TypeScriptは明日から使うべき
TypeScriptは明日から使うべきTypeScriptは明日から使うべき
TypeScriptは明日から使うべき
 
LT#8 乗るしかないこのECMA Script 2015に
LT#8 乗るしかないこのECMA Script 2015にLT#8 乗るしかないこのECMA Script 2015に
LT#8 乗るしかないこのECMA Script 2015に
 
Web開発の 今までとこれから
Web開発の 今までとこれからWeb開発の 今までとこれから
Web開発の 今までとこれから
 
進撃のSbt
進撃のSbt進撃のSbt
進撃のSbt
 
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
 
第1回名古屋Android勉強会Lt用資料
第1回名古屋Android勉強会Lt用資料第1回名古屋Android勉強会Lt用資料
第1回名古屋Android勉強会Lt用資料
 
2013 08-19 jjug
2013 08-19 jjug2013 08-19 jjug
2013 08-19 jjug
 
angular1脳で見るangular2
angular1脳で見るangular2angular1脳で見るangular2
angular1脳で見るangular2
 
Rails templateで開発の初速を上げよう
Rails templateで開発の初速を上げようRails templateで開発の初速を上げよう
Rails templateで開発の初速を上げよう
 
Javaプログラミング入門【第1回】
Javaプログラミング入門【第1回】Javaプログラミング入門【第1回】
Javaプログラミング入門【第1回】
 
Scala入門
Scala入門Scala入門
Scala入門
 
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
 
Arachne Unweaved (JP)
Arachne Unweaved (JP)Arachne Unweaved (JP)
Arachne Unweaved (JP)
 
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
 

Semelhante a JavaScriptで味わう! 関数型プログラミングのメリット!!

Webプログラマのための Scala 入門勉強会 @ 渋谷 12/7
Webプログラマのための Scala 入門勉強会 @ 渋谷 12/7Webプログラマのための Scala 入門勉強会 @ 渋谷 12/7
Webプログラマのための Scala 入門勉強会 @ 渋谷 12/7
Hitoshi Asai
 
2010/11/2 WebプログラマのためのScala入門勉強会@渋谷
2010/11/2 WebプログラマのためのScala入門勉強会@渋谷2010/11/2 WebプログラマのためのScala入門勉強会@渋谷
2010/11/2 WebプログラマのためのScala入門勉強会@渋谷
wpscala
 
フロントエンド開発入門(React).pdf
フロントエンド開発入門(React).pdfフロントエンド開発入門(React).pdf
フロントエンド開発入門(React).pdf
KSato2
 

Semelhante a JavaScriptで味わう! 関数型プログラミングのメリット!! (20)

GraphQL入門+診断観点
GraphQL入門+診断観点GraphQL入門+診断観点
GraphQL入門+診断観点
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 
ビッグじゃなくても使えるSpark Streaming
ビッグじゃなくても使えるSpark Streamingビッグじゃなくても使えるSpark Streaming
ビッグじゃなくても使えるSpark Streaming
 
実戦Scala
実戦Scala実戦Scala
実戦Scala
 
Webプログラマのための Scala 入門勉強会 @ 渋谷 12/7
Webプログラマのための Scala 入門勉強会 @ 渋谷 12/7Webプログラマのための Scala 入門勉強会 @ 渋谷 12/7
Webプログラマのための Scala 入門勉強会 @ 渋谷 12/7
 
2010/11/2 WebプログラマのためのScala入門勉強会@渋谷
2010/11/2 WebプログラマのためのScala入門勉強会@渋谷2010/11/2 WebプログラマのためのScala入門勉強会@渋谷
2010/11/2 WebプログラマのためのScala入門勉強会@渋谷
 
こわくないScala
こわくないScalaこわくないScala
こわくないScala
 
Dark vol4 for_slideshare
Dark vol4 for_slideshareDark vol4 for_slideshare
Dark vol4 for_slideshare
 
プロダクトにおけるScala
プロダクトにおけるScalaプロダクトにおけるScala
プロダクトにおけるScala
 
RakSulのInternal API開発で gRPCを導入した話
RakSulのInternal API開発で gRPCを導入した話RakSulのInternal API開発で gRPCを導入した話
RakSulのInternal API開発で gRPCを導入した話
 
こわくないScala
こわくないScalaこわくないScala
こわくないScala
 
第二回tento.tech定例会
第二回tento.tech定例会第二回tento.tech定例会
第二回tento.tech定例会
 
フロントエンド開発入門(React).pdf
フロントエンド開発入門(React).pdfフロントエンド開発入門(React).pdf
フロントエンド開発入門(React).pdf
 
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツールこんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
 
SwaggerとAPIのデザイン
SwaggerとAPIのデザインSwaggerとAPIのデザイン
SwaggerとAPIのデザイン
 
Scala is-unscared
Scala is-unscaredScala is-unscared
Scala is-unscared
 
Web技術勉強会第1回目
Web技術勉強会第1回目Web技術勉強会第1回目
Web技術勉強会第1回目
 
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
 
ES6で始めるNode.js / Starting NodeJS Development with ES6
ES6で始めるNode.js / Starting NodeJS Development with ES6ES6で始めるNode.js / Starting NodeJS Development with ES6
ES6で始めるNode.js / Starting NodeJS Development with ES6
 
20150207 何故scalaを選んだのか
20150207 何故scalaを選んだのか20150207 何故scalaを選んだのか
20150207 何故scalaを選んだのか
 

JavaScriptで味わう! 関数型プログラミングのメリット!!