LogoSiNan AI

第2章：React 18 コンポーネントの基礎

2024年2月25日
カテゴリー:React 18+ 入門完全ガイド

この章では、React 18におけるコンポーネントの基本について深く掘り下げていきます。モダンな開発において、コンポーネントはアプリケーションの核となる部分です。関数コンポーネントとHooks、Strictモード、TypeScriptを用いたプロパティの管理、さらに状態管理の手法について学びます。これにより、より効率的で保守性の高いReactアプリケーションの構築が可能となります。それでは、早速始めていきましょう！

2.1 関数コンポーネントとHooks

モダンなReact開発では、関数コンポーネントが主流となり、Hooksが強力な道具となっています。従来のクラスコンポーネントに代わる形で、関数コンポーネントはよりシンプルで直感的なコードを書くことができるため、アクセシビリティとパフォーマンスの面でも優れています。

例:

以下は簡単な関数コンポーネントの例です。このコンポーネントは、クリックするたびにカウントが増えるボタンを表示します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
};

export default Counter;

上記の例では、useState を使用して状態を管理しています。Hooksを利用することで、状態の管理や副作用の処理が非常に簡単になります。

2.2 Strictモード

React 18のStrictモードでは、開発中に潜在的な問題を検出しやすくするために、厳格なチェックが行われます。これにより、コンポーネントのライフサイクルに関するさまざまな注意点を考慮した開発が求められます。

注意点:

  • 重複したコンポーネントの描画を検出する機能が追加されており、未使用のコードやパフォーマンスの問題を見つけやすくなります。
  • 非推奨のAPIの使用に対して警告が表示され、より良いプラクティスにフォーカスできるように設計されています。

開発時にはStrictモードの結果を確認し、必要に応じてコードを修正することが重要です。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

2.3 コンポーネントのプロパティとTypeScript

TypeScriptを使用すると、ReactコンポーネントのPropsに型を定義し、型安全なアプリケーションを構築することができます。これにより、開発中に型に関するエラーを早期に発見できるため、コードの保守性が向上します。

例:

以下はPropsを型定義したコンポーネントの例です。

import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>こんにちは、{name}さん！</h1>;
};

export default Greeting;

Propsに型を指定することで、コンポーネントを使用する際のミスを未然に防ぐことができます。

2.4 コンポーネントの状態管理

状態管理は、Reactアプリケーションにおける重要な側面の一つです。useStateやuseReducerを使用して、コンポーネントの状態を効率的に管理し、アプリケーションの動作を制御します。

例:

useReducerを使用した状態管理の基本例を示します。

import React, { useReducer } from 'react';

type State = { count: number };
type Action = { type: 'increment' | 'decrement' };

const initialState: State = { count: 0 };

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>カウント: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>増やす</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>減らす</button>
    </div>
  );
};

export default Counter;

このように、状態管理の仕組みを利用することで、複雑な状態ロジックを効率的に管理することができます。

本章では、React 18におけるコンポーネントの基本的な知識とベストプラクティスを学びました。今後の章では、状態管理や新機能について更に深く掘り下げていきますので、次章もお楽しみに！

React
コンポーネント
Hooks
TypeScript
状態管理