React × Tailwind CSS × Emotionで実践するコンポーネント設計ガイド：デザインシステム・状態管理・再利用性の最適解

// components/atoms/Button.tsx
import { cn } from "@/utils/cn"; // Tailwindのユーティリティを結合する関数

type ButtonProps = {
  variant?: "primary" | "secondary";
  children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export const Button = ({ variant = "primary", children, className, ...props }: ButtonProps) => {
  return (
    <button
      className={cn(
        "px-4 py-2 rounded-md text-white font-medium transition",
        variant === "primary" && "bg-blue-500 hover:bg-blue-600",
        variant === "secondary" && "bg-gray-500 hover:bg-gray-600",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
};

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// components/molecules/UserCard.tsx
import { Button } from "../atoms/Button";

type UserCardProps = {
  name: string;
  avatarUrl: string;
};

export const UserCard = ({ name, avatarUrl }: UserCardProps) => {
  return (
    <div className="flex items-center p-4 border border-gray-300 rounded-lg shadow-sm">
      <img src={avatarUrl} alt={name} className="w-12 h-12 rounded-full" />
      <div className="ml-3">
        <h3 className="text-lg font-semibold">{name}</h3>
        <Button variant="primary" className="mt-2">Follow</Button>
      </div>
    </div>
  );
};

import { css } from "@emotion/react";

type ButtonProps = {
  variant?: "primary" | "secondary";
  children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

const buttonBaseStyle = css`
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
`;

const variantStyles = {
  primary: css`
    background-color: #007bff;
    &:hover {
      background-color: #0056b3;
    }
  `,
  secondary: css`
    background-color: #6c757d;
    &:hover {
      background-color: #5a6268;
    }
  `,
};

export const Button = ({ variant = "primary", children, ...props }: ButtonProps) => {
  return (
    <button css={[buttonBaseStyle, variantStyles[variant]]} {...props}>
      {children}
    </button>
  );
};

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const Button = ({ label, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};

// 親コンポーネント
const App = () => {
  const handleClick = () => {
    console.log("ボタンがクリックされました");
  };

  return <Button label="Click Me" onClick={handleClick} />;
};

const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div>
          <p>モーダルが開いています</p>
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      )}
    </div>
  );
};

const ThemeContext = createContext("light");

const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemedComponent = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>現在のテーマ: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        テーマを切り替え
      </button>
    </div>
  );
};

// アプリ全体で ThemeProvider を使用
const App = () => {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
};

type ButtonProps = {
  variant?: "primary" | "secondary" | "outline";
  size?: "small" | "medium" | "large";
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

const Button: React.FC<ButtonProps> = ({ variant = "primary", size = "medium", ...props }) => {
  const baseStyle = "px-4 py-2 font-semibold rounded";
  const variantStyles = {
    primary: "bg-blue-500 text-white",
    secondary: "bg-gray-500 text-white",
    outline: "border border-gray-500 text-gray-500",
  };
  const sizeStyles = {
    small: "text-sm px-2 py-1",
    medium: "text-base px-4 py-2",
    large: "text-lg px-6 py-3",
  };

  return (
    <button className={`${baseStyle} ${variantStyles[variant]} ${sizeStyles[size]}`} {...props} />
  );
};

type CardProps = {
  title: string;
  children: React.ReactNode;
};

const Card: React.FC<CardProps> = ({ title, children }) => {
  return (
    <div className="border p-4 shadow rounded-lg">
      <h2 className="text-xl font-bold">{title}</h2>
      <div className="mt-2">{children}</div>
    </div>
  );
};

<Card title="Profile">
  <p>Name: John Doe</p>
  <p>Age: 30</p>
</Card>

type CardProps = {
  header?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
};

const Card: React.FC<CardProps> = ({ header, footer, children }) => {
  return (
    <div className="border p-4 shadow rounded-lg">
      {header && <div className="border-b pb-2">{header}</div>}
      <div className="mt-2">{children}</div>
      {footer && <div className="border-t pt-2">{footer}</div>}
    </div>
  );
};

import { useState, useEffect } from "react";

const useFetch = <T,>(url: string) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((res) => {
        if (!res.ok) {
          throw new Error("Failed to fetch data");
        }
        return res.json();
      })
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
};

const UsersList = () => {
  const { data: users, loading, error } = useFetch<User[]>(
    "https://jsonplaceholder.typicode.com/users"
  );

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {users?.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

const Tabs = ({ children }: { children: React.ReactNode }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <div>
      <div className="flex space-x-2 border-b">
        {React.Children.map(children, (child, index) =>
          React.isValidElement(child) ? (
            <button
              className={`px-4 py-2 ${index === activeIndex ? "border-b-2 border-blue-500" : ""}`}
              onClick={() => setActiveIndex(index)}
            >
              {child.props.label}
            </button>
          ) : null
        )}
      </div>
      <div className="p-4">{React.Children.toArray(children)[activeIndex]}</div>
    </div>
  );
};

const Tab = ({ children }: { children: React.ReactNode }) => <>{children}</>;

<Tabs>
  <Tab label="Home">ホームの内容</Tab>
  <Tab label="Profile">プロフィールの内容</Tab>
  <Tab label="Settings">設定の内容</Tab>
</Tabs>

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#1E40AF", // ブルー系のメインカラー
        secondary: "#9333EA", // アクセントカラー
        background: "#F9FAFB", // 背景色
        text: "#111827", // テキストカラー
      },
    },
  },
};

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
        heading: ['Poppins', 'sans-serif'],
      },
    },
  },
};

module.exports = {
  theme: {
    extend: {
      spacing: {
        '4': '16px',
        '8': '32px',
        '12': '48px',
      },
    },
  },
};

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-opacity-80;
  }
}

const Button = ({ children }: { children: React.ReactNode }) => {
  return <button className="btn-primary">{children}</button>;
};

import { ThemeProvider } from 'next-themes';

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="light">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

// tailwind.config.js
module.exports = {
  darkMode: 'class', // ダークモードをクラスベースで適用
  theme: {
    extend: {
      colors: {
        primary: '#1e3a8a', // ブランドカラー
        secondary: '#9333ea',
      },
    },
  },
};

import { useTheme } from 'next-themes';

export default function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <button
      className="p-2 bg-primary text-white rounded"
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
    </button>
  );
}

<button aria-label="閉じる">×</button>

<h2 id="section-title">ユーザー設定</h2>
<p aria-labelledby="section-title">このセクションでは、ユーザー設定を変更できます。</p>

<input type="text" id="username" aria-describedby="username-desc" />
<p id="username-desc">ユーザー名を入力してください（半角英数字のみ）。</p>

<div role="dialog" aria-labelledby="modal-title">
  <h2 id="modal-title">設定</h2>
  <p>ここでアカウント設定を変更できます。</p>
</div>

<div tabIndex={0}>フォーカス可能な要素</div>

const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === "Escape") {
    closeModal();
  }
};

useEffect(() => {
  document.addEventListener("keydown", handleKeyDown);
  return () => document.removeEventListener("keydown", handleKeyDown);
}, []);

button {
  background-color: lightgray;
  color: white;
}

button {
  background-color: blue;
  color: white;
}

<label htmlFor="email">メールアドレス</label>
<input type="email" id="email" />

<p id="error-message" aria-live="polite">
  メールアドレスを入力してください。
</p>

import { useEffect, useRef } from "react";

const Modal = ({ isOpen, onClose }) => {
  const modalRef = useRef(null);

  useEffect(() => {
    if (!isOpen) return;

    const focusableElements = modalRef.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );

    if (!focusableElements.length) return;

    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    const handleTabKey = (event) => {
      if (event.key === "Tab") {
        if (event.shiftKey && document.activeElement === firstElement) {
          lastElement.focus();
          event.preventDefault();
        } else if (!event.shiftKey && document.activeElement === lastElement) {
          firstElement.focus();
          event.preventDefault();
        }
      }
    };

    document.addEventListener("keydown", handleTabKey);
    return () => document.removeEventListener("keydown", handleTabKey);
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div
      ref={modalRef}
      role="dialog"
      aria-modal="true"
      style={{
        position: "fixed",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        background: "white",
        padding: "20px",
        boxShadow: "0px 4px 6px rgba(0,0,0,0.1)",
      }}
    >
      <h2>モーダルタイトル</h2>
      <p>モーダルの内容です。</p>
      <input type="text" placeholder="入力フィールド" />
      <button onClick={onClose}>閉じる</button>
    </div>
  );
};

export default Modal;

MAJOR.MINOR.PATCH

{
  "version": "2.1.4",
  "dependencies": {
    "@my-ui/button": "^2.1.0"
  }
}

# Changelog

## [2.1.0] - 2025-03-06
### Added
- 新しい `Card` コンポーネントを追加
- `Button` コンポーネントに `loading` プロパティを追加

## [2.0.0] - 2025-02-20
### Breaking Changes
- `Button` コンポーネントの `size` プロパティを `small` / `medium` / `large` に変更
- `Card` コンポーネントの `onClick` イベントの引数を変更

git tag v2.1.0
git push origin v2.1.0

git checkout tags/v2.1.0

npx storybook init

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    onClick: { action: 'clicked' },
  },
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Default: Story = {
  args: {
    label: 'Click me',
  },
};

export const Primary: Story = {
  args: {
    label: 'Click me',
    primary: true,
  },
};

npm install @storybook/addon-docs

module.exports = {
  addons: ['@storybook/addon-docs'],
};

/**
 * 基本的なボタンコンポーネント
 * @param label - ボタンのラベル
 * @param onClick - クリック時のハンドラー
 */
export const Button = ({ label, onClick }: { label: string; onClick: () => void }) => {
  return <button onClick={onClick}>{label}</button>;
};