「Reactハンズオンラーニング」の感想・備忘録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())