デザインシステムとUIライブラリを活用することで、Reactアプリケーションの一貫性と開発効率を大幅に向上させることができます。本章では、Storybookを使ったコンポーネント開発、Chakra UIやMUIの導入と拡張、型安全なテーマ管理、そしてアクセシビリティに配慮したUIコンポーネント設計について解説します。

1. Storybookを用いたコンポーネント開発とドキュメント化

Storybookとは

• UIコンポーネントの開発とテスト、ドキュメント化を効率化するツール。
• コンポーネントを独立して表示・操作可能。

Storybookの導入

npx sb init

コンポーネントの例

• ボタンコンポーネントのStory:

import React from "react";
import { Button } from "./Button";
import { Meta, Story } from "@storybook/react";

export default {
  title: "UI/Button",
  component: Button,
} as Meta;

const Template: Story<{ label: string }> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: "Click Me",
};

利点

• 開発速度の向上:
  • コンポーネントをアプリ全体から切り離してテスト可能。
• ドキュメント化:
  • コンポーネントの使用例を自動生成。

2. Chakra UIやMUIの導入と拡張

Chakra UI

• 特徴:
  • アクセシビリティに配慮したシンプルで拡張可能なUIライブラリ。
• 導入手順:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

使用例

import { ChakraProvider, Button } from "@chakra-ui/react";

const App = () => (
  <ChakraProvider>
    <Button colorScheme="teal">Click Me</Button>
  </ChakraProvider>
);

MUI (Material-UI)

• 特徴:
  • GoogleのMaterial Designに基づいたUIコンポーネントライブラリ。
• 導入手順:

yarn add @mui/material @emotion/react @emotion/styled

使用例

import { Button } from "@mui/material";

const App = () => (
  <Button variant="contained" color="primary">
    Click Me
  </Button>
);

カスタマイズ

• テーマの拡張:

  • Chakra UI:

  import { extendTheme } from "@chakra-ui/react";
  
  const theme = extendTheme({
    colors: {
      brand: {
        100: "#f7fafc",
        900: "#1a202c",
      },
    },
  });

  • MUI:

  import { createTheme } from "@mui/material/styles";
  
  const theme = createTheme({
    palette: {
      primary: {
        main: "#556cd6",
      },
    },
  });

3. 型安全なテーマ管理 (TypeScriptでテーマ型を定義)

Chakra UIの型定義

import { extendTheme, ThemeConfig } from "@chakra-ui/react";

const theme: ThemeConfig = extendTheme({
  config: {
    initialColorMode: "light",
    useSystemColorMode: false,
  },
  colors: {
    brand: {
      100: "#f7fafc",
      900: "#1a202c",
    },
  },
});

MUIの型定義

import { ThemeOptions, createTheme } from "@mui/material/styles";

const theme: ThemeOptions = createTheme({
  palette: {
    primary: {
      main: "#556cd6",
    },
  },
});

型定義の利点

• 補完機能:
  • IDEでの開発効率向上。
• 一貫性の確保:
  • カスタムテーマの誤用を防ぐ。

---

4. アクセシビリティ対応のUIコンポーネント設計

アクセシビリティの基本原則

• キーボード操作への対応:
  • フォーカス可能な要素を明示的に設定。
• ARIA属性の活用:
  • スクリーンリーダーで適切に読み上げられるように設定。

実装例

キーボード操作対応

const AccessibleButton = ({ label, onClick }: { label: string; onClick: () => void }) => (
  <button onClick={onClick} aria-label={label}>
    {label}
  </button>
);

Chakra UIでのアクセシビリティ

• Chakra UIはデフォルトでARIA属性をサポート。

import { Button } from "@chakra-ui/react";

const App = () => (
  <Button colorScheme="teal" aria-label="Submit Form">
    Submit
  </Button>
);

テストによる保証

• React Testing Libraryを使用してアクセシビリティをテスト。

import { render } from "@testing-library/react";
import { Button } from "@chakra-ui/react";

test("button has accessible role", () => {
  const { getByRole } = render(<Button>Click Me</Button>);
  expect(getByRole("button")).toBeInTheDocument();
});

---

デザインシステムとUIライブラリは、プロジェクトの統一性と効率を向上させます。本章で紹介したツールや技術を活用し、より洗練されたReactアプリケーションを構築しましょう。