What's this?
この記事ではここ数年のトレンドを見ながら、webフロントエンドにおけるCSSの扱いはどのようになっていくのかを考えます。
トレンドからはweb開発者がどのようなライブラリ・フレームワークを好んでいるかを測るため、今後数年(3~4年くらい？)はこういう傾向だろうという程度の推測に留まるでしょう。
基本的にはwebフロントエンド全般の話がしたいのですが、CSSのためのライブラリ・フレームワークの選定において最もトレンドが反映されやすそうなReactをある程度前提としています。
いそがしい人向け
- 「愚直にCSSを全て自前で書いていく」という手法は減っていきそう
- デザインの柔軟性より開発速度が重視される傾向があるのではないか
- ユーティリティファーストなフレームワークとPanda CSSの様な多機能なフレームワークに二分されそう
- shadcn/uiは伸びそう
対象パッケージ
今回はnpm trendsを使ってダウンロード数で傾向を見ていきます。
最大10個のパッケージを比較できます。
比較するパッケージについては筆者の独断と偏見によって「有名」「技術選定時によく候補に挙がる」「よく名前を見る」「最近人気そう」等の要素を持つものを選び、以下のようにしました。
- Bootstrap(bootstrap)
- styled-components(styled-components)
- Emotion(@emotion/react)
- vanilla-extract(@vanilla-extract/css)
- Panda CSS(@pandacss/dev)
- MUI(@mui/material)
- Chakra-UI(@chakra-ui/react)
- Ant Design(antd)
- Tailwind CSS(tailwindcss)
- shadcn/ui(shadcn-ui)
参考のために古くから使われているものも入れています。
また、npm trendsで見る際にはパッケージ名を指定する必要があるため最も使用頻度の高そうなものを指定しています。
ダウンロード数推移
まずは10個全部まとめて見てみましょう。
URL：https://npmtrends.com/@chakra-ui/react-vs-@emotion/react-vs-@mui/material-vs-@pandacss/dev-vs-@vanilla-extract/css-vs-antd-vs-bootstrap-vs-shadcn-ui-vs-styled-components-vs-tailwindcss
2年の範囲ではこのようになります。
5年だとより大きな流れが分かりやすいです。
ダウンロード数だけの順位を付けると以下のようになります。
- tailwindcss
- @emotion/react
- styled-components
- bootstrap
- @mui/material
- antd
- @vanilla-extract/css
- @chakra-ui/react
- shadcn-ui
- @pandacss/dev
個人的に印象的な点をまとめました。
- bootstrapは2023年半ばまで上昇傾向、その後styled-componentsと共に下降
- 2022年半ばになってようやくstyled-componentsがbootstrapを超す
- emotionは2023年半ばあたりからstyled-componentsより優位、その後ダウロード数は現状維持
- 2022年あたりからtailwindがものすごい上昇、2024年に入ってトップに
- MUIは2024年に入っても上昇傾向
とはいえ今回はどのライブラリ・フレームワークが多く使われているかよりも、業界全体としての傾向を見たいのでダウンロード数の絶対的な数の多さはそれほど大きな意味はありません。
もう少し細かく見る
全体ではダウンロード数に差があり、細かい動きが見えないためダウンロード数が近いパッケージ群ごとに分けてみましょう。
直近の動きがみたいので2年で表示します。
とはいえ長いので、気になる方だけアコーディオンを開いて読んでください。
まとめだけでも支障は有りません。
トレンドの詳細
Tailwind, Emotion
URL：https://npmtrends.com/@emotion/react-vs-tailwindcss
tailwindは2024年に入っても分かりやすく上昇を続けています。
emotionは2023年後半から2024年初めをピークに横ばい気味です。
MUI, Bootstrap, styled-components
URL：https://npmtrends.com/@mui/material-vs-bootstrap-vs-styled-components
Bootstrapとstyled-componentsは2023年中は横ばい気味で2024年に入ってからは明らかにダウントレンドです。
一方MUIは大きな上昇はないものの2024年に入っても上がり続けています。
MUIについて
MUIは2021年8月のv5リリースに伴ってパッケージが変わっています。
v4以前の @mui/material に相当する @material-ui/core の推移は以下のようになっています。
URL：https://npmtrends.com/@material-ui/core
v5リリース時点の2021/08のダウンロード数は約230万で、最新2024/07では約126万となっており@mui/material の約391万と合わせてると約517万と倍以上に上昇している事が分かります。
約517万となると、ダウンロード数ではちょうどBootstrapとstyled-componentsの間くらいになります。
Chakra UI, vanilla-extract, Ant Design
URL：https://npmtrends.com/@chakra-ui/react-vs-@vanilla-extract/css-vs-antd
Ant Designは基本的には緩やかに上昇しています。(なぜか2024/04頃に外れ値がありますが無視します)
vanilla-extractは2023年半ばをピークに横ばい。
Chakra UIも横ばいに見えますがほんの少しづつ上昇しています。
後述の考察部分でも触れますが、ダウンロード数とプロダクト採用数に相関があることを考えると上昇率はダウンロード総数に比例するはずなのでダウンロード数が50万程度の@chakra-ui/reactが緩やかに見えることはあまり大きな意味はないでしょう。
Panda CSS vs shadcn/ui
URL：https://npmtrends.com/@pandacss/dev-vs-shadcn-ui
この2つは2023年に登場したばかりでまだプロダクトにもあまり採用されていないでしょう。
加えて、shadcn/ui は本来はインストールして使用するライブラリでは無くcopy & paste で使用することも可能なため正確な数値ではありません。(とはいえ大抵shadcn-uiのCLIを使用するとは思います)
共に勢いよく上昇しているのが見て取れます。
特にshadcn/uiは通常凹みがちなクリスマスシーズンでも大きく上昇しています。
プロダクト採用数が少ないであろうこの2つの上昇率は注目度の高さの指標として読み取れます。
トレンドのまとめ
ここで一旦直近の傾向を簡単にまとめます
- tailwindcss : 上昇大
- @emotion/react：横ばい
- styled-components：下降
- bootstrap：下降
- @mui/material：上昇大
- antd：上昇小
- @vanilla-extract/css：横ばい
- @chakra-ui/react：上昇小
- shadcn-ui：上昇大
- @pandacss/dev：上昇大
これからのCSSについて考える
まずはダウロード数の推移をどう評価するかですが、以下のように考えています。
- ある程度使われているパッケージは基本的にダウロード数が上昇し続ける傾向にある
- 1度プロダクトインするとデプロイパイプライン等によって継続的にダウロードされる
- 世界中でプロダクトは増え続ける
- ダウロード数が横ばいになったり減少するという事は生きたプロダクトから外されているということ
当然それ以外の要因も影響しているでしょうが、今回は上記の考え方を前提にします。
ジャンル分け
まずはジャンルを分けてみましょう。多少の違和感は無視してください。
- CSS in JS
- styled-components
- Emotion
- vanilla-extract
- Panda CSS
- コンポーネントベース
- MUI
- Ant Design
- Chakra UI
- shadcn/ui
- Bootstrap
- ユーティリティファースト
- Tailwind CSS
加えて、ランタイムの有無でも分けておきましょう。
いわゆるzero-runtimeというやつかどうかです。
- ランタイム有
- styled-components
- Emotion
- MUI
- Ant Design
- Chakra UI
- Bootstrap
- ランタイム無
- vanilla-extract
- Panda CSS
- shadcn/ui
- Tailwind CSS
emotionについて
Emotionについては注意が必要です。
Emotion自体はコンポーネントライブラリでは無くCSSを記述するためのものですが、MUIやChakra UIなどが内部でEmotionを使用しているためダウンロード数はそれらの影響をうけます。
Tailwindも同様にshadcn/uiがTailwindベースですが、shadcnのダウンロード数はTailwindのトレンドに影響を与える様な数ではないので無視します。
ジャンルを分けて見えること
では先程ジャンル別に分けた状態でトレンドを合わせて見てみましょう。
- CSS in JS
- styled-components：下降
- Emotion：横ばい
- vanilla-extract：横ばい
- Panda CSS：上昇大
- コンポーネントベース
- MUI：上昇大
- Ant Design：上昇小
- Chakra UI：上昇小
- shadcn/ui：上昇大
- Bootstrap：下降
- ユーティリティファースト
- Tailwind CSS: 上昇大
ランタイムの有無で分けるとこうなります。
- ランタイム有
- styled-components：下降
- Emotion：横ばい
- MUI：上昇大
- Ant Design：上昇小
- Chakra UI：上昇小
- Bootstrap：下降
- ランタイム無
- vanilla-extract：横ばい
- Panda CSS：上昇大
- shadcn/ui：上昇大
- Tailwind CSS: 上昇大
CSS in JSは新顔のPandaCSS以外は横ばいか下降傾向です。
コンポーネントベースで提供されているものはやや古いと言わざるを得ないBootstrap以外は上昇傾向。
Tailwindは言わずもがな伸びています。
一方、ランタイムの有無についてはややランタイム無が優位に見えますがこの要素だけでははっきり傾向が分かれているわけではなさそうです。
考察
さて、これまでの情報から筆者が1番に感じたことは 「CSSを直接記述する手法よりもコンポーネントやユーティリティクラスの使用を好む傾向が強まっているのではないか」 という事です。
詳細については長いのでここも気になる方だけ読んでください。
詳細な考察
CSS in JSと呼ばれるライブラリ群はほぼ横ばいか下降気味で、これはプロダクトから段々と外されている可能性が高いです。
Emotionは横ばいですがEmotionに依存するコンポーネントライブラリが上昇傾向であることを考えると、Emotion単体での使用率は減少していると考えた方が良いでしょう。
また、最も新しく多機能で注目されているPanda CSSを除けばvanilla-extractも横ばいでパフォーマンス観点だけでs-cやEmotionが割けられているとも言い難いです。今回は入れていませんが、よくzero-runtimeでvanilla-extractと共に挙げられるlinaria等はPanda CSSよりもダウンロード数が少なく尚且つダウントレンドでした。
当然ハイパフォーマンスの方が好まれる傾向はあると思いますがCSSにおいて最も重要な選定基準がパフォーマンスということは考えづらいと思います。
ランタイムを持つコンポーネントライブラリが軒並み上昇傾向な点も、パフォーマンス懸念だけが原因で乗り換えている訳では無いという主張を後押しします。
一方で別の可能性も考えられます。
「コンポーネントベースのライブラリはロックインし易く乗り換えられない」 という事です。
先に述べた通り、プロダクトから外されない限り原則伸び続けるのであれば好まれているのではなく、乗り換えられない状況によって上昇傾向に見えているという可能性も捨てられません。
しかし、MUIの上昇率がやや大きいことや新しく登場したshadcn/uiに大きな注目が集まっている事を考えると開発者たちがコンポーネントベースで提供されるライブラリを好んでいることは事実としてありそうです。筆者は「使いたくないが乗り換えられないから使っているだけ」という事では無いと考えます。
直接CSSを書かないコンポーネントライブラリが好まれる要因の一つとして、独自のデザインを自前でCSSを書いて再現することのコストとそれによって得られるメリット(プロダクトの価値向上≒売上)と見合わないと判断されているのではないかと思います。
実装も管理も面倒なCSSを頑張って書くよりは、出来合いのコンポーネントを少し調整して素早く実装し、高頻度のデプロイによって施策を打ち続ける方が事業にとってメリットが大きいという判断がされている可能性があります。
これらを踏まえて今最もトレンドなTailwindについて考えましょう。
Tailwindはコンポーネントベースではなく、ユーティリティクラスと呼ばれるあらかじめ特定のCSSプロパティが適用されたクラス名を使用します。
また、core pluginsによってあらかじめ統一されたテーマが用意されており細かなスタイルの調整なしにある程度綺麗なUIが作りやすいです。
完全なzero-runtimeである点も特徴の一つでしょう。
Tailwindはコンポーネントを提供するライブラリではありませんが、コンポーネントライブラリに似た特徴も持ち合わせます。「直接CSSを書かない」「ある程度整ったUIを作るハードルが低い」「独自の記述のためロックインしやすい」などです。
一方でユーティリティファーストであるためコンポーネントライブラリよりもはるかにカスタマイズが容易で、JIT Mode等を使えばthemeから逸脱した実装すら可能です。
その点で実装速度が速く且つ柔軟性にも優れる、さらにはパフォーマンスにも懸念が無いTailwindが好まれるのではないでしょうか。
さて、詳細を読んだ方はお分かりかと思いますが筆者の結論としては以下です。
- できるだけ自前でCSSを書かないようなアプローチの採用が増えている
- styled-components等の下降傾向はパフォーマンス懸念だけが要因ではない
- コンポーネントベースのライブラリはロックインし易く乗り換えられない可能性はあるが上昇率を考えると新規で採用されるケースもあるはず
- 開発速度がより重視されているのではないか
- 開発速度が比較的早くなり、カスタマイズも容易なTailwindが好まれる
これからのCSS
では以上の考察を踏まえて、今後数年のトレンドとしてどうなっていくのでしょうか。
まず、「愚直にCSSを全て自前で書いていく」という手法はどんどん減っていくのではないかと思います。理由は先に述べた通りです。
コンポーネントライブラリの採用が増えるかという点ですが、ここは微妙なところでしょう。
ロックインの問題なども考慮するとTailwindの様な柔軟性を確保したライブラリ・フレームワークの方が好まれるのではないでしょうか。
筆者としてはTailwindの様なユーティリティファーストフレームワークと、Panda CSSの様な多機能かつパフォーマンスも良いフレームワークに二分されるというシナリオが最もあり得そうだと考えています。
Panda CSSについて簡単に説明すると、非常に多機能でありデザインシステムの構築を補助するような Theme や Recipes 等の機能に加えPatternsやPresetのようなある程度まとまった単位でスタイルを提供するような機能も備えています。
ある程度CSSを書くものの、様々な機能によって記述を減らすことが出来ます。
これだけの機能があれば十分な柔軟性を担保しつつ開発速度への貢献も期待できるでしょう。
何らかの理由でTailwindを避ける場合はこういったフレームワークに人が集まりそうです。
どうせCSSを書くならより高機能かつzero-runtimeで。という感じです。
また、shadcn/uiの採用はどんどん増えていくのではないかと考えています。
shadcn/uiはTailwindベースで、簡単に説明するとnode_modulesからコンポーネント単位でimportするのではなくコンポーネントのコードを各々のプロジェクトにコピペするような形で持っていく形式です。これにより、実装済みのコンポーネントも容易にカスタマイズすることが出来ます。
これであればTailwindの除却はさておき、コンポーネントライブラリによるロックイン問題や柔軟性の欠如などの問題も解決できるでしょう。
Tailwindを採用するようなプロダクトではこちらのパターンが増えてくるのではないでしょうか。
まとめ
- 「愚直にCSSを全て自前で書いていく」という手法は減っていきそう
- デザインの柔軟性より開発速度が重視される傾向があるのではないか
- ユーティリティファーストなフレームワークとPanda CSSの様な多機能なフレームワークに二分されそう
- shadcn/uiは伸びそう
Discussion