コンポーネントの prop の命名規則 考察
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 accept="jpeg"> は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