【styled-components】フロントエンドでstyled-componentsを使ってみた！

今回はReactでフロントエンドを開発した際にstyled-componentsを使用してCSSを適用させたので、こちらについて「使ってみて良かったこと・使ってみて良くなかったこと・疑問に思ったこと」書かせて頂こうと思います。

そもそもstyled-componentsとは、CSS in JS(JavaScriptの中でCSSを定義すること)の拡張機能ライブラリのことです。Reactのようにコンポーネント(< >で宣言された部品のこと)単位でstyleを管理・適用することできるため様々なメリットがあります。レスポンスの改善や高い保守性、ミスの気づきやすさなどが例に上げられます。

1, 使ってみて良かったこと

まず、タグではなくコンポーネントで要素とstyleが結ばれているため、何に対して何を書いているかが分かりやすかったです。また、一つのファイルの中にHTMLとCSSを記述できるため、検索がしやすく大変便利に感じました。あとはCSSをネスト化して書けるのが最高です！scssなど触ったことがありましたが、Reactの機能の中でネスト化して記述できるのはとても使いやすかったです。

2, 使ってみて良くなかったこと

HTML→CSSで今まで記述していたのですが、styled-componentsは先にstyledが来るため、少し違和感を感じました。確かに見やすいですし記述量も少なく、ファイル内検索もしやすいんですけど、、、。

どことなくバックエンドプログラマーの方の思考で作られたモノのように感じます。これは慣れなのかもしれませんが、ちょっと現時点では違和感が残っています。

3, 疑問に思ったこと

生のHTMLにおいてたまに共通のstyleと、固有のstyleを分けて適応したい時があり、1つのタグに2つのClassを付ける場合があります。今回もそれを使おうと思っていました。しかし、styled-componentにおいては、宣言されるコンポーネント名は一つであり、HTMLでいうClassのようなものが一つしか付与できませんでした。そのため、違う名前にしたコンポーネントに半分同じ内容のstyleを書かなければならず、とても不便に感じてしまいました。これを解決する方法はないのか、と疑問に思ったという感じです。

以上、今回はstyled-componentsについて書かせて頂きました。styled-componentsは宣言的でとても見やすいのでかなり好みの書き方でした。他にもTailWindなども使ってみたいです。

今回疑問に感じた部分は調べてみたいと思います。解決方法がわかり次第、こちらの記事を更新したいと思います。ありがとうございました！

shinshi_onigoori