React UIフレームワーク比較：antd、Bootstrap、Material UI、Semantic UI React

企業向けフロントエンド開発において、UIコンポーネントライブラリの選定はアーキテクチャ全体に影響を及ぼします。ここでは、antd、bootstrap（Reactラッパー経由）、material-ui（MUI）、およびsemantic-ui-reactの技術的特性を深く掘り下げ、実際のコードを通じて比較します。

🎨 デザイン言語と一貫性

antd は Ant Design 規範に厳密に従っており、グリッド、カラーパレット、スペーシング、トーン＆マナーまで統一されています。特にデータテーブルやフォーム、ダッシュボード向けのコンポーネントが充実しています。

// antd: フォームとテーブルの例
import { Form, Input, Table } from 'antd';

const App = () => (
  <Form>
    <Form.Item label="ユーザー名">
      <Input />
    </Form.Item>
  </Form>
);

bootstrap はレスポンシブ優先の汎用CSSフレームワークで、ユーティリティクラスとプリセットコンポーネントを組み合わせて使うのが一般的です。React向けには react-bootstrap や reactstrap がよく使われます。

// react-bootstrap: ボタンとグリッド
import { Button, Container, Row, Col } from 'react-bootstrap';

const App = () => (
  <Container>
    <Row>
      <Col>
        <Button variant="primary">送信</Button>
      </Col>
    </Row>
  </Container>
);

material-ui（MUI）は Google のマテリアルデザインを実装し、マテリアルガイドラインに準拠したアニメーション、シャドウ、タイポグラフィを提供します。

// MUI: ボタンとカード
import { Button, Card, CardContent } from '@mui/material';

const App = () => (
  <Card>
    <CardContent>
      <Button variant="contained">保存</Button>
    </CardContent>
  </Card>
);

semantic-ui-react は自然言語のようなクラス名（例：<Button primary>）が特徴でしたが、現在は非推奨です。

// semantic-ui-react（非推奨）
import { Button, Card } from 'semantic-ui-react';

const App = () => (
  <Card>
    <Card.Content>
      <Button primary>確認</Button>
    </Card.Content>
  </Card>
);

⚠️ 注意：semantic-ui-react は GitHub リポジトリがアーカイブされており、npm にも「This project is no longer maintained」と記載されています。新規プロジェクトでは使用しないでください。

🎛️ スタイルとカスタマイズ

antd は Less ベースのテーマ変数を提供し、CSS 変数や ConfigProvider 経由でのカスタマイズが可能です。ただし、深いカスタマイズにはビルド設定の調整が必要になることがあります。

// antd: ConfigProvider でロケール変更
import { ConfigProvider, Button } from 'antd';
import jaJP from 'antd/locale/ja_JP';

const App = () => (
  <ConfigProvider locale={jaJP}>
    <Button>ボタン</Button>
  </ConfigProvider>
);

bootstrap は Sass 変数をオーバーライドすることでテーマをカスタマイズできます。React コンポーネント自体はスタイルを持たず、CSS に依存します。

// bootstrap: _variables.scss を上書き
$primary: #ff6b6b;
@import "bootstrap/scss/bootstrap";

material-ui は createTheme と ThemeProvider を使って、JavaScript オブジェクトベースで包括的なテーマ定義が可能です。CSS-in-JS（emotion）により、スコープされたスタイルが生成されます。

// MUI: カスタムテーマ
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: { primary: { main: '#1976d2' } }
});

const App = () => (
  <ThemeProvider theme={theme}>
    <Button variant="contained">送信</Button>
  </ThemeProvider>
);

semantic-ui-react は Less ベースのテーマカスタマイズをサポートしていましたが、現在は更新されていません。

🧩 コンポーネントの粒度と機能

antd は高度なコンポーネント（例：Table、Form、DatePicker）を提供し、内部状態管理やバリデーションを内包しています。

// antd: 高度なテーブル
import { Table } from 'antd';

const columns = [{ title: '名前', dataIndex: 'name' }];
const data = [{ key: '1', name: '田中' }];

const App = () => <Table columns={columns} dataSource={data} />;

bootstrap の React ラッパーは、基本的なコンポーネント（Modal、Navbar など）を提供しますが、複雑なロジックは自分で実装する必要があります。

// react-bootstrap: モーダル
import { Modal, Button } from 'react-bootstrap';

const App = ({ show, handleClose }) => (
  <Modal show={show} onHide={handleClose}>
    <Modal.Body>内容</Modal.Body>
    <Modal.Footer>
      <Button onClick={handleClose}>閉じる</Button>
    </Modal.Footer>
  </Modal>
);

material-ui は中間～高度なコンポーネント（DataGrid、Autocomplete）を提供し、拡張性が高いです。sx プロパティによるインラインスタイルも特徴です。

// MUI: DataGrid
import { DataGrid } from '@mui/x-data-grid';

const columns = [{ field: 'name', headerName: '名前' }];
const rows = [{ id: 1, name: '佐藤' }];

const App = () => <DataGrid rows={rows} columns={columns} />;

semantic-ui-react も同様に中級コンポーネントを提供していましたが、非推奨のため新機能追加はありません。

🌐 アクセシビリティと国際化

antd は i18n を ConfigProvider でネイティブサポートし、ARIA 属性も標準で付与されます。

material-ui も i18n に対応しており、LocalizationProvider を使って日付ピッカーなどのロケールを設定できます。アクセシビリティはマテリアルガイドラインに準拠しています。

bootstrap の React ラッパーは、基本的な ARIA 属性を提供しますが、i18n はアプリケーション側で処理する必要があります。

semantic-ui-react は当初アクセシビリティを意識していましたが、メンテナンス停止により最新の WCAG 対応は不確実です。

📦 ビルドとバンドル最適化

antd と material-ui はツリーシェイキングに対応しており、個別インポートで不要なコードを除外できます。

// 推奨：個別インポート
import Button from 'antd/es/button';
import { Button } from '@mui/material';

bootstrap の React ラッパーも同様ですが、CSS の依存関係を正しく管理する必要があります。

semantic-ui-react も個別インポート可能ですが、非推奨のため最適化ツールのサポートが遅れている可能性があります。

✅ まとめ：どのライブラリを選ぶべきか

新規プロジェクトでは、semantic-ui-react を避けて、目的に応じて antd、material-ui、または bootstrap の React ラッパーを選択してください。特に長期的な保守性とコミュニティサポートを重視するなら、活発にメンテナンスされているライブラリが安全です。