関数は小さく作る

1つの関数は5行程後

if, else, whileのblockの中は1行

つまり、ネストレベルは最大で2にしかならない

抽象化のレベルを揃える

1つの関数内で呼ばれている関数同士の抽象レベルが揃っていることが望ましい

関数を小さく作ることで、レイヤー構造を与えることができる

例えば、React Component周辺のことを考えた時に、

Component内にロジックを書いてしまうか、

Custom Hooksとして切り出すか

の方針を取ることができるが、

後者はある意味で、「関数(Component)を小さく作る」ことになる

凝集度が高まる

カプセル化になる

privateな関数がview側に表出しないので、可読性があがる

レイヤー構造を入れられる

責務の分離ができる

ComponentはViewのみに責務を持つべきで、ロジックのことは知らなくていい

これの嬉しさとしては、例えば、REST+Reduxから、GraphQL+SWRなどに移行した時に、Viewを全く触らずに移行することができる

Custom Hooksの返り値のinterfaceさえ揃っていればいい

ただ単に、Custom Hookを作っただけだが、結果的にレイヤー構造を入れることができた

そう考えると

レベル1が、関数を小さく作ること

レベル2が、その関数のinterfaceを考えること

引数は何にするか？

返り値は何にするか？

のようなステップを踏める

同時にやれるなら同時にやるべき。

慣れてない人が踏むならこういうステップになるか、ぐらいの意味

逆に見れば、そもそも関数を切らないと、レイヤー構造なんて作ることができない

まあ、責務の分離とレイヤー構造ってだいたい同じ目的だしそらそうか

こまめに「関数に切り出す」という意味だから雑に見れば同じ

いろいろな話が混じっている

ロジックをComponent内に書くな→Custom Hookを作れ

責務の分離

Viewとロジックという大きな括りとしての責務の分離

Custom Hookを作る時に、小さく作れ(意味のあるまとまりで作れ)

そのComponnetに1対1対応するぐらいの想定ではでかいことも多い

そうなることもあるだろうけど

Custom Hook同士の責務の分離

最近こんな関数を定義した

code:js

const isNegative = n => n < 0;

たったこれだけの処理をする関数でも文脈に依っては切り出すべきな状況があると思う

抽象度の話なので。

例えば、非負判定がいくつかあるvalidationの項目の1つである場合など

指針

要は、副作用ありとなしとで分ける

この主張はそこかしこで見かける