We Are JavaScripters! @9th 資料

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

2. for {
Type <- Person
Name <- Keigo Magami
Github <- k5jp1015
Job <- Server Side Engineer
Scala Experience <- 5 Month
Hobby <- Training(筋トレのことです♪)
} yeild Self Introduction(自己紹介)
※上はScalaにおける糖衣構文をパクりましたｗ

3. 話す内容
→JavaScript(ライブラリ使わないVer)で
関数型プログラミングのメリットを話します！
ReactもAngularも出てこない世界(ﾟдﾟ)！

4. 対象にならない人
→ScalaとかHaskellとかelmとかpurescriptとか詳しい人
→名言的な先人のありがたいお言葉がとか嫌いな人

5. なぜ、関数型プログラミングなのか
→ブームだからｗｗｗ
→私がScalaが好きだからｗｗｗ
→もちろん、メリットが有るから
→どんな？
→これから説明します〜

6. • 関数型プログラミングで担保できるメリットは？
１．コードのモジュール性が高まる
２．コードのテストが容易になる
３．コードの正しさを証明できる

7. • １．コードのモジュール性が高まる
→抽象度が高く、単一責任性が担保できるソースを書く
ことができる

8. 単一責任の原則とは、
「変更する理由が同じものは集める、
変更する理由が違うものは分ける。」
→1つのサブシステムやモジュール、クラス、関数などに、
変更する理由が2つ以上あるようではいけない

9. 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に設定
役割が４つもある(単一責任の原則に反している)
これ役割多くないですか？
変更する理由が１つ以上有る！
→なので、個別にモジュール化！！
１．コードのモジュール性が高まる
→具体的には

10. • それぞれの役割をモジュール化
1. 変数「cityInfo」を定義する
←省略可能
2. 引数の条件判定をする
←モジュール化
3. 条件が正ならcountryDataからkeyに対応するvalueをcityInfoに
設定
←モジュール化
4. 条件が負なら”NoData”なる文字列をcityInfoに設定
←モジュール化

11. 引数の条件判定をするを関数としてモジュール化
let abstractFuncIfElse = (funcOnTrue,funcOnFalse) => {
return(flg) => {
if(flg){
return funcOnTrue;
}else{
return funcOnFalse;
}
}
};

12. countryDataからkeyに対応するvalueを取得を関数としてモ
ジュール化
let getValue = (key) => {
return(obj) =>{
return obj[key];
};
};

13. 条件が負なら”NoData”なる文字列をcityInfoに設定を関数と
してモジュール化
const setNonData = “NoData";

14. 作成したモジュールを組み合わせる
let getCityInfo = (flg) => {
return(key,obj) => {
return abstractFuncIfElse(getValue(key)(obj),setNonData)(flg);
}
};
変数「existKey」の条件判定をする
条件が正ならcountryDataからkeyに対応するvalueを取得
条件が負なら”NoData”なる文字列を取得
単一責任の原則を担保している３つのモジュールを組み合わせることで、
要件を新たな関数を作ることが出来た！

15. abstractFuncIfElse setNoData
getCityInfo
getValue

16. できたモジュールを使ってみよう！
let countryData = {
japan: "tokyo,37843",
china: "beijing,23416",
usa: "new york,20630”
};
getCityInfo(true)("japan",countryData);
→”tokyo,37843"が出力されるよ！

17. 一度作成したモジュールはもちろん再利用可能！
// 引数が２の倍数かどうかを判定
let isEven = (number) =>
{ return number % 2 === 0};
let checkEven = (num) => {
return abstractFuncIfElse('◯','✕')(isEven(num));
};

18. 少々の処理でもモジュール化することができる！
モジュール化することで再利用がしやすくなる!!
複雑な処理のメリットはいうに及ばす!!!

19. １．コードのモジュール性が高まる
→終わり
２．コードのテストが容易になる
→次

20. ２．コードのテストが容易になる
→大きなもの(条件分岐)が多いものをテストしようとすると
大変。
しかし、単一責任の原則が守られているモジュールをテスト
するのは簡単。

21. 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));
};

22. expect(
abstractFuncIfElse('OK','NG')(true)
).to.eql(
'OK'
);
expect(
abstractFuncIfElse('OK','NG')(false)
).to.eql(
‘NG'
);

23. expect(
// 2の倍数かどうかを判定
isEven(4)
).to.eql(
true
);
expect(
isEven(5)
).to.eql(
false
);

24. expect(
checkEven(4)
).to.eql(
'◯'
);
expect(
checkEven(5)
).to.eql(
'×'
);

25. abstractFuncIfElse isEven
checkEven

26. funcA funcZ
hugeFunction
・・・・・・・・
個々のモジュールをテストすることで、巨大なモジュールも
複雑な条件分岐が少なくテストができる！

27. ２．コードのテストが容易になる
→終わり
３．コードの正しさを証明できる
→次

28. ３．コードの正しさを証明できる
→副作用が存在せず、参照透過性を担保されている関数型の
ソースは、その動作の正しさを証明される
→上記を守っていれば、安心して使える。
保守らくちん♪

29. 副作用とは、「目的」以外の操作・影響のことをいいます。
※「副作用」は意味の捉え方が広いので、今回は上記の意味で用います。

30. 副作用が存在するケース
let data = {1:’js’,2:’scala’,3:’java’};
// どこに副作用があるでしょうか？
let getValue = (key) => {
let returnValue = data[key];
delete data[key];
return returnValue;
};

31. 副作用が存在するケース
let data = {1:’js’,2:’scala’,3:’java’};
// 答え合わせ
let getValue = (key) => {
let returnValue = data[key];
delete data[key]; // ←値の取得以外の処理をしている
return returnValue;
};

32. 参照透過性とは
計算機言語の概念の一種である。 ある式が参照透過である
とは、その式をその式の値に置き換えてもプログラムの振る
舞いが変わらない(言い換えれば、同じ入力に対して同じ作
用と同じ出力とを持つプログラムになる)ことを言う。
※Wikipediaより

33. 参照透過性が担保されていないケース
// 引数に渡した年が西暦何年であるかを取得
let getYearAfter = (yearSpecified) => {
return new Date().getFullYear() + yearSpecified;
};
一見問題ないように見えるが、「同じ入力に対して同じ作用
と同じ出力とを持つプログラム」とは言えない。

34. 参照透過性が担保されていないケース
// 引数に渡した年が西暦何年であるかを取得
let getYearAfter = (yearSpecified) => {
return new Date().getFullYear() + yearSpecified;
};
なぜなら、プログラムを動作させる年によって、
取得できる値が違う😨

35. 理想的なソース
let addOneValue = (number) => {
return number + 1;
};
// f(x) = x + 1
副作用が存在せず、参照透過性を担保されている
関数型のソース

36. 注意点
プログラムの外に対して行う処理、例えばファイル入出力やDB操作
は厳密に言うと、副作用も有る上に、参照透過性も担保されない処理
となる。
なので、実際に実装する際には、
「副作用が存在せず、参照透過性が担保されているモジュール」と
「それ以外のモジュール」をしっかり分けるように設計し、
実装することが大切

37. 副作用が存在せず、参照透過性を担保されている
→「『目的』以外の操作・影響」がなく、
「同じ入力に対して同じ作用と同じ出力とを持つ」
プログラムである！
→作成者以外にも処理の正しさが伝わるので、安心！
保守らくちん♪(2回目)

38. ３．コードの正しさを証明できる
→終わり
まとめ
→次

39. まとめ
・JavaScriptでも関数型プログラミングができたよ!
・JavaScriptでも、というよりJavaScriptだからこそ、
関数型プログラミング言語のメリットを活かすことができる!!
・小さなことから関数型でモジュールを作ってみませんか!!!

40. Small is beautiful
From The UNIX philosophy

41. • 参考書籍
立川察理 著
「JavaScriptを使って学ぶ関数型プログラミングの基礎」

42. ご清聴、ありがとうございました！