note React

関数型プログラミング

引き続きGWひとりもくもく開催中。

家事もせず、睡眠時間も削り、、ひたすらゴリゴリコード書いてみたりしてて、集中力が落ちてきました。。（ちょっと他のこともやりましたが）

https://oukayuka.booth.pm/items/1312652

引き続きこちらをやっています！（GOどころかReactまでできるのか〜？？）

関数型プログラミング

関数型プログラミングは、ぼんやりと想像していたのですが、思っていたのとなんか違いましたです・・。

関数型プログラミングで実現されていること

  • 無名関数が使える
  • 変数に関数を代入することができる
  • 関数の引数に関数が渡せる
  • 戻り値に関数を返すことができる（高階関数）
  • 関数に特定の引数を固定した新しい関数を作ることができる（部分適用）
  • 複数の高階関数を合成して１つの関数にできる
// 無名関数を
n => n * 2
// 変数に代入できる
const double = n => n * 2

Higher Order Fuction - 高階関数

  • 引数に関数をとることができる
  • 戻り値に関数を返すことができる
// 引数に関数を渡す
ary.map(n => n * 2)

// 戻り値に関数を返す
const hof=(ex,fn) => {
     return n=> fn(n + ex);
};
const test = hof(1, n=>n * 2);
console.log(test(4));
$ node higherorderfunction.js 
10

むむぅ〜。よくわからぬ〜
(4+1) x 2 = 10 らしぃ・・むずぃイィ。。
Higher Order Component （HOC）を理解するのに必要らしぃ・・
恵比寿のRreactもくもく行って聞いてみようかぁ・・

Closure。クロージャー関数

これも以前に何度もQiitaみたり、ググったりしたけど、いまいちわからんのです。

  • JavaのClojureではない
  • 関数閉包
まず、普通に書いてみる
class Counter {
     constructor(initialCount) {
         this.c = initialCount;
     }
     increment() {
         return this.c++;
     }
}
 
const counter = new Counter(1);
console.log(counter.increment(), counter.increment(), counter.increment());
$ node closure.js 
1 2 3
クロージャーを使う
const counterMaker = (initialCount) => {
     let c = initialCount; // Why? クリアされない
     const increment = () => c++;
     return increment; // 関数「increment = () => c++」を返している
};
const count = counterMaker(1);
console.log(count(), count(), count());
$ node closure.js 
1 2 3

count()の戻りが、内部関数のincrement（increment = () => c++;）countMarker内部で実行されるから、cの値がリセットされずに蓄積されていく
そーゆーもん！
Reactのテイでいうと
関数コンポーネントを実装するとき、外部スコープの変数を参照する関数を定義することがある、それがクロージャーにあたる・・・らしい。
むむぅ・・

ジェネレータ関数

  • 値を保持しつつ繰り返し処理や逐次処理を行うための関数
function* rangeGenerator(end, start = 0) {
    let n = 0;
    for (let i=start; i<end; i++) {
      n+=1;
      yield i;
     }
}
  
const gen = rangeGenerator(3);
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
$ node generator.js 
{ value: 0, done: false }
{ value: 1, done: false }
{ value: 2, done: false }
{ value: undefined, done: true }
{ value: undefined, done: true }

ってのがある。詳しくは本参考。何となく覚えておく。

必要になったら見返そう・・・

カリー化

だんだん・・ついて行けなくなってきたぁ〜（泣

  • 複数の引数をとる関数を、ひとつだけ引数をとる関数に分割してネストさせること

何のためにそんなことするねん。。

理解は追い追いとして、とりあえず動作確認しておく。

const multi = (n,m) => n * m;
console.log(multi(2,4));
 
const curriedMulti = n => {
     console.log(n);
     return m => n * m;
}
console.log(curriedMulti(2)(4));
 
const simpleCurriedMulti = n => m => n * m;
console.log(simpleCurriedMulti(2)(4));
$ node curring.js 
8
2
8
8
カリー化部分適用

用途が想像つかないんだけど、動かしておく

const multi = n => m => n * m;
console.log(multi(3)(5));
 
const triple = multi(3);
console.log(triple(5));
$ node curring2.js 
15
15

何となーく、何なーなぁぁあーく・・こんなのがあるのね〜な感じで、頭の隅に置いておく・・。

 

-note, React