ReactとTypeScriptの基本：関数コンポーネントと型の書き方（FC型の是非）を徹底解説！
生徒
「先生、Reactの関数コンポーネントってどうやって書くんですか？」
先生
「Reactの関数コンポーネントは、JavaScriptやTypeScriptで関数を作るように簡単に書けるんだ。とてもシンプルで人気のある書き方なんだよ。」
生徒
「TypeScriptを使うと型をつけられるって聞いたけど、具体的にはどうやるんですか？」
先生
「そのとおり！Propsに型をつけて安全に開発できるようになるんだ。そして、よく議論になるのがFC型（FunctionComponent型）を使うかどうかなんだ。今日はその違いや書き方を詳しく説明するね。」
1. Reactの関数コンポーネントとは？
Reactの関数コンポーネントとは、その名の通り「関数の形をしたコンポーネント」です。従来はクラスコンポーネントがよく使われていましたが、現在ではシンプルでわかりやすい関数コンポーネントが主流です。
たとえば「挨拶を表示するコンポーネント」を作る場合、関数コンポーネントならとても短いコードで書けます。TypeScriptを使うと、受け取るデータ（Props）の型を定義できるので、間違ったデータが渡されたときに警告してくれる仕組みがあります。
2. TypeScriptで関数コンポーネントを書く基本
まずはPropsに型をつけて関数コンポーネントを書く基本的な例を見てみましょう。Propsとは、親コンポーネントから子コンポーネントに渡す値のことです。これは「お弁当箱に入れる具材」のようなイメージで、親が子に必要な情報を渡す役割を果たします。
import React from "react";
interface HelloProps {
name: string;
}
function Hello({ name }: HelloProps) {
return <h1>こんにちは、{name}さん！</h1>;
}
export default Hello;
このようにinterfaceを使うと、Propsの中身を「必ず文字列（string）」と指定できるので、誤って数字を渡したときにTypeScriptがエラーを出してくれます。
3. FC型（FunctionComponent型）とは？
ReactにはReact.FCという型が用意されています。これは「関数コンポーネントの型を簡単に書けるようにする仕組み」です。FCはFunctionComponentの略で、関数コンポーネントであることを明示する役割を持っています。
import React, { FC } from "react";
interface HelloProps {
name: string;
}
const Hello: FC<HelloProps> = ({ name }) => {
return <h1>こんにちは、{name}さん！</h1>;
};
export default Hello;
このように書くと「Helloは関数コンポーネントであり、PropsはHelloPropsです」と明確に宣言できます。コードを読む人にとってわかりやすいメリットがあります。
4. FC型を使うメリットとデメリット
FC型には便利な点と注意すべき点の両方があります。
- メリット：コードを読む人に「これは関数コンポーネントですよ」と伝えやすい。
- メリット：Propsの型を簡単に定義できる。
- デメリット：FC型を使うと暗黙的に
childrenという特別なPropsが入ってしまうため、意図せず扱う可能性がある。 - デメリット：現在のReact公式ドキュメントでは必ずしもFC型を推奨していない。
そのため、実務では「FC型を使うチーム」と「使わないチーム」があります。重要なのはプロジェクトのルールに合わせることです。
5. FC型を使わない書き方
多くのプロジェクトでは、関数そのものに型をつけずにPropsだけ定義する書き方が主流になっています。この方法はシンプルで、余計な機能を持たないため管理がしやすいという特徴があります。
interface WelcomeProps {
user: string;
}
const Welcome = ({ user }: WelcomeProps) => {
return <p>ようこそ、{user}さん！</p>;
};
この書き方なら暗黙的なchildrenは含まれず、シンプルで直感的に扱えます。初心者にも理解しやすい方法です。
6. 初心者が覚えるべきポイント
ここまでの内容を整理すると、ReactとTypeScriptを使う初心者がまず覚えるべきポイントは以下の通りです。
- 関数コンポーネントはシンプルに関数の形で書ける。
- Propsにはinterfaceを使って型をつける。
- FC型を使うかどうかはプロジェクトのルール次第。
- 初心者はまず「FC型を使わないシンプルな方法」から覚えるのがおすすめ。
こうした基本を身につけることで、ReactとTypeScriptを安心して組み合わせて使えるようになります。複雑なアプリを作る前に、この基礎をしっかり理解しておくことが大切です。
