毎日更新

56日目 個人開発記⑧-emotionを使おう-

おはようございます。

今日は個人開発記、「styled-componentじゃなくてemotionでいこう」です。

React使った開発をしていると、「CSS-in-jsのライブラリに何を使うか?」という悩みを抱える方は多いのではないのでしょうか?

コンポーネント単位でスタイルが完結するので、従来のプレフィックスを用いた全体のCSS設計を考える必要がなくなって非常にラクです(これは本当にありがたい。

いくつかライブラリがある中で、今最もアツい(?)styled-componentsをまず使うことにしてみました。記事も多いし、それだけ使われてるってことは何かしら選ばれる理由があるんでしょう。

で、実際書いてみると、直感的でなく非常に分かりづらい、、!

個人的な1番の使いづらいポイントは、「DOM構造が分かりづらい」ということでした。

// styled-components
cosnt Button = styled.button color: red;
//render
<Button>ボタン</Button>

たとえばこれはbuttonタグを描画しますが、styled-componentsだとこんな感じのコードになります。buttonタグであることを示しているのは

styled('button')

の部分です。このコードだとまだ分かりますが、タグの名前は自由につけられるので直感的にDOM構造が分かりにくになと思っちゃいました。renderの中身を見てDOM構造が分かりづらいのは嫌だ!と思って、他を探してみることにしました。

そんな中見つけたのがemotionでした。

CSS-in-JSのライブラリとして「emotion」を選択している理由

emotionだと、こんな感じの書き方になります。

// emotion
cosnt baseStyle = css color: red;
//render
<button>ボタン</button>

タグの使い方は、HTMLと同じです。スタイルをbaseStyleという変数にまとめてつっこむよ〜ってことで、個人的にはこっちの方がかなり直感的だなと思いました。

ただ、どんどんアプリの規模が大きくなったときにどうなるかは分かりません。styled-componentsはその拡張性が大きなメリットである的なことも書いています。だからこそ選ばれているんだろうし。

僕は仕事でもマークアップを書くので、素のcssにもある程度慣れています。だからこそ、書き方が普通にマークアップに近い方が直感的だと思っちゃいますね。

周りの話を聞いていると、cssは本当にヘドが出るくらい嫌いだし苦手だという人が結構多いので、全然好きではないけどそんなに苦手意識がない僕は結構レアな方なんだろうなーなんて思ってます。

さあ今日もがんばろう

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。

© 2021 きわっちのブログ Powered by AFFINGER5