関数コンポーネントの定義

ReactではUIを構築する単位として「コンポーネント」を用います。その中でも最も一般的なのが、関数コンポーネント（Function Component）です。

このドキュメントでは、TypeScript（TSX）ベースでの関数コンポーネントの定義方法を解説します。

1. 基本構文（引数なし）

最もシンプルなコンポーネントは、引数（props）を受け取らず、JSXを返すだけの関数です。

const Hello = () => {
  return 
<h1>Hello, World!</h1>;
};

export default Hello;

2. propsを受け取る関数コンポーネント

コンポーネントに外部から値を渡す場合は、propsを引数として受け取ります。

type Props = {
  name: string;
};

const Greeting = ({ name }: Props) => {
  return 
<p>Hello, {name}!</p>;
};

export default Greeting;

✅ TypeScriptではProps型を定義して明示するのがベストプラクティスです。

3. React.FC（Functional Component）を使う形式

React.FC（旧: React.FunctionComponent）は、childrenの自動型推論や明示的な関数型アノテーションを提供します。

import { FC } from "react";

type Props = {
  message: string;
};

const Alert: FC
<Props> = ({ message }) => {
  return <div className="alert">{message}</div>;
};

export default Alert;

4. アロー関数以外の書き方（通常の関数定義）

function Title(): JSX.Element {
  return 
<h2>タイトル</h2>;
}

この形式でも問題ありませんが、アロー関数（const … = () =>）の方が一貫性を保ちやすいため、近年は主流となっています。

5. JSX.Elementとは？

返り値の型を指定する場合、通常は以下のどちらかを使用します：

• JSX.Element: JSXを返すことを明示
• React.ReactNode: null, string, JSX などを含む幅広い表現

const Logo = (): JSX.Element => {
  return <img src="/logo.png" alt="logo" />;
};

関数コンポーネントはReact開発の基本です。シンプルなUIの部品から始めて、propsやhooksを使いながら柔軟な構成を作っていく土台になります。