はじめに
Reactでコンポーネントにプロパティを渡すとき、「true」とか「false」ってちゃんと書いてますか？もしかして、
<MyComponent myProp />
みたいに、プロパティ名だけ書いちゃってませんか？実はこれ、自動的に「true」ってことになっちゃってるんです！
これ、最初は省略できて，綺麗で便利だと思うんですけど、後々「あれ？この値ってどこから来たんだっけ…？」って迷子になる原因になりがちなんです。
歴史
HTMLにもある「空気読んでtrue」文化
HTMLにも，一部の属性は値がなくても「ある」ってだけでtrue扱いになるんです。
例えば、チェックボックス。
<input type="checkbox" checked>
これ、「checked="checked"」って書かなくても、checkedって書いてあるだけでチェックが入りますよね？「checked属性がある＝チェック済み」って、HTMLが気を利かせてくれてるわけです。
JSXもHTMLに倣っちゃってる！
ReactのJSXも、このHTMLの「空気読んでtrue」文化を引き継いでるんですよ。JSXって、JavaScriptの中にHTMLっぽく書ける便利なやつですよね。結局はJavaScriptに変換されてReactがコンポーネントを組み立てるわけですが、その変換のときにHTMLの属性と同じように、JSXのプロパティも値が書いてないと**true**として扱われちゃうんです。
だから、
<MyComponent myProp />
って書いた場合、Reactの裏側では
<MyComponent myProp={true} />
って解釈されてるってことです。プロパティ名だけ書けばtrueをとして扱ってくれるってことなんですね。
「明示的」が結局一番の近道！
この「値がないからtrue」って機能、コードをスッキリさせられるのは確かです。でも、個人的にはこれ、後で自分が苦しむパターンが多いなと感じてます。
myPropって書いてあるだけだと、このmyPropがtrueなのかfalseなのか、それとも何か別の値が入る可能性があるのか、パッと見じゃ全然わからないじゃないです。特に、数ヶ月後に見返したり、チームの別の人がコードを読んだりするときには、かなりの「？」を生み出すことになります。
僕が今回、この記事を書こうと思ったのも、この「値がないからtrue」のプロパティを探すのにめっちゃ時間かかったからなんです！
だから、僕からの個人的な感想では，boolean値を渡すプロパティには、trueかfalseかをちゃんと明示的に書いてあげましょう！
// 断然こっちがオススメ！
<MyComponent myProp={true} />
<MyComponent anotherProp={false} />
// ちょっと待って！あとで後悔するかも…
<MyComponent myProp />
ちょっと手間に感じるかもしれませんが、ちゃんと{true}とか{false}って書くことで、そのプロパティが何を意味しているのか、一目瞭然になります。「あ、これはこういう時にtrueになるやつね！」って、未来の自分やチームメンバーが秒速で理解できるようになるはずです。
結果的に、デバッグの時間も減るし、コードの意図が伝わりやすくます！
より読みやすいコードを目指しましょう！