点数
87点
感想
Reactの機能が一通り解説されていた。
文章がわかりづらいところが多少あるが、全体的には丁寧に説明が書かれていた。
本書の内容のうち、実際の開発には不要なものもいくつかあると思うので、必要なものを選定することが大事になってくると思う。
関数型プログラミング
3.1 関数型プログラミングとは
- 関数型(宣言型)プログラミングとは、関数の組み合わせでコードを組み立てるスタイルのことである。
- 命令を1行ずつ記述する従来のスタイルは命令型(手続き型)プログラミングと呼ばれる。
- 以下の例のように、関数型はコードを見れば何をしているのかが明白であり、具体的な処理はメソッド内に隠蔽される。
一方、命令型は一見しただけでは何をしているのか分からないため、コメントが必要になってしまう。
関数型
const string = "Restaurants in Hanalei";
const urlFriendly = string.replace(/ /g, "-");命令型
const string = "Restaurants in Hanalei";
let urlFriendly = "";
for (let i = 0; i < string.length; i++) {
if (string[i] === " ") {
urlFriendly += "-";
} else {
urlFriendly += string[i];
}
}アローが連続していたら、それは「関数をreturnする関数」である。
例えば、以下は関数を受け取って関数をreturnする関数である。
const createScream = logger => message => logger(`${message.toUpperCase()}!!!`);
// 呼び出し。
const scream = createScream(message =>
console.log(message)
);
scream("hoge")
// これは以下をアロー関数にしたものである。
/*
const createScream = function(logger) {
return function(message) {
logger(message.toUpperCase() + "!!!");
};
};
*/3.3 関数型プログラミングの概念
1. イミュータブルでなければならない
引数が参照型の場合は、コピーを作成してから変更を加えなければならない。
以下の関数は元のオブジェクトを変更してしまっているので、イミュータブルではない。
const setName = (user, newName) => {
user.name = newName;
return user;
}以下の関数はイミュータブルである。
const setName = (user, newName) => ({
...user,
name: newName
})2. 純粋関数でなければならない
- 「1つ以上の引数を取り値または関数を返し、副作用が発生しない」のが純粋関数である。
- 引数はイミュータブルなデータとして扱う。
- 引数が同じ場合、常に同じ返り値となる。
以下の関数は引数と戻り値がなく、副作用が発生しているので純粋関数ではない。
let num=1
const hoge = () =>{
num++
}以下の関数は純粋関数である。
const hoge = (num) =>{
return num + 1
}3.6 関数の合成
- 以下のように関数の戻り値を関数に渡すと、数が増えた場合に可読性が下がってしまう。
const ret = methodA(MethodB(MethodC())) - 数が少ない場合は、チェーンメソッドで記述すればよい。
"aabb".replace("a", "1").replace("b","2") - 数が多い場合は、以下のような合成用の関数を定義するとよい。
const compose = (...functions) => {
return arg => {
return functions.reduce((composed, f) => {
return f(composed)
}, arg)
}
}サンプル
const getHour = date => date.getHours()
const addDes = str => `${str}です`
const compose = (...functions) => {
return arg => {
return functions.reduce((composed, f) => {
return f(composed)
}, arg)
}
}
const composedFunction = compose(
getHour,
addDes
)
const msg = composedFunction(new Date())
コメント