1部品1責務

部品の説明を一言で言えるか

分割の基準を1つだけ覚えるなら、これです。その部品が何をするものかを、一言で言えるかどうか。

「作品の一覧を出す部品です」なら合格です。「プロフィールを出して、作品も出して、公開件数も数える部品です」と言いたくなったら、そこには責務が3つ入っています。責務とは「その部品が引き受けている役目」のことです。1つの部品には役目を1つ、というのが 1部品1責務 の考え方です。

分けたくなる合図

役目が増えていく部品には、だいたい先に合図が出ます。

• 説明が「〜と〜」でつながる
• 上半分と下半分で、まったく別のデータを触っている
• どちらか片方だけを、別の画面でも使いたくなった
• 直したい場所を探すのに、スクロールが要る

逆に、これらが出ていないなら分けなくて構いません。行数が多いこと自体は理由になりません。60行あっても役目が1つなら、そのままのほうが読みやすいこともあります。

分けると何が起きるか

分ける前の部品は、こんな形になりがちです。

分けたあとはこうなります。

App を読むだけで、このページが何と何でできているかが分かります。部品ツリーがコードの見た目そのものになった状態です。中身を直したいときも、開くファイルが最初から決まります。

責務は見た目ではなくデータで決める

見た目が近くにあるからといって同じ部品とは限りません。判断の材料はデータです。プロフィールの表示はプロフィールのデータだけを見ますし、公開件数は作品のデータを見ます。触っているデータが違うなら、役目も違うと考えると迷いません。

つまずきどころ

分けた結果、親から渡す props が10個になったら、分け方がずれています。役目の境目ではなく、途中で切っている合図です。そのときは切る位置をずらして、渡す値が2つか3つで済むところを探します。props の数は、分け方が合っているかを測る物差しになります。

演習

役目が2つ入ってしまった部品を、2つのファイルに分けます。移し先のファイルは空の状態で用意してあるので、どちらの役目をどちらへ入れるかを決めるところから始めてください。