React 用 UI ライブラリとフレームワーク：アーキテクチャと保守性の比較

フロントエンド開発において、UI ライブラリの選定はプロジェクトの長期的な成功に直結する重要な決定です。ここでは、bulma、evergreen-ui、grommet、react-bootstrap、reactstrap、semantic-ui-react の 6 つを、実務的な観点から比較します。単なる機能の羅列ではなく、コードの書き方、カスタマイズの容易さ、そして将来の保守リスクに焦点を当てて解説します。

🏗️ 構成アプローチ：CSS のみ vs コンポーネントライブラリ

この 6 つのパッケージは、根本的なアプローチが異なります。bulma は CSS フレームワークであり、React コンポーネントは提供しません。一方、他の 5 つは React コンポーネントをカプセル化して提供します。

bulma はクラス名をつけるだけの CSS です。

• React の状態管理と UI ロジックを完全に分離できます。
• 自作コンポーネントにスタイルを当てたい場合に自由度が高いです。

// bulma: CSS クラスを適用するだけ
<button className="button is-primary">
  Click Me
</button>

evergreen-ui は高機能な React コンポーネントを提供します。

• 内部状態が管理されており、props で制御します。
• エンタープライズ向けの堅牢な設計が特徴です。

// evergreen-ui: コンポーネントをインポート
import { Button } from 'evergreen-ui';

<Button intent="success">Click Me</Button>

grommet も同様に React コンポーネントを提供します。

• アクセシビリティに配慮された構造を持っています。
• テーマプロバイダーで全体をラップする必要があります。

// grommet: ラベルを props で渡す
import { Button } from 'grommet';

<Button label="Click Me" primary />

react-bootstrap は Bootstrap を React 用に再実装しています。

• Bootstrap のクラス名を自動的に適用してくれます。
• React のイベントハンドリングがそのまま使えます。

// react-bootstrap: variant で色を指定
import { Button } from 'react-bootstrap';

<Button variant="primary">Click Me</Button>

reactstrap も Bootstrap ベースですが、API が少し異なります。

• color props でスタイルを制御します。
• 軽量でシンプルな構成を好む場合に選ばれます。

// reactstrap: color で色を指定
import { Button } from 'reactstrap';

<Button color="primary">Click Me</Button>

semantic-ui-react は Semantic UI の React 版です。

• 非常に豊富なコンポーネントがありますが、重くなりがちです。
• 独自のクラス名生成ロジックを持っています。

// semantic-ui-react: primary プロパティ
import { Button } from 'semantic-ui-react';

<Button primary>Click Me</Button>

📐 レイアウトシステム：グリッドとコンテナ

レイアウトをどう構築するかは、開発速度に大きく影響します。各ライブラリがどのようにグリッドやコンテナを扱っているか確認しましょう。

bulma は CSS クラスでレイアウトを定義します。

• columns と column クラスを使用します。
• 柔軟ですが、クラス名の組み合わせを覚える必要があります。

// bulma: columns クラスを使用
<div className="columns">
  <div className="column">Left</div>
  <div className="column">Right</div>
</div>

evergreen-ui は Box や Pane コンポーネントでレイアウトします。

• Flexbox の props を直接コンポーネントに渡せます。
• CSS を書かずにレイアウト調整が可能です。

// evergreen-ui: Box で Flex レイアウト
import { Box } from 'evergreen-ui';

<Box display="flex">
  <Box flex={1}>Left</Box>
  <Box flex={1}>Right</Box>
</Box>

grommet は Grid コンポーネントを提供します。

• 宣言的なグリッド定義が可能です。
• 複雑なレイアウトもコードで管理できます。

// grommet: Grid コンポーネント
import { Grid } from 'grommet';

<Grid columns={['1/2', '1/2']}>
  <div>Left</div>
  <div>Right</div>
</Grid>

react-bootstrap は Bootstrap のグリッドシステムをコンポーネント化しています。

• Container、Row、Col を組み合わせて使います。
• 慣れ親しんだ Bootstrap の構造そのままです。

// react-bootstrap: Row と Col
import { Container, Row, Col } from 'react-bootstrap';

<Container>
  <Row>
    <Col>Left</Col>
    <Col>Right</Col>
  </Row>
</Container>

reactstrap も同様の構造を持っています。

• API は react-bootstrap と非常に似ています。
• Bootstrap のドキュメントがそのまま参考になります。

// reactstrap: Row と Col
import { Container, Row, Col } from 'reactstrap';

<Container>
  <Row>
    <Col>Left</Col>
    <Col>Right</Col>
  </Row>
</Container>

semantic-ui-react は Grid コンポーネントを提供します。

• Grid.Row や Grid.Column で階層を構成します。
• 細かい制御が可能ですが、ネストが深くなりがちです。

// semantic-ui-react: Grid コンポーネント
import { Grid } from 'semantic-ui-react';

<Grid>
  <Grid.Row>
    <Grid.Column>Left</Grid.Column>
    <Grid.Column>Right</Grid.Column>
  </Grid.Row>
</Grid>

🎨 テーマとカスタマイズ

デザインをブランドに合わせるため、テーマ変更のしやすさは重要です。

bulma は SCSS 変数でカスタマイズします。

• ビルド時に CSS をコンパイルする必要があります。
• 色やフォントを一元管理しやすいです。

// bulma: SCSS 変数を上書き
$primary: #ff0000;
@import "bulma";

evergreen-ui は ThemeProvider でテーマを注入します。

• ランタイムでテーマを切り替え可能です。
• 色、タイポグラフィ、間隔などをオブジェクトで定義します。

// evergreen-ui: ThemeProvider
import { ThemeProvider } from 'evergreen-ui';

<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

grommet も Grommet コンポーネントでテーマを定義します。

• テーマオブジェクトの構造が詳細に定義されています。
• ダークモードなどの切り替えが容易です。

// grommet: Grommet コンポーネント
import { Grommet } from 'grommet';

<Grommet theme={customTheme}>
  <App />
</Grommet>

react-bootstrap は CSS カスタムプロパティ（CSS Variables）を利用します。

• Bootstrap 5 から Sass 不要のカスタマイズが可能になりました。
• CSS ファイルで変数を上書きします。

/* react-bootstrap: CSS 変数 */
:root {
  --bs-primary: #ff0000;
}

reactstrap は Bootstrap 4/5 の CSS に依存します。

• カスタマイズには Bootstrap の Sass 変数または CSS 上書きが必要です。
• react-bootstrap と同様のアプローチを取ります。

/* reactstrap: CSS 上書き */
.btn-primary {
  background-color: #ff0000;
}

semantic-ui-react はテーマファイルシステムを持っています。

• 複雑な設定ファイルを書き換える必要があります。
• カスタマイズのハードルが比較的高いです。

// semantic-ui-react: config ファイル
// src/theme.config を編集してビルド
// (設定は複雑で手間がかかります)

⚠️ 保守性と将来性

ライブラリが将来もサポートされ続けるかは、技術選定で最も重要な要素の一つです。

bulma は CSS のみのため、依存関係が少なく長持ちします。

• JavaScript のフレームワーク変更に影響されにくいです。
• 保守コストが低いのが魅力です。

evergreen-ui と grommet は企業-backed なデザインシステムです。

• 継続的なアップデートが期待できます。
• 大規模なアプリケーションでの使用に適しています。

react-bootstrap と reactstrap は Bootstrap エコシステムに依存します。

• Bootstrap が存続する限りサポートされます。
• コミュニティが大きく、情報が見つかりやすいです。

semantic-ui-react は注意が必要です。

• 元となる Semantic UI の開発は事実上停止しています。
• 新規プロジェクトでの使用は推奨されません。セキュリティ修正や新機能の追加が見込めないため、既存システムからの移行を検討すべきです。

📊 比較サマリー

💡 結論

プロジェクトの要件に応じて、以下の基準で選択してください。

• 自由度と軽量化 を求めるなら bulma が最適です。CSS 制御を自分でやりたい場合に適しています。
• エンタープライズ品質 を求めるなら evergreen-ui または grommet を選んでください。特に grommet はアクセシビリティに強いです。
• Bootstrap 生態系 を活用したいなら react-bootstrap が React 親和性が高く、reactstrap はシンプルさで優れています。
• semantic-ui-react は、メンテナンスのリスクが高いため、新規プロジェクトでは避けるべきです。

最終的には、チームの習熟度と、プロジェクトが 5 年後も保守可能かどうかを基準に判断することが重要です。