はじめに
ある程度開発をしていくと、関数型プログラミングや手続き型プログラミングとはいう言葉はちらほら耳にしますよね。
Reactは16.8.0のReacthooks導入により関数型プログラミングに大きくシフトしました。
関数型プログラミングについて知らなくてもコードは書けると思いますが、MetaがReactを関数型として設計している意図を汲み取れた方がより効率良く綺麗なコードが書けると思います。
自分自身のReactの学習のためにも今回はまとめさせて頂きます。
その前に手続き(命令)型プログラミングとは
ブラウザなどへの命令を手順通り(手続き通り)記述していく手法になります！
デメリットとしてコード量が大きくなって可読性が悪くなる場合があります。
例:配列にある数値を倍にする処理
let nums = [1,2,3];
let doubleNums = [];
for(let i = 0; i < nums.length; i++) {
let double = nums[i] * 2
doubleNums.push(double)
}
少し冗長にも見えますよね。
メリットとしては初心者でもコードが追いやすい、学習難易度が低いといったところがあります。
去年の自分はずっとこんな感じのコードを書いておりました。
関数型プログラミングとは
端的に言うと、関数だけでコードを組み立てるスタイルのこと。
手続きの方の制御を(なるべく)関数に分離し、
やりたいことに集中できるようにするプログラミング手法です。
例:配列にある数値を倍にする処理
let nums = [1,2,3];
let doubleNums = nums.map(num => num * 2)
ループ制御をmapメソッドが担当して、やりたいことを関数で定義(開発者が担当)に分離することができます!
実際に手続き型にiなどの変数を使わずに済みますしかなりスマートになります。
また、関数型プログラミングの重要なキーワードとして
(値の) 状態管理と処理の分離
→Reactで言うところの状態管理はprops,stateを通して行い関数コンポーネント自体はjsxを作成する処理に特化することになります
純粋関数(副作用を排除する)
→引数が同じ場合、常に同じ返り値となります。返り値引数に依存するためバグの検知もしやすいです。Reactの場合、基本的に関数コンポーネントやstateに渡すコールバック関数についてはそういったものは純粋関数で基本的に書くようにします。
不変性(Immutability)
→関数の引数としてオブジェクトが渡ったときに、その中身を書き換えてはいけないという性質になります。
これを決めておかないと関数の外側に対しても影響を及ぼすことになってしまいます。Reactで言うとpropsが渡ってきてそれを書き換えられないことからもReactが関数型プログラミングとして設計されていることがわかると思います
これらのルールを守ることによって、下記のメリットを得ることが出来ます！
関数型プログラミングのメリット
- コードの可読性の向上
- 拡張性・再利用生の向上
- テスト生の向上
- モジュール化の向上
- Tree Sharkingの向上
最後に
Reactの記法に迷った際は1度関数型プログラミングの記法について、それに沿うように実装できているのか1度思い出してみてください。
実際にReactを設計している意図を汲み取るということが、遠まりのようには見えますが良いコードを書くことに繋がるのかなと思います!
今回の記事が皆さんの参考になれば幸いです。