React UIコンポーネントライブラリ比較：Bootstrap vs Material UI vs Semantic UI React

UIコンポーネントライブラリを選ぶ際、見た目だけでなく、開発体験、カスタマイズ性、将来性まで考慮する必要があります。ここでは、bootstrap（React向け利用）、material-ui（現：@mui/material）、semantic-ui-react の3つを、実際の開発現場で直面する課題を中心に比較します。

⚠️ 重要なお知らせ：semantic-ui-react は GitHubリポジトリ および npmページ で「deprecated」と明記されており、新規プロジェクトでの使用は推奨されません。以下では比較のために言及しますが、選定ガイドラインでは明確に避けるよう勧告しています。

🎨 スタイルシステムとカスタマイズ方法

bootstrap：CSSクラスとユーティリティファースト

bootstrap はCSSフレームワークであり、Reactで使うには react-bootstrap や reactstrap のようなラッパーパッケージが必要です。スタイルは事前定義されたCSSクラスに依存し、カスタマイズはSCSS変数の上書きや追加CSSで行います。

// react-bootstrap を使用
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return <Button variant="primary">Click me</Button>;
}

このアプローチは軽量で学習コストが低いですが、動的なテーマ切り替えやコンポーネント単位のスタイル調整には不向きです。例えば、特定のボタンだけ色を変えたい場合、追加のCSSクラスを定義する必要があります。

material-ui（@mui/material）：JavaScript中心のテーマ制御

MUIはReact専用に設計されており、スタイルはemotion（CSS-in-JS）を内部で使用します。テーマオブジェクトを通じて、色、フォント、スペーシングなどを一元管理できます。

// @mui/material を使用
import { Button, ThemeProvider, createTheme } from '@mui/material';

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

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">Click me</Button>
    </ThemeProvider>
  );
}

テーマを動的に変更することも可能で、ダークモード切り替えなども簡単に実装できます。また、sx プロパティを使えば、インラインでレスポンシブ対応のスタイルも記述可能です。

semantic-ui-react：宣言的だが非推奨

semantic-ui-react はHTML構造を自然な形で保ちつつ、プロパティで見た目を制御します。しかし、スタイルは依然として外部CSS（semantic-ui-css）に依存しており、カスタマイズにはLESSファイルの再ビルドが必要でした。

// semantic-ui-react（非推奨）
import { Button } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

function App() {
  return <Button primary>Click me</Button>;
}

このアプローチは初期のReact時代には評価されましたが、現代のCSS-in-JSやTailwindのようなユーティリティファーストの流れとは相容れず、メンテナンスが停止された背景にもなっています。

🧩 コンポーネントAPIと開発体験

bootstrap：シンプルだが柔軟性に欠ける

react-bootstrap のコンポーネントは、ほぼBootstrapのクラス名をプロパティにマッピングしただけです。例えば、variant="success" は .btn-success クラスに対応します。これは直感的ですが、独自のインタラクションやアニメーションを追加したい場合、自前で実装する必要があります。

// react-bootstrap：制限されたAPI
<Button size="lg" variant="outline-secondary">
  Custom Action
</Button>

material-ui：豊富なプロパティと拡張性

MUIのコンポーネントは、disabled、fullWidth、color といった共通プロパティに加え、componentsProps や slots で内部要素をカスタマイズできます。さらに、styled() や useTheme() といったユーティリティで、再利用可能なコンポーネントを簡単に作れます。

// @mui/material：高度なカスタマイズ
import { styled } from '@mui/material/styles';
import { Button } from '@mui/material';

const CustomButton = styled(Button)(({ theme }) => ({
  borderRadius: 20,
  padding: '8px 24px',
  backgroundColor: theme.palette.secondary.main
}));

function App() {
  return <CustomButton>Styled Button</CustomButton>;
}

semantic-ui-react：自然なHTMLだが非推奨

semantic-ui-react は <Button primary /> のように、人間が読んでも意味が通るAPIを提供していました。しかし、内部で多くのdivラッパーを生成するため、アクセシビリティやパフォーマンスに影響を与えることもありました。また、TypeScriptサポートも弱く、最新のReact機能（例：Concurrent Mode）への対応もありません。

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

bootstrap

react-bootstrap はWAI-ARIA属性を一部サポートしていますが、完全ではありません。開発者が手動で aria-label や role を追加する必要がある場面が多いです。

material-ui

MUIはアクセシビリティを第一に設計されており、すべてのコンポーネントがWAI-ARIAガイドラインに準拠しています。また、@mui/material は @mui/utils 経由で国際化（i18n）のフックも提供しており、多言語対応も容易です。

// MUIのDatePickerでロケールを指定
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import ja from 'date-fns/locale/ja';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ja}>
      {/* DatePicker コンポーネント */}
    </LocalizationProvider>
  );
}

semantic-ui-react

アクセシビリティ対応は不十分で、多くのコンポーネントがキーボードナビゲーションやスクリーンリーダー対応を欠いていました。非推奨であるため、今後改善されることはありません。

📦 依存関係とバンドルサイズ

bootstrap

react-bootstrap 自体は軽量ですが、bootstrap CSSを含むため、全体のサイズは小さくありません。ただし、ツリーシェイキングにより未使用コンポーネントは除外できます。

material-ui

@mui/material はemotionに依存しており、初期バンドルはやや大きめですが、コード分割とツリーシェイキングにより、実際の使用分だけがバンドルされます。また、@mui/system や @mui/styled-engine といったモジュール分割により、必要な部分だけをインポート可能です。

semantic-ui-react

semantic-ui-css は1つの巨大なCSSファイルであり、ツリーシェイキングが効きません。未使用のスタイルもすべてバンドルされるため、現代の最適化要件に合いません。

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

💡 最終的なアドバイス

• シンプルなLPやブログ → bootstrap + react-bootstrap で十分です。
• 管理画面・企業アプリ・複雑なUI → @mui/material を選ぶことで、長期的な保守性と開発速度を両立できます。
• semantic-ui-react → 既存プロジェクト以外では絶対に使わないでください。代替案として、Chakra UI や MUI を検討しましょう。

UIライブラリは一度選ぶと置き換えが難しいため、技術的負債にならないよう、将来性と開発体験を慎重に見極めてください。