目録
Reactが進化し続ける中で、そのシンプルさと強力な機能により、関数コンポーネントが開発者にとっての第一選択肢となっています。この記事では、初心者に向けて基本概念から始め、関数コンポーネントとその核心機能であるHooksについて段階的に深く理解できるよう案内します。
関数コンポーネント入門
Reactでは、コンポーネントはアプリケーションを構築する基石です。これらはアプリケーションの各独立部分を定義します。関数コンポーネントはJavaScript関数を用いて定義されるコンポーネントです。これらは入力（"props"）を受け取り、画面に表示する必要があるReact要素を返します。
function Welcome(props) {
return <h1>こんにちは、{props.name}さん</h1>;
}
クラスコンポーネントと比較して、関数コンポーネントはよりシンプルで、コンポーネントの記述を迅速かつ容易に理解できるようにします。これは学習曲線を低減させるだけでなく、コードの可読性と保守性も向上させます。
深い理解
useStateは関数コンポーネント内で状態管理を行うために使われ、useEffectはコンポーネントのマウント（初期化）と更新時の副作用処理に使用されます。useContextは、特に全体的な状態や深くネストされたコンポーネント間でのデータ伝達を簡素化するために使用されます。
useState
useStateは関数コンポーネントで状態を使うためのHookです。このHookを使用することで、関数コンポーネント内に内部状態を追加・管理でき、クラスコンポーネントへの変換なしで済みます。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>あなたは{count}回クリックしました</p>
<button onClick={() => setCount(count + 1)}>
クリックしてください
</button>
</div>
);
}
useEffect
useEffectは関数コンポーネント内で副作用を扱うHookです。データフェッチ、購読、またはReactコンポーネント内のDOMの手動変更など、useEffectはこれらの副作用処理にとって非常に役立ちます。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `あなたは${count}回クリックしました`;
});
return (
<div>
<p>あなたは{count}回クリックしました</p>
<button onClick={() => setCount(count + 1)}>
クリックしてください
</button>
</div>
);
}
useStateとuseEffectの使用により、関数コンポーネントでの状態管理と副作用の処理が効率的に行えるようになり、開発の効率とコンポーネントの表現力が大幅に向
上します。
useContext
useContext Hookは、コンポーネントツリーをまたいで複数の階層にわたって直接データを渡すことを可能にします。これにより、各階層でpropsを手動で渡す手間が省けます。これは、テーマやユーザー情報などの全体的なデータ共有に特に有用です。
例
多くのコンポーネントでアクセスが必要なユーザーテーマ設定（「ダークモード」/「ライトモード」など）を持っている場合、useContextを使用してこれらの設定を共有できます。
- Contextを作成する：
import React, { createContext, useContext, useState } from 'react';
// Contextの作成
const ThemeContext = createContext();
- 最上位のコンポーネントでContext値を提供する：
function App() {
const [theme, setTheme] = useState('light'); // デフォルトテーマを「ライトモード」とする
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<ChildComponent />
</ThemeContext.Provider>
);
}
-
Contextを必要とするコンポーネントで
useContextを使用する：
function ChildComponent() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<div>
<p>現在のテーマは{theme}です</p>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
テーマを切り替え
</button>
</div>
);
}
この方法により、ThemeContext.Provider内でネストされた任意のコンポーネントは、複雑なpropsの受け渡しを行わずにthemeとsetThemeにアクセスできます。これにより、コンポーネント間でのデータ共有と状態管理が大幅に簡素化されます。
を用いた関数コンポーネント
TypeScriptを導入すると、関数コンポーネントで強い型の利点を享受できます。コンポーネントのpropsと状態に型を定義することで、コードの可読性と保守性が向上します。
import React, { useState } from 'react';
type Props = {
name: string;
};
const Welcome: React.FC<Props> = (props) => {
return <h1>こんにちは、{props.name}さん</h1>;
};
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0); // 状態の型をジェネリックで定義
return (
<div>
<p>あなたは{count}回クリックしました</p>
<button onClick={() => setCount(count + 1)}>
クリックしてください
</button>
</div>
);
};
TypeScriptを使用することで、コンポーネントの属性が期待通りであることを保証できるだけでなく、開発プロセス中にコードの自動補完と型チェックの利点も享受できます。