これはNextremer Advent Calendar 2016の第6日目の記事です。
TL;DR
ReactとFlexboxの相性が超いい
はじめに
タイトルは適当。最近( ﾟ∀ﾟ)o彡°Flexbox！Flexbox!ってなってて、どのWebサイト見ても「Flexbox使ってどうやってレイアウトするか」を考えてしまうようになっているので、ちょっと言ってみたかっただけです。
ReactとかFlexboxの説明は割愛。この辺参考にすればいいと思うよ。
React: http://qiita.com/yeaney/items/9d5227ff49c0377c3ef4
Flexbox: http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html
最近ずっとReact書いてるけど、レイアウト組むにあたってFlexboxとの相性が超いいなーと思ったのでざっと紹介だけ。
React with Flexbox
Flexboxは、親要素（Flexコンテナ）と子要素（Flexアイテム）から構成されていて、コンテナ内のアイテムの並びを指定するイメージでレイアウトを組み立てていく。各アイテムはそれ自身がまたコンテナとなり、更にアイテムを内包する。
あれ？ReactのComponent分割とFlexboxのコンテナってイメージ似てね？
Flexboxを勉強しはじめて最初に感じたのが↑だった。
似てるって言うと語弊があるかもしれないけど、ぱっとWebページを見たときに頭の中で考えたReactでのComponentの分割と、Flexboxのコンテナ・アイテムの粒度がほぼ一緒になるという感じ。
ちょうどReactでCSS Modulesも導入してたし、Flexbox使うと超きれいにいい感じにCSSが書けるんじゃないかと。
"Component = Flexコンテナ"
ということで、早速導入してみた。といっても何も特別なことはしてないけど
1. ComponentのRootCSSに`display:flex;`を追加
2. RootCSS内で子Componentの並びを指定（`flex-direction`とか`flex-wrap`とか）
3. 子ComponentのRootCSSにそのComponentのFlexアイテムプロパティを追加（`basis`とか`grow`とか）
4. 更に子ComponentのRootCSSに`display:flex;`を追加（孫要素用）
5. 1.〜4.を繰り返し
これだけで、レイアウト部分のCSSが出来上がる。(・∀・)ｲｲﾈ!!
と喜び勇んで全てのComponentに導入していったのだが、１つ問題が起こった。
問題点と解決策
問題点：レイアウト部分のCSSの見通しが悪くなる
要するに「この部分のレイアウトどうなってるんだっけ？」ってときに、親と子全てのComponentのCSSファイルを見ないとレイアウトの全容がつかめないという問題が発生した。
別に全部のファイルを並べればいいだけだし、問題というほどでも無いことなんだけど
規模が大きくなってくるとどうしても鬱陶しくなり、レイアウトに関するCSSは1箇所で見たい欲が湧いてくる。
解決策：レイアウト部分のCSSは親Componentでまとめてしまおう
Component毎にCSSが分かれているせいで、コンテナと各アイテムのCSSがバラけてしまって見通しが悪いんだ。ということで、親Componentにコンテナと各アイテムのCSS（レイアウトに関する部分のみ）をまとめてしまえと改修してみた。
これも（多分）普通にみんなやってることだと思うけど（汗）
Componentの分割方法
といっても超単純で
<ParentComponent>
<ChildAComponent />
<ChildBComponent />
</ParentComponent>
としていたのを
<ParentComponent>
<div className="child-a"><ChildAComponent /></div>
<div className="child-b"><ChildBComponent /></div>
</ParentComponent>
というふうに変更したというだけ。
CSS
これも
/* parent.css */
.parent { display:flex; flex-wrap: wrap; justify-content: space-between; }
/* childA.css */
.child-a { flex-basis: 120px; ... }
/* childB.css */
.child-b { flex: 1; ... }
を
/* parent.css */
.parent { display:flex; flex-wrap: wrap; justify-content: space-between; }
.child-a { flex-basis: 120px; }
.child-b { flex: 1; }
/* childA.css */
.child-a { ... }
/* childB.css */
.child-b { ... }
というふうに親ComponentのCSSにレイアウト部分を移動しただけ。
これだけで、親ComponentのJS,CSSを見ればレイアウトの仕様がひと目で分かるようになりましたとさ。
さいごに
CSS情強の人たちには当たり前だと思うんですが、ReactとFlexboxを併用するとこんなに綺麗にまとまるということに色々と感動したので、紹介がてら書いてみました。