時間のある限りReactで画面を作っている。これまで画面はBootstrapが多かったけど、今回はIntroduction - Semantic UI Reactを使用している。
Reactで画面を作っていていい点と悪い点をちょっと考えてみる。
いい点
- データが変われば表示が変わるので、画面は宣言的に作ることができる。
- いろいろなコンポーネントがOSSで提供されているので、やりたいことはたいていできそうな気がする。
- JSXに慣れたせいか、HTMLがアセンブラのように思えてくる。
悪い点
- なぜかデータが反映されていないことがあってハマる。大抵は使い方を間違えている。
- 利用するコンポーネントでこれ使えないかなぁと思って試してみると使えるpropsが結構ある。ドキュメントに記載していないのはアタリマエのことだからか？
いい点というか、すごく驚いていることだけど、JSXがとても素晴らしいと感じるようになってきた。なんかHTMLを直接書くよりJSXで書くほうがわかりやすく、抽象度が適切な気がする。
例えば、SemanticUI Reactにはいろいろなコンポーネントがあるけれども、ButtonはJSXではこう書く。
<Button primary>Primary</Button>
するとHTMLとしてはこのように出力される。
<button class="ui primary button">Primary</button>
そんなに変わりがないじゃないかと思うかもしれないけど、JSXではデザインやその他いろいろなことを担当するCSSを基本的には直接書く必要はない。もちろん、書くこともできるけど。
CSSはすごく良くできているし、欠かせないものだけど、CSSを適用するためのクラスというものが抽象度が高すぎて扱いづらい。例えば、上の例だと、ui primary buttonトクラスが定義されている。
それぞれデザイン的な役割を担っているけど、ボタンタグなのにbuttonというクラスを書くのはやはり違和感があるし、ボタンタグはUIに関するものなのにuiと書くのも冗長な気がする。
別な例で行くと、Disableのケースなんかも同じことが言えると思う。
<Button disabled>Disabled</Button>
これはDisable状態のボタンタグを生成するJSX。この結果生成されるHTMLは次のようになる。
<button class="ui disabled button" disabled="" tabindex="-1">Disabled</button>
なんと、disabledだけではなく、クラスにはui disabled buttonがついており、tabindex="-1"まで設定されている。
つまり、ただボタンタグの状態を変更したいだけだけどHTMLとCSSレベルではいろいろやらないといけない事が多い。
ここまで書いて間違っていることに気づいた。JSXではなくて、コンポーネントのことだ。JSXはコンポーネントを支える仕組みだからメリットを明確にしているのはコンポーネントで、コンポーネントを扱いやすくしているのがJSXだ。
いずれにしても、コンポーネントをJSXを利用して記述するようになってから、HTMLを直接記述することはTypeScriptを利用しているひとがJavaScriptを書くのと同じくらいの辛さがある状況になった。HTMLを直接書くことは低レイヤーを扱うのに似ているかもしれない。
ただ、いまのところコンポーネントを使う側でしかないからメリットを享受しているだけかもしれない。もう少ししたら考えが変わるかな...?
いずれにしてもReactはたのしい。
