プログラミング

Reactコンポーネントとは？UI部品の作り方から設計パターンまで徹底解説

師田 賢人
32分で読める 0
memory-1761599_1280

目次

Reactを学ぶことは、コンポーネントを学ぶことと同義です。コンポーネントは、Reactアプリケーションを構築するための最も基本的かつ重要な「ビルディングブロック」であり、その設計思想を理解することが、効率的でメンテナンス性の高いUI開発の鍵となります。本記事では、「コンポーネントって一体何？」という基本から、具体的な書き方、責務を分離するための設計パターン、そしてパフォーマンスや品質を高めるための実践的なテクニックまで、Reactコンポーネントのすべてを網羅的に解説します。

Reactコンポーネントの本質：UIを構築する思想

コンポーネントとは何か：部品化による開発革命

Reactコンポーネントとは、UI（ユーザーインターフェース）を構成する、独立して再利用可能な部品のことです。この概念を理解するために、従来のWeb開発と比較してみましょう。

従来のHTMLでは、ページ全体を一つの大きなファイルとして記述していました：

html




  
My Website

  




  

    
Card Title

    
Card content...

  

  
  

    
Another Card

    
More content...

Reactでは、これを独立した部品（コンポーネント）として分割します：

jsx

// Headerコンポーネント
function Header() {
  return (
    

      
My Website

      
    

  );
}

// Cardコンポーネント（再利用可能）
function Card({ title, content }) {
  return (
    

      
{title}

      
{content}

    

  );
}

// それらを組み合わせて画面を構成
function App() {
  return (
    

      

      

        
        
      

    

  );
}

この部品化アプローチがもたらす利点は計り知れません。同じCardコンポーネントを異なる場所で再利用でき、一箇所の修正がすべての使用箇所に反映され、各部品を独立してテストできます。

関数コンポーネント：現代Reactの標準形

現在のReact開発では、関数コンポーネントが完全に主流となっています。その理由を、実際のコードで見てみましょう。

シンプルなコンポーネントの例：

jsx

// 最もシンプルな関数コンポーネント
function Welcome({ name }) {
  return 
Hello, {name}!
;
}

// アロー関数でも定義可能
const Welcome = ({ name }) => {
  return 
Hello, {name}!
;
};

// returnが1行の場合は省略記法も使える
const Welcome = ({ name }) => 
Hello, {name}!
;

より実践的なコンポーネント：

jsx

function UserProfile({ user, onEdit, onDelete }) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    

      

        {user.name}
        
{user.name}

        
      

      
      {isExpanded && (
        

          
Email: {user.email}

          
Joined: {new Date(user.joinedAt).toLocaleDateString()}

          

            
            
          

        

      )}
    

  );
}

関数コンポーネントの美しさは、その直感的な構造にあります。引数としてpropsを受け取り、JSXを返す。それだけで立派なReactコンポーネントになるのです。

JSXと仮想DOM：宣言的UIの実現

JSXは、JavaScriptの中にHTMLのような構文を書ける拡張記法です。しかし、これは単なる構文糖ではありません。

jsx

// JSXで書いたコード
const element = (
  

    
Hello, {name}

    
Welcome to React!

  

);

// 実際にはこのようなJavaScriptに変換される
const element = React.createElement(
  'div',
  { className: 'greeting' },
  React.createElement('h1', null, 'Hello, ', name),
  React.createElement('p', null, 'Welcome to React!')
);

この変換により、Reactは仮想DOMという軽量なJavaScriptオブジェクトのツリーを作成します。状態が変更されると、新しい仮想DOMツリーが作成され、前回との差分が計算されます：

jsx

function Counter() {
  const [count, setCount] = useState(0);

  // countが変更されるたびに、新しい仮想DOMが作成される
  // Reactは差分を検出し、変更された部分だけを実DOMに反映
  return (
    

      
Count: {count}

      
    

  );
}

この仕組みにより、開発者は「UIがどのように変化するか」ではなく、「UIがどうあるべきか」を宣言的に記述できるのです。

単一責任の原則：優れたコンポーネント設計の基礎

優れたコンポーネントは、単一の責任だけを持ちます。これを実践的な例で見てみましょう。

悪い例：責任が混在したコンポーネント

jsx

// ❌ データ取得、状態管理、表示のすべてを担当
function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  const filteredUsers = users.filter(user => 
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  if (loading) return 
Loading...
;

  return (
    

       setSearchTerm(e.target.value)}
        placeholder="Search users..."
      />
      
    
        {filteredUsers.map(user => (
          
  • 
            {user.name}
            {user.name}
            {user.email}
          
    • 
        ))}
      

    

  );
}

良い例：責任を分離したコンポーネント

jsx

// ✅ 検索フィールドコンポーネント（検索UIのみ）
function SearchField({ value, onChange, placeholder }) {
  return (
     onChange(e.target.value)}
      placeholder={placeholder}
    />
  );
}

// ✅ ユーザーアイテムコンポーネント（1人分の表示のみ）
function UserItem({ user }) {
  return (
    
  • 
      {user.name}
      {user.name}
      {user.email}
    
    • 
  );
}

// ✅ ユーザーリストコンポーネント（リスト表示のみ）
function UserList({ users }) {
  return (
    
      
      {users.map(user => (
        
      ))}
    
    
  );
}

// ✅ コンテナコンポーネント（データ取得とフィルタリングロジック）
function UserListContainer() {
  const [searchTerm, setSearchTerm] = useState('');
  const { data: users, loading } = useFetch('/api/users');

  const filteredUsers = users?.filter(user => 
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  ) || [];

  if (loading) return 
    Loading...
    ;

  return (
    
    
      
      
    
    
  );
}

    この分離により、各コンポーネントは独立してテスト可能になり、再利用性も大幅に向上します。

    コンポーネントの基本文法：動的UIの実現

    propsとchildren：データの受け渡し

    propsは、親コンポーネントから子コンポーネントへデータを渡すための仕組みです。実践的な使い方を見ていきましょう。

    基本的なpropsの使い方：

    jsx

    // Buttonコンポーネント
function Button({ variant, size, onClick, disabled, children }) {
  const className = `btn btn-${variant} btn-${size}`;
  
  return (
    
  );
}

// 使用例
function App() {
  return (
    
    
      
      
      
    
    
  );
}

    childrenを活用した柔軟なコンポーネント：

    jsx

    // Cardコンポーネント
function Card({ title, footer, children }) {
  return (
    
    
      {title && (
        
    
          
    {title}
    
        
    
      )}
      
      
    
        {children}
      
    
      
      {footer && (
        
    
          {footer}
        
    
      )}
    
    
  );
}

// 使用例
function ProductCard({ product }) {
  return (
     addToCart(product.id)}>
          Add to Cart
        
      }
    >
      {product.name}
      
    ${product.price}
    
      
    {product.description}
    
        
  );
}

    stateによるインタラクティブなUI

    stateは、コンポーネントが内部で管理する動的なデータです。ユーザーの操作に応じて変化するUIを実現します。

    フォームの状態管理：

    jsx

    function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    // エラーをクリア
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ''
      }));
    }
  };

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.email) newErrors.email = 'Email is required';
    else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = 'Email is invalid';
    }
    if (!formData.message) newErrors.message = 'Message is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!validate()) return;
    
    setIsSubmitting(true);
    try {
      await submitForm(formData);
      alert('Form submitted successfully!');
      // フォームをリセット
      setFormData({ name: '', email: '', message: '' });
    } catch (error) {
      alert('Submission failed. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    
    
      
    
        
        
        {errors.name && {errors.name}}
      
    

      
    
        
        
        {errors.email && {errors.email}}