📑

prop の命名規則 考察

1 min read

prop の命名規則についてほぼ論じてない気がするので自論を披露したい。まだ固め途中なので意見求む。

なぜpropの命名規則を考えるのか?

みなさん、変数の命名方法でコンポーネントのpropを命名していませんか?

これ、よく考えるとかなり不自然です。コンポーネントのpropというのはコンポーネントの属性、あるいはコンポーネントの設定です。それを変数名と同じ要領でつけるのはどう考えても不自然ですよね。

では、どのような命名が良いのでしょうか?

結論

  • 「コンポーネントファースト」な命名をする
    • コンポーネントが(状態)である (c.f. disabled, hidden)
    • コンポーネントの(所有物)が(状態)である (c.f. value, width, href)
  • 否定形でつける

こんな感じで prop を命名すると良さそうです。

HTML 要素の属性名を分類してみる

コンポーネントの prop の命名を考えるにあたり、HTML 要素の属性名を参考にしてみました。属性名を分類してみると、大きく次の 2 つに分類できました。

  • コンポーネントが(状態)である
  • コンポーネントの(所有物)が(状態)である

パターン 1. コンポーネントが(状態)である

「コンポーネントが(状態)である」属性名の例を挙げます。

  • disabled
  • defer
  • open

たとえば <input disabled> は「input is disabled」と読めます。

このパターンは形容詞や過去分詞が多いです。

パターン 2. コンポーネントの(所有物)が(状態)である

「コンポーネントの(所有物)が(状態)である」属性名の例を挙げます。

  • value
  • href
  • width

たとえば <input value="text"> は「value of input is "text"」と読めます。

このパターンは名詞が多いです。

例外的なパターン

例外的なパターンもあります。

  • コンポーネントが(物体)に(動作)する
  • コンポーネントが(動作)するか

前者としては accept が挙げられます。input accepts jpeg のようになります。

prop の命名規則を考える

HTML 要素の属性名を分類してみて、以下の命名規則がよさそうだなと思いました。

  • 「コンポーネントファースト」な命名をする
  • 否定形でつける

コンポーネントファーストな命名をする

通常、変数や関数の命名では「isOpen」「shouldSubmit」のような疑問形での命名が採用されます。しかし、これらはコンポーネントファーストで考えると不自然な点があります。

例えば、以下の 2 つを見比べてみます。

<input isDisabled>
<input disabled>

isDisabled という命名は、「prop はコンポーネントの状態を表す」ことを考慮すると違和感があります。「input component が isDisabled である」とは言いませんよね。このように、コンポーネントが主体となるように命名すると、変数や関数の命名規則とは異なってきます。

コンポーネントファーストな命名規則としては以下が挙げられます。

  • コンポーネントが(状態)である
  • コンポーネントの(所有物)が(状態)である

詳しくは前半を読み返してください。

否定形でつける

否定形でつけるのも prop ならではです。変数や関数の命名で否定形でつけるのは、二重否定になり混乱するので bad pattern とされています。しかし、コンポーネントの場合は属性をつけることで無効化するという運用がデファクトになっています。たとえば disabled や hidden などは否定形です。

このように、否定形をつけても良い、むしろ推奨されているのは prop の命名ならではです。

まとめ

以上のように、コンポーネントの prop は通常の変数とは異なる命名規則でつけると良さそうです。

Discussion

ログインするとコメントできます