ベストなCSSフレームワーク & React UIコンポーネント [2024年版]

[2021-11] 新しくアプリとか作るときに、しばしば, どれにするかってなるので、メモしておく。以下に挙げるものから選べば間違いない。

とはいえ、Bootstrap の代替を謳うものは、わざわざそれらを選ばなくても、別に Bootstrap でいいような気もする。

2024年 CSS frameworks

[2024-05] メジャーなのは Bootstrap, Bulma, Tailwind CSS の 3択。UIkit, Semantic UI, Materialize, Foundation Framework は利用者が少なすぎて、新しいプロジェクトで採用しがたい。

Bulma

Bulma: Free, open source, and modern CSS framework based on Flexbox An alternative to Bootstrap.

2024年3月22日, v1.0.0 がリリースされた。Dart Sass で書き直された。

  • Modern features -- built with Flexbox.
  • Simple grid system
  • Easy-to-learn syntax
  • Font Awesome 5 support
  • 100+ useful CSS helpers
  • No JavaScript

JavaScript が付いておらず, delete 要素なども全部自分でつくってやる必要がある。面倒!

[2024-05] 非公式ながら BulmaJS を使えばよい。Class がグローバルに定義されているのが良くないとの意見もあるが、サイト全体を Bulma で作ればよいだけ。

☆ Bootstrap

Bootstrap · The most popular HTML, CSS, and JS library in the world. 歴史あるCSSフレームワーク. 最新は v5.x. 軽くなった。Theme を適用できる。

Pros:

  • 事前定義されたコンポーネント。
  • もっともポピュラー
  • 充実したドキュメント。

▲ Tailwind CSS

ほかを圧倒する人気。

とはいえ utility-first なのは私 (堀川) は好かん。bg-gray-100 rounded-xl p-8 など。柔軟性はあるのだろうけど。

利用が少なく, 新たには選びにくい

UIkit

UIkit A lightweight and modular front-end framework for developing fast and powerful web interfaces.

最新は 2024年の v3.21.1. 開発継続。

デフォルトではカクカクしたデザイン。多くのコンポーネントを備える。Theme 機能は pro版.

次のように, クラス名に接頭語 uk- が付いて、見分けやすい. 

<button class="uk-button uk-button-default">Button</button>

▲ ZURB Foundation

昔からある。Responsive. 取扱いやすい.

最新は 2023年の v6.8.1. 開発は継続している。

jQuery 依存。今から新しいプロジェクトで採用するものではない。

▲ Materialize

Materialize A modern responsive front-end framework based on Material Design.

v1.0.0 が 2018 年にリリースされてから、それっきりになっている。もう採用できない。

クラス名は独自。 

<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>

JavaScript ライブラリが付いてきているが、何だか上手く動かない。そこまで調べようとも思わなかったので、見送り。

▲ Semantic UI

jQuery 前提. ほかにいいのがいろいろあるので、今から新たに作るときには避けるかな。

2018年のv2.4.1 が最終。 2022年に v2.5.0 が出ている。

[2022-01] Semantic UI の community fork として Fomantic-UI がある。更新が続いている。Fomantic-UI の 最新は 2023年のv2.9.3. こちらも jQuery 3.4+ に依存。

ちょっと試してみたが, responsive にするのが難しそう。v3.0 の開発も頓挫しているようだ。To be clear merging back into SUI is still our intention.

▲ Spectre.css

Spectre.css CSS Framework A Lightweight, Responsive and Modern CSS Framework. 最新は v0.5.9.

ほとんど Bootstrap と同じクラス名になっている。

JavaScript が付いておらず, 例えば toast の [x]ボタンの挙動も自分で手書きしないといけない。めんどい。採用しがたい. 

<button class="btn btn-success">success button</button>

その他:

Pure -- CSS with a minimal footprint.
ものすごく小さい。
TACHYONS - Css Toolkit

2024年 React UI components

React であっても HTML + CSS framework がいいんじゃないかと思うが、一応、React 用ライブラリもリストアップしておく。

[2024年] 現状, MUI (旧 Material-UI) が圧倒。次いで, Ant Design, React-Bootstrap。これに Chakra UI が続く感じ.

Ant Design

Ant Design - The world's second most popular React UI framework An enterprise-class UI design language and React UI library.

npm antd. 週のダウンロード数は 150万回程度。

Ant Design 5.0 が出ている。

MUI (旧 Material-UI)

@mui/material - npm MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Material Design.

v5 にメジャーバージョンアップして, npm パッケージ名が変更になっている (@mui/material, 2024年5月の v5.15.18 が最新)。週のダウンロード数が360万回を超える。

古い方を指したままの Web上などの解説に注意。こんにちはMUI！ 新しくなったMaterial UI v5 パッケージ @material-ui/core は古い (使ってはいけない)。2024年現在, いまだにこちらもダウンロード数が多い。どういうこと?

React-Bootstrap

react-bootstrap - npm React-Bootstrap is compatible with various versions of Bootstrap.

npm react-bootstrap. 週ダウンロード数 110万回ぐらい。徐々に落ちている。CSS フレームワークの人気が Tailwind に移っているため。

React-Bootstrap v2.x は Bootstrap v5.x に対応。

@chakra-ui/react

週 531,000 回で, けっこう多い。意外と人気かか。緑色、よさそう。

The Runtime Trade-off:

Since Chakra UI uses CSS-in-JS under the hood (Emotion + styled-system), this flexibility comes with a small price to pay when it comes to runtime.

同じ Chakra チームが開発した Panda CSS --CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience が新しい。

@mantine/core

週 353,000 回. 青色。

Ionic

Cross-Platform Mobile App Development: Ionic Framework

ちょっとジャンル違いな気もするが, an open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base.

npm @ionic/cli. @ionic/core が週 250,000 回ぐらい。

v6-lts, v7-lts, latest は v8.1.2. 次のような書き方になる。 

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Tab 2</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
  <!-- some filler -->
  </IonContent>
</IonPage>

▲ Primer CSS and Primer React

Primer Design System

npm @primer/css. ぐっと落ちて, 週 57,000 回ぐらい。

  • CSS framework
  • React components
  • ViewComponents -- Build component-driven UI in Rails with ViewComponents.
  • Octicons -- Your project. GitHub's icons. Available in Ruby and JavaScript implementations.

これも CSS framework には JavaScript が付いていない。最近はこういうのばかりか。CSS framework のほうは選べない。React components, ViewComponents は面白そう。

▲ Grommet v2

Grommet 薄紫のコンポーネント。

HP (Hewlett Packard) 製.

npm grommet. 週 25,000回ぐらい。さみしい。廃れたと見てよさそう。