React関数コンポーネントの探求

# 目録
- [1. 関数コンポーネント入門](#関数コンポーネント入門)
- [2. Hookの深い理解](#深い理解)
    - [2.1 useState](#useState)
    - [2.2 useEffect](#useEffect)
    - [2.3 useContext](#useContext)
- [3. TypeScriptを用いた関数コンポーネント](#を用いた関数コンポーネント)
- [4. 次の文章](#次の文章)

Reactが進化し続ける中で、そのシンプルさと強力な機能により、関数コンポーネントが開発者にとっての第一選択肢となっています。この記事では、初心者に向けて基本概念から始め、関数コンポーネントとその核心機能であるHooksについて段階的に深く理解できるよう案内します。

# 関数コンポーネント入門

Reactでは、コンポーネントはアプリケーションを構築する基石です。これらはアプリケーションの各独立部分を定義します。関数コンポーネントはJavaScript関数を用いて定義されるコンポーネントです。これらは入力（"props"）を受け取り、画面に表示する必要があるReact要素を返します。

```jsx
function Welcome(props) {
  return <h1>こんにちは、{props.name}さん</h1>;
}
```

クラスコンポーネントと比較して、関数コンポーネントはよりシンプルで、コンポーネントの記述を迅速かつ容易に理解できるようにします。これは学習曲線を低減させるだけでなく、コードの可読性と保守性も向上させます。

# 深い理解

`useState`は関数コンポーネント内で状態管理を行うために使われ、`useEffect`はコンポーネントのマウント（初期化）と更新時の副作用処理に使用されます。`useContext`は、特に全体的な状態や深くネストされたコンポーネント間でのデータ伝達を簡素化するために使用されます。

## useState

`useState`は関数コンポーネントで状態を使うためのHookです。このHookを使用することで、関数コンポーネント内に内部状態を追加・管理でき、クラスコンポーネントへの変換なしで済みます。

```jsx
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`はこれらの副作用処理にとって非常に役立ちます。

```jsx
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`を使用してこれらの設定を共有できます。

1. **Contextを作成する**：

```jsx
import React, { createContext, useContext, useState } from 'react';

// Contextの作成
const ThemeContext = createContext();
```

2. **最上位のコンポーネントでContext値を提供する**：

```jsx
function App() {
  const [theme, setTheme] = useState('light'); // デフォルトテーマを「ライトモード」とする

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

3. **Contextを必要とするコンポーネントで`useContext`を使用する**：

```jsx
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`と状態に型を定義することで、コードの可読性と保守性が向上します。

```tsx
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を使用することで、コンポーネントの属性が期待通りであることを保証できるだけでなく、開発プロセス中にコードの自動補完と型チェックの利点も享受できます。

# 次の文章

[Reactで避けるべき useState の間違い](https://qiita.com/ORCHESTRA_TAPE/items/e9678eeba5cde73775a7 "useStateの不適当使用")