TL;DR

このページでは、ReactElement の実装方法について詳しく解説しますね。一言で言うと、ReactElement とは React の JSX 要素を表現するための型です。React において、UI を構築する際の基礎的な要素を表現するために使われます。

ReactElement とは？

ReactElement は React の世界で最も基本的な建設ブロックです。それは単なる JavaScript オブジェクトで、React コンポーネントが画面に何を描画すべきかを記述します。具体的には、ReactElement はコンポーネント（または DOM タグ）の型、それが受け取る props、そして子要素を保持します。

以下に、ReactElement の非常に基本的な使用例を示します。

const element: ReactElement = <h1>Hello, world</h1>

上記のコードでは、ReactElement のインスタンスである element を作成しています。このインスタンスは <h1> タグとその子要素であるテキスト 'Hello, world' を表現しています。

ReactNode, ReactChild, ReactElement の違い

以下に、それぞれの型の主な用途を示す表を作成しました。ReactNode, ReactChild, ReactElement の違いです。

これらの型は、コード内で要素やコンポーネントを適切に型付けするために用いられます。どの型を使用するべきかは、特定の状況や要件によります。

React の主要な型についての関係図は以下のようになります。

ReactNode
  └── ReactChild
      ├── ReactElement
      ├── ReactText (string | number)
      └── boolean | null | undefined

これらは、React の様々な値がどのように型付けされるかを説明します。

ReactNode

これは React が描画することが可能なもの全てを表す型です。具体的には以下のものが含まれます。

• ReactElement
• ReactFragment
• ReactPortal
• string
• number
• boolean
• null
• undefined

ReactChild

これはReactNodeの一部を表す型で、React が子要素として扱うことが可能なものを示します。

• ReactElement
• string
• number
• boolean
• null
• undefined

ReactElement

これは React のコンポーネント（関数コンポーネントやクラスコンポーネント）または DOM 要素（div、span、inputなど）から生成されるオブジェクトを表します。この型は主に React のcreateElement関数の戻り値として使われます。

これらの型は React の仮想 DOM で非常に重要な役割を果たし、React の描画システムがどのように動作するかを理解するのに役立ちます。

Next.js で、ReactElement を実装

では、Next.js と TypeScript を使って ReactElement の具体的な使用例を見てみましょう。以下に、シンプルな Next.js ページコンポーネントを示します。

pages/index.tsx

import { ReactElement } from 'react'

type Props = {
  message: string
}

const HomePage = ({ message }: Props): ReactElement => {
  return <h1>{message}</h1>
}

export default HomePage

上記のコードでは、ReactElement を返す関数コンポーネント HomePage を定義しています。HomePage コンポーネントは message という名前の prop を受け取り、そのメッセージを <h1> タグの中に描画します。

コンポーネントが ReactElement を返すと明示することで、TypeScript はコンポーネントが正しい JSX を返すことを確認します。もしコンポーネントが JSX 以外のもの（例えば数値や文字列など）を返そうとすると、TypeScript はエラーを出します。

ReactElement のプロパティ

ReactElement は、その要素に関する情報を保持するプロパティをいくつか持っています。以下に、それらの主要なプロパティについて説明します。

import React, { ReactElement } from 'react'

const element: ReactElement = <h1>Hello, world</h1>

console.log(element.type) // => 'h1'
console.log(element.props.children) // => 'Hello, world'

type プロパティは、要素の型を表します。上記の例では、element.type は 'h1' を返します。また、props プロパティは、要素に渡された props を格納します。この例では、element.props.children は 'Hello, world' を返します。

ReactElement の活用

ReactElement は、コンポーネントのレンダリングをカスタマイズする際に有効に活用できます。例えば、子要素を動的に操作したり、ある条件下で特定の要素を描画したりすることができます。

以下に、ReactElement を活用したコンポーネントの例を示します。

components/CustomComponent.tsx

import { ReactElement, ReactNode } from 'react'

type Props = {
  children: ReactNode
  condition: boolean
}

const CustomComponent = ({ children, condition }: Props): ReactElement => {
  if (condition) {
    return <div>{children}</div>
  } else {
    return <div>条件に合致しませんでした。</div>
  }
}

export default CustomComponent

この CustomComponent は、condition prop が true の場合には子要素を描画し、そうでない場合にはデフォルトのメッセージを描画します。このように、ReactElement を使うことで、要素の描画を動的に制御することができます。