{/* ageはオプショナルなので省略可能 */}
  <Greet name="Bob" />

  {/* 型エラーが発生する例 (nameがnumber型) */}
  {/* <Greet name={123} /> */}

  {/* 型エラーが発生する例 (必須のnameプロパティがない) */}
  {/* <Greet /> */}
</div>

);
};

export default App;
``
上記の例では、GreetPropsインターフェースでGreetコンポーネントが受け取るPropsの型を定義しています。Greet: React.FCとすることで、このコンポーネントはGreetProps型のPropsを受け取ることを型システムに伝えています。これにより、App.tsxでGreet` コンポーネントを使用する際に、正しい型のPropsが渡されているかどうかがコンパイル時にチェックされます。

3.4. TSX環境のセットアップ (tsconfig.json の設定)

TSXを使用するためには、TypeScriptプロジェクトとして設定が必要です。主に tsconfig.json ファイルでコンパイラのオプションを設定します。

ReactプロジェクトでTSXを使用する場合、最低限必要な tsconfig.json の設定は以下のようになります。

json
{
"compilerOptions": {
// ターゲットとなるJavaScriptのバージョン
"target": "es5",
// 使用するモジュールシステム
"module": "esnext",
// JSXの扱いを指定。"react", "react-jsx", "react-native"など
// React 17以降では "react-jsx" を推奨
"jsx": "react-jsx",
// esModuleInteropを有効にして、CommonJSモジュールとESモジュールの相互運用を容易にする
"esModuleInterop": true,
// strict: true は強力な型チェックを有効にするため強く推奨
"strict": true,
// モジュール解決方法 (Node.jsのようにモジュールを探す)
"moduleResolution": "node",
// 型定義ファイルを探す場所
"types": ["react", "react-dom"],
// 出力ディレクトリ
"outDir": "./dist",
// ソースマップを生成するか
"sourceMap": true,
// コンパイル対象ファイル
"rootDir": "./src",
// tsconfig.json のディレクトリを基準とする
"baseUrl": "./",
// エイリアス設定など (必要に応じて)
// "paths": { ... }
},
"include": [
// コンパイル対象に含めるファイルやディレクトリ
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
// コンパイル対象から除外するファイルやディレクトリ
"node_modules"
]
}

• "jsx": "react-jsx": JSXをReact 17以降の新しいJSX Transform (_jsx 関数など) に変換するように指定します。これにより、ReactをインポートせずにJSXを使用できるようになります（import React from 'react'; が不要になります）。古いReactやJSX Transformを使用しない場合は "react" を指定します。
• "types": ["react", "react-dom"]: @types/react と @types/react-dom パッケージに含まれる型定義ファイルを読み込むように指定します。これらのパッケージは、ReactとReactDOMのJavaScriptコードに対応するTypeScriptの型情報を提供します。Reactを使うTSXプロジェクトでは必須です。
• "strict": true: TypeScriptの厳密な型チェックオプションを全て有効にします。これにより、より多くの潜在的なエラーを開発段階で検出できるようになるため、特別な理由がない限り有効にすることを強く推奨します。

これらの設定に加え、プロジェクトによってはLinter（ESLint + TypeScript ESLint）やFormatter（Prettier）を導入することで、コード品質と可読性をさらに向上させることができます。create-react-app のTypeScriptテンプレートや Vite のReact + TypeScriptテンプレートを使用すると、これらの設定済み環境が容易に手に入ります。

4. TSXによるReactコンポーネントの型付け

TSXの最大の強みは、Reactコンポーネントに対して強力な型付けを行える点です。ここでは、関数コンポーネント、クラスコンポーネント、フック、イベントハンドラなどの型付け方法を詳しく見ていきます。

4.1. 関数コンポーネントの型付け

Reactの主流である関数コンポーネントの型付けは、Propsの型定義が中心となります。

• Propsの型定義: Propsの型は、インターフェースまたは型エイリアスを使って定義します。

  “`typescript
  // Interfaceを使用する場合
  interface ButtonProps {
  text: string;
  onClick: (event: React.MouseEvent) => void; // イベントハンドラの型付け
  disabled?: boolean; // オプショナル
  }

  // Type Aliasを使用する場合
  type ButtonPropsType = {
  text: string;
  onClick: (event: React.MouseEvent) => void;
  disabled?: boolean;
  };
  “`
  どちらを使っても構いませんが、一貫性を保つことが重要です。

• コンポーネントへの型適用: 定義したProps型を関数コンポーネントに適用します。

  • 非推奨となりつつある React.FC (または React.FunctionComponent) を使用する方法:

    “`tsx
    import React from ‘react’;

    interface ButtonProps {
    text: string;
    onClick: (event: React.MouseEvent) => void;
    disabled?: boolean;
    }

    // React.FC として定義
    const Button: React.FC = (props) => {
    // propsオブジェクトからPropsにアクセス
    return (
    
    {props.text}
    
    );
    };

    export default Button;

    // デストラクチャリングを使用する場合
    const ButtonWithDestructure: React.FC = ({ text, onClick, disabled }) => {
    return (
    
    {text}
    
    );
    };
    ``React.FCはコンポーネントの戻り値型（React.ReactElement | null）を含んでおり、かつProps型に自動的にchildrenプロパティを追加していました。しかし、このchildrenの自動追加が意図しない挙動（children` を受け取らないコンポーネントでも型エラーにならない）や、ジェネリックコンポーネントとの相性の問題などから、React v18以降では非推奨とされつつあります。

  • 現在の推奨スタイル（Propsを明示的に型付け）: React.FC を使わず、Propsオブジェクトを直接型付けします。子要素を受け取る場合は PropsWithChildren ユーティリティ型を使用します。

    “`tsx
    import React, { PropsWithChildren } from ‘react’;

    interface ButtonProps {
    text: string;
    onClick: (event: React.MouseEvent) => void;
    disabled?: boolean;
    }

    // Propsオブジェクトを直接型付けする（子要素を受け取らない場合）
    const Button: React.VFC = ({ text, onClick, disabled }) => { // VFCはReact v18で非推奨
    return (
    
    {text}
    
    );
    };

    // 最も一般的で推奨されるスタイル（子要素を受け取らない場合）
    // React.VFC も v18 で非推奨になったため、純粋なアロー関数として定義
    const Button: ({ text, onClick, disabled }: ButtonProps) => React.ReactElement | null = ({ text, onClick, disabled }) => {
    return (
    
    {text}
    
    );
    };
    // もしくは戻り値型を省略（推論に任せる）
    const Button = ({ text, onClick, disabled }: ButtonProps) => {
    return (
    
    {text}
    
    );
    };

    // 子要素 (children) を受け取る場合
    interface ContainerProps {
    title: string;
    }

    // PropsWithChildren を使用する
    const Container: React.FC> = ({ title, children }) => { // ここでの React.FC は戻り値型のため。v18以降はアロー関数＋PropsWithChildrenがより推奨
    return (

    {title}

    {children}

    );
    };

    // 最も一般的で推奨されるスタイル（子要素を受け取る場合）
    const Container = ({ title, children }: PropsWithChildren) => {
    return (

    {title}

    {children}

    );
    };

    export default Container;
    ``
React v18以降、React.FCの使用は非推奨とされています。最も推奨されるのは、関数コンポーネントの引数（Propsオブジェクト）に直接型を付ける方法です。子要素を受け取る場合は、Propsの型にPropsWithChildrenのようにPropsWithChildren` ユーティリティ型を組み合わせるのが最も安全で推奨される方法です。

4.2. クラスコンポーネントの型付け

Reactのクラスコンポーネントは、ジェネリック型である React.Component<Props, State> を拡張して定義します。第一引数にPropsの型、第二引数にStateの型を指定します。

“`tsx
import React, { Component } from ‘react’;

interface CounterProps {
initialValue?: number; // 初期値（オプショナル）
}

interface CounterState {
count: number;
}

// React.Component
class Counter extends Component {
// Propsのデフォルト値を設定する場合（非推奨になりつつあるが、古いコードで見る可能性あり）
// static defaultProps: Partial = {
// initialValue: 0,
// };

constructor(props: CounterProps) {
super(props); // Propsを受け取る

// Stateの初期値の設定
this.state = {
  // Propsから初期値を受け取る。受け取らない場合はデフォルト値（0）
  count: props.initialValue ?? 0, // Nullish Coalescing Operator (??) を使用
};

}

// メソッドの型付け
increment = () => {
this.setState(prevState => ({
count: prevState.count + 1,
}));
};

render() {
const { count } = this.state; // Stateへのアクセス
const { initialValue } = this.props; // Propsへのアクセス

return (
  <div>
    <p>Count: {count}</p>
    <p>Initial Value: {initialValue ?? 'N/A'}</p>
    <button onClick={this.increment}>Increment</button>
  </div>
);

}
}

export default Counter;
``
クラスコンポーネントでは、this.propsとthis.stateにそれぞれ指定した型が適用されます。コンストラクターでPropsを受け取る際や、setStateメソッドを使用する際にも型チェックが行われます。Propsのデフォルト値については、staticdefaultPropsの代わりに、コンストラクタ内でNullish Coalescing (??) や論理OR (||`) を使用するか、関数コンポーネントのようにデフォルト引数を使用する方がTypeScriptフレンドリーです。

4.3. イベントハンドラの型付け

Reactのイベントシステムはブラウザのネイティブイベントをラップしています。Reactのイベントオブジェクトには、TypeScriptの型定義が用意されています。適切なイベント型を使用することで、イベントオブジェクトのプロパティに安全にアクセスできます。

イベントハンドラ関数の型は、React.SyntheticEvent またはその派生型を使用します。派生型はイベントの種類（クリック、変更、フォーム送信など）と対象要素の型によって決まります。

• 主なイベント型:

  • React.MouseEvent<T>: クリックイベントなど、マウスに関連するイベント。<T> はイベントが発生した要素の型（例: HTMLButtonElement, HTMLDivElement）。
  • React.ChangeEvent<T>: 入力要素の値変更イベント。<T> はイベントが発生した要素の型（例: HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement）。
  • React.FormEvent<T>: フォームに関連するイベント（submitなど）。<T> はイベントが発生した要素の型（例: HTMLFormElement）。
  • React.KeyboardEvent<T>: キーボードイベント。
  • React.FocusEvent<T>: フォーカスイベント。

• イベントハンドラ関数の型:

  “`typescript
  // ボタンのクリックイベントハンドラ
  const handleClick = (event: React.MouseEvent) => {
  console.log(‘Button clicked’, event.currentTarget); // currentTarget などに安全にアクセス
  };

  // 入力フィールドの値変更イベントハンドラ
  const handleChange = (event: React.ChangeEvent) => {
  console.log(‘Input value:’, event.target.value); // target.value に安全にアクセス
  };

  // フォーム送信イベントハンドラ
  const handleSubmit = (event: React.FormEvent) => {
  event.preventDefault(); // デフォルトの送信を防ぐ
  console.log(‘Form submitted’);
  };
  “`

• TSXでの利用例:

  “`tsx
  import React from ‘react’;

  const MyForm: React.FC = () => {
  const [value, setValue] = React.useState(”);

  const handleInputChange = (event: React.ChangeEvent) => {
  setValue(event.target.value); // event.target は推論されるか、明示的に型付け
  };

  const handleButtonClick = (event: React.MouseEvent) => {
  alert(Current value: ${value});
  };

  const handleFormSubmit = (event: React.FormEvent) => {
  event.preventDefault();
  console.log(‘Submitted:’, value);
  };

  return (

  
  Show Value {/ type=”button” を指定しないとフォーム送信になる /}
  Submit
  

  );
  };

  export default MyForm;
  ``
イベントハンドラの型を正しく指定することで、イベントオブジェクトから取得できるプロパティ（target,currentTarget,preventDefault,stopPropagation` など）に対する型補完やエラーチェックが有効になります。

4.4. useState フックの型付け

useState フックは、コンポーネントに状態を持たせるために使われます。TypeScriptは、useState の初期値からStateの型を自動的に推論することが多いですが、より安全な型付けのためには明示的な型指定が推奨されます。

• 初期値からの型推論:

  tsx
const [count, setCount] = React.useState(0); // count は number 型と推論される
const [name, setName] = React.useState('Alice'); // name は string 型と推論される
const [isLoading, setIsLoading] = React.useState(false); // isLoading は boolean 型と推論される
const [items, setItems] = React.useState([]); // items は any[] 型と推論される (初期値が空配列の場合、any[] になりやすい)
  初期値がプリミティブ型の場合は問題ありませんが、空配列や null で初期化する場合、TypeScriptが型を正確に推論できないことがあります。

• 明示的な型指定: useState のジェネリック引数としてStateの型を指定します。

  “`tsx
  // 配列の型を明示的に指定
  interface Item {
  id: number;
  name: string;
  }
  const [items, setItems] = React.useState([]); // items は Item[] 型となる

  // Union型を指定 (null を含む場合など)
  interface User {
  id: number;
  name: string;
  }
  const [user, setUser] = React.useState(null); // user は User または null 型となる

  // 関数の型を指定
  type MyFunction = () => void;
  const [myFunc, setMyFunc] = React.useState(undefined);

  // 初期値と異なる型を指定する場合 (稀)
  const [value, setValue] = React.useState(0); // value は string | number 型となる
  ``
特にStateがオブジェクト、配列、またはnull/undefined` を取りうる場合は、明示的に型を指定することで、より安全なState管理が可能になります。

4.5. useEffect フックの型付け

useEffect フックは副作用（データの取得、DOM操作、購読設定など）を行うために使われます。useEffect 自体は戻り値としてクリーンアップ関数を返すことがありますが、それ以外の特別な型付けは通常必要ありません。

useEffect のコールバック関数は、クリーンアップ関数（関数または undefined）を返すことができます。TypeScriptはこの戻り値の型を自動的に推論します。

“`tsx
import React, { useState, useEffect } from ‘react’;

interface DataItem {
id: number;
value: string;
}

const DataFetcher: React.FC = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
// ここでAPI呼び出しなどを行う
const response = await fetch(‘/api/data’);
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
const result: DataItem[] = await response.json(); // データの型をAssertionまたはfetch関数に型付け
setData(result);
setError(null);
} catch (err: any) { // fetchやJSON.parseのエラーはanyになる可能性あり。適切なエラーハンドリングと型ガードを検討
setError(err.message);
} finally {
setLoading(false);
}
};

fetchData();

// クリーンアップ関数 (例: タイマーの解除、購読の中止)
return () => {
  // ... クリーンアップ処理 ...
};

}, []); // 空の依存配列はマウント時に一度だけ実行、アンマウント時にクリーンアップ実行

if (loading) return

Loading…

;
if (error) return

Error: {error}

;

return (

{data.map(item => (
• {item.value}

))}

);
};

export default DataFetcher;
``useEffect自体に対する複雑な型付けは不要ですが、useEffect内で行う処理（APIからのレスポンス、イベントリスナー、タイマーなど）に関連するStateや変数の型付けが重要になります。上記の例では、取得したデータの型 (DataItem[]) やエラーの状態 (string | null`) を型付けしています。

4.6. useRef フックの型付け

useRef フックは、コンポーネントのレンダー間で変更されない可変値を保持したり、DOMノードへの参照を取得したりするために使われます。

• DOM要素への参照: DOM要素への参照を保持する場合、参照する要素の型（例: HTMLInputElement, HTMLDivElement）を指定します。初期値は null となることが多いです。

  “`tsx
  import React, { useRef, useEffect } from ‘react’;

  const InputFocus: React.FC = () => {
  // input 要素への参照を保持。初期値は null
  const inputRef = useRef(null);

  useEffect(() => {
  // inputRef.current が null でないことを確認してからアクセス
  if (inputRef.current) {
  inputRef.current.focus(); // focus() メソッドに安全にアクセス
  }
  }, []); // マウント時に一度だけ実行

  return (

  );
  };

  export default InputFocus;
  ``useRef(null)とすることで、inputRef.currentの型がHTMLInputElement | nullとなります。アクセスする際にはif (inputRef.current)` のようなヌルチェックを行うのが安全です。

• 任意の可変値への参照: DOM要素以外で、レンダー間で値を保持したい場合にも useRef は使われます。

  “`tsx
  import React, { useRef, useEffect } from ‘react’;

  const Timer: React.FC = () => {
  const intervalIdRef = useRef(null); // タイマーIDを保持

  useEffect(() => {
  intervalIdRef.current = window.setInterval(() => {
  console.log(‘Tick’);
  }, 1000);

  return () => {
    // クリーンアップ関数でタイマーを解除
    if (intervalIdRef.current !== null) {
      window.clearInterval(intervalIdRef.current);
    }
  };
  

  }, []); // マウント時に開始、アンマウント時に停止

  return (

  See console for timer ticks.

  );
  };

  export default Timer;
  ``
この場合も、保持する値の型を` のように指定します。

4.7. useContext フックの型付け

useContext フックは、React Context から値を取得するために使われます。Contextを適切に型付けすることで、取得したコンテキストの値に安全にアクセスできます。

Contextの作成時に、Contextが保持する値の型を指定します。初期値が null になる可能性がある場合は、Union型を使用し、useContext を使用する側でヌルチェックを行う必要があります。

“`tsx
import React, { createContext, useContext, useState, ReactNode } from ‘react’;

// 1. Contextが保持する値の型を定義
interface ThemeContextType {
theme: ‘light’ | ‘dark’;
toggleTheme: () => void;
}

// 2. Contextを作成。初期値は型に合うように指定。
// 初期値が null の可能性があり、かつ null で初期化する場合は Union 型を使用
const ThemeContext = createContext(null);

// 3. Context Provider コンポーネント
interface ThemeProviderProps {
children: ReactNode; // Providerの子要素の型
}

const ThemeProvider: React.FC = ({ children }) => {
const [theme, setTheme] = useState<‘light’ | ‘dark’>(‘light’);

const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === ‘light’ ? ‘dark’ : ‘light’));
};

// Providerに渡す値の型
const contextValue: ThemeContextType = {
theme,
toggleTheme,
};

return (

{children}

);
};

// 4. Contextを使用するためのカスタムフック（推奨パターン）
const useTheme = () => {
const context = useContext(ThemeContext);

// Contextが null の場合はエラーをスロー
if (context === null) {
throw new Error(‘useTheme must be used within a ThemeProvider’);
}

return context; // Contextの値は ThemeContextType 型として推論される
};

// 5. コンポーネントでの利用例
const ThemeTogglerButton: React.FC = () => {
// カスタムフックを使うと、ヌルチェックが不要になる
const { theme, toggleTheme } = useTheme();

return (

Switch to {theme === ‘light’ ? ‘Dark’ : ‘Light’} Mode

);
};

const App: React.FC = () => {
return (


{/ 他のコンポーネント /}

);
};

export default App;
``
Contextの初期値をnullとする場合、useContextの戻り値の型はThemeContextType | nullとなります。これに対して安全にアクセスするためには、取得したContextの値がnullでないかチェック（型ガード）が必要です。useTheme` のようなカスタムフックを作成し、その中でヌルチェックとエラーハンドリングを行うのが、Context利用時の推奨パターンです。これにより、Contextを使用する各コンポーネントで毎回ヌルチェックを書く手間が省けます。

4.8. useReducer フックの型付け

useReducer フックは、State管理ロジックをReducer関数に集約したい場合に使われます。useReducer を使う際には、ReducerのStateとActionの型を定義する必要があります。

“`tsx
import React, { useReducer, ReactNode } from ‘react’;

// 1. Stateの型を定義
interface CounterState {
count: number;
}

// 2. Actionの型を定義 (Union型を使うのが一般的)
type CounterAction =
| { type: ‘increment’; payload?: number } // payload はオプショナル
| { type: ‘decrement’; payload?: number }
| { type: ‘reset’ };

// 3. Reducer関数の定義 (StateとActionの型を指定)
const counterReducer = (state: CounterState, action: CounterAction): CounterState => {
switch (action.type) {
case ‘increment’:
// payload の存在と型をチェック
return { count: state.count + (action.payload ?? 1) };
case ‘decrement’:
return { count: state.count – (action.payload ?? 1) };
case ‘reset’:
return { count: 0 };
default:
// 到達しないはずのケースを型チェックで検出するため、never型を安全に扱う
const _exhaustiveCheck: never = action;
return state; // またはエラーをスロー throw new Error(Unknown action type: ${action.type});
}
};

// 4. initial State の定義
const initialCounterState: CounterState = { count: 0 };

// 5. コンポーネントでの利用例
const CounterWithReducer: React.FC = () => {
// useReducer(Reducer関数, initial State)
const [state, dispatch] = useReducer(counterReducer, initialCounterState);

return (

);
};

export default CounterWithReducer;
``useReducerの型付けでは、Reducer関数と初期Stateの型定義が重要です。特にActionの型は、とりうる全てのアクションをUnion型で表現するのが一般的です。これにより、Reducer関数内でaction.typeに基づいたスイッチ文を使用する際に、TypeScriptが各ケースでactionオブジェクトの型を絞り込み（Discriminated Unions）、安全にaction.payloadなどのプロパティにアクセスできるようになります。switch文の最後にnever` 型を使った網羅性チェックを入れることで、定義漏れしたActionタイプがないかコンパイル時に検出できます。

4.9. カスタムフックの型付け

独自のカスタムフックを作成する場合も、その入力（引数）と出力（戻り値）に対して適切な型を付けることが重要です。

“`tsx
import { useState, useEffect } from ‘react’;

interface User {
id: number;
name: string;
}

interface FetchResult {
data: T | null;
loading: boolean;
error: string | null;
}

// カスタムフックの定義 (ジェネリック型 T を使用して再利用性を高める)
function useFetch(url: string): FetchResult {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(url);
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
const result: T = await response.json(); // ジェネリック型 T としてアサーション
setData(result);
setError(null);
} catch (err: any) {
setError(err.message);
} finally {
setLoading(false);
}
};

fetchData();

// クリーンアップは不要なため return なし

}, [url]); // url が変更されたら再実行

return { data, loading, error }; // FetchResult 型を返す
}

// 利用例
interface Post {
userId: number;
id: number;
title: string;
body: string;
}

const PostFetcher: React.FC = () => {
// useFetch と指定することで、data は Post[] | null となる
const { data: posts, loading, error } = useFetch(‘https://jsonplaceholder.typicode.com/posts’);

if (loading) return

Loading posts…

;
if (error) return

Error fetching posts: {error}

;
if (!posts) return null; // データが null の場合

return (

);
};

export default PostFetcher;
``
カスタムフックは、その引数と戻り値の型を明確に定義します。上記のuseFetchの例では、ジェネリック型を使用することで、様々な型のデータをフェッチするカスタムフックとして再利用可能にしています。戻り値の型FetchResultを定義することで、フックが返す値（data,loading,error`）の構造と型を明確にしています。

5. TSXにおける高度な型付けパターン

基本的なコンポーネントやフックの型付けに慣れてきたら、より複雑なケースに対応するための高度な型付けパターンを学びましょう。

5.1. ジェネリックコンポーネント

特定の型に依存しないコンポーネントを作成する場合、関数コンポーネントにジェネリック型を導入することができます。これは、リスト表示コンポーネントなど、様々な型のデータを受け取ってレンダリングするコンポーネントに便利です。

“`tsx
import React, { ReactNode } from ‘react’;

interface ListProps {
items: T[]; // ジェネリック型 T の配列を受け取る
renderItem: (item: T) => ReactNode; // ジェネリック型 T の要素をレンダリングする関数を受け取る
keyExtractor: (item: T) => string | number; // ジェネリック型 T の要素からキーを抽出する関数を受け取る
}

// ジェネリック関数コンポーネントを定義
// PropsWithChildren> のように型引数を渡す
function List(props: ListProps): React.ReactElement {
const { items, renderItem, keyExtractor } = props;

return (

{items.map(item => (
• {renderItem(item)}

))}

);
}

export default List;

// 利用例
interface User {
id: number;
name: string;
age: number;
}

const users: User[] = [
{ id: 1, name: ‘Alice’, age: 30 },
{ id: 2, name: ‘Bob’, age: 25 },
{ id: 3, name: ‘Charlie’, age: 35 },
];

const UserList: React.FC = () => {
return (
// 使用時に具体的な型引数 \ を指定（多くの場合推論可能）
items={users}
keyExtractor={user => user.id}
renderItem={user => (
{user.name} ({user.age})
)}
/>
);
};
``
ジェネリック関数コンポーネントは、関数の引数に型引数を指定するように定義します。List(props: ListProps)のように書くことで、コンポーネント全体がジェネリック型Tに依存していることを示します。これにより、items,renderItem,keyExtractor` といったPropsが受け取るデータの型と一貫性が保たれるようになります。

5.2. Render Props パターンと型付け

Render Propsパターンは、コンポーネント間でコードを共有する手法の一つです。子コンポーネントのレンダリングロジックをPropsとして親コンポーネントに渡します。TSXでは、このRender Propsとして渡される関数の型を正確に定義することが重要です。

“`tsx
import React, { useState, ReactNode } from ‘react’;

interface MouseTrackerProps {
// render プロパティは、現在のマウス位置 (x, y) を引数にとり、ReactNode を返す関数であると定義
render: (mouse: { x: number; y: number }) => ReactNode;
}

const MouseTracker: React.FC = (props) => {
const [position, setPosition] = useState({ x: 0, y: 0 });

const handleMouseMove = (event: React.MouseEvent) => {
setPosition({
x: event.clientX,
y: event.clientY,
});
};

return (

);
};

// 利用例
const AppWithMouseTracker: React.FC = () => {
return (
( // render Prop 関数の引数 mouse は { x: number; y: number } 型となる

The mouse position is ({mouse.x}, {mouse.y})

)}
/>
);
};
``MouseTrackerPropsインターフェースで、renderプロパティを(mouse: { x: number; y: number }) => ReactNode;という関数型として定義しています。これにより、MouseTrackerコンポーネントを使用する側で、renderProp に渡す関数がマウス位置オブジェクトを引数として受け取り、JSX要素（ReactNode`）を返す必要があることが強制されます。

5.3. Higher-Order Components (HOC) と型付け

Higher-Order Component (HOC) は、コンポーネントを受け取って新しいコンポーネントを返す関数です。これもコード共有の手法として使われます。HOCの型付けは少し複雑ですが、TypeScriptの型推論やユーティリティ型を活用して行うことができます。

“`tsx
import React, { ComponentType } from ‘react’;

// 元のコンポーネントが持つProps
interface InjectedProps {
isLoading: boolean;
}

// HOCが受け取る設定Props
interface WithLoadingProps {
// HOCによって提供される isLoading は除外した元のProps型を定義
// 例: MyComponentProps = { data: string } の場合 -> OriginalProps = { data: string }
}

// HOCの定義: 元のコンポーネントのPropsから InjectedProps を除いた型を OriginalProps とする
// このHOCは OriginalProps を受け取り、InjectedProps を追加した新しいPropsを持つコンポーネントを返す
function withLoading(
WrappedComponent: ComponentType
): ComponentType {
// 新しいコンポーネントを返す
const WithLoadingComponent: React.FC = (props) => {
// ここでローディングロジックを実行… 例として常にtrue
const isLoading = true;

return (
  <WrappedComponent {...props as OriginalProps} isLoading={isLoading} />
);

};

return WithLoadingComponent;
}

// 利用例
interface MyComponentProps {
data: string;
isLoading: boolean; // HOCによって注入されるProps
}

const MyComponent: React.FC = ({ data, isLoading }) => {
if (isLoading) return

Loading…

;
return

Data: {data}

;
};

// HOCを適用
const MyComponentWithLoading = withLoading(MyComponent); // MyComponentWithLoading は { data: string } をPropsとして受け取るコンポーネントとなる

// App コンポーネントで使用
const AppWithHOC: React.FC = () => {
return ;
};
``
HOCの型付けでは、元のコンポーネントが期待するPropsと、HOCが注入するProps、そしてHOC自体が受け取る追加のPropsを区別して型定義する必要があります。ComponentTypeユーティリティ型は、関数コンポーネントまたはクラスコンポーネントのどちらでも受け取れる型として便利です。ジェネリック型とIntersection型 (&`) を組み合わせて、Propsの追加・削除を型システム上で表現します。上記例では簡略化していますが、実際にはPropsの型操作にTypeScriptの高度なMapped TypesやConditional Typesを使用することがあります。

5.4. Forwarding Refs と型付け

React.forwardRef を使用して親コンポーネントから子コンポーネントのDOMノードやインスタンスへの参照を転送する場合、PropsとRefの型を正確に定義する必要があります。forwardRef 自体もジェネリック型として定義されています。

“`tsx
import React, { forwardRef, InputHTMLAttributes, Ref } from ‘react’;

// 1. Propsの型を定義 (input 要素の属性を受け取る + label)
// InputHTMLAttributes を Intersection で使用
interface CustomInputProps extends InputHTMLAttributes {
label: string;
}

// 2. forwardRef を使用してコンポーネントを定義
// forwardRef((props, ref) => { … })
const CustomInput = forwardRef((props, ref) => {
const { label, …restProps } = props;

return (

);
});

export default CustomInput;

// 利用例
import React, { useRef, useEffect } from ‘react’;
import CustomInput from ‘./CustomInput’;

const FormWithForwardedRef: React.FC = () => {
// CustomInput の input 要素への参照を保持
const inputRef = useRef(null);

useEffect(() => {
if (inputRef.current) {
inputRef.current.focus(); // フォーカスを当てる
}
}, []);

return (

  {/* 'h1' 要素としてレンダリングし、h1 が持つ属性（例: id）も渡せる */}
  <Text as="h1" id="main-title">This is a heading.</Text>

  {/* 'a' 要素としてレンダリングし、a が持つ属性（例: href, target）も渡せる */}
  <Text as="a" href="https://example.com" target="_blank">This is a link.</Text>

  {/* div 要素としてレンダリングし、div が持つ属性（例: onClick）も渡せる */}
  <Text as="div" onClick={() => alert('Div clicked!')}>This is a div.</Text>
</div>

  {/* variant が 'link' の場合、href が必須 */}
  <Button variant="link" href="https://example.com">
    Link Button
  </Button>

  {/* variant が 'link' なのに href がない場合は型エラー */}
  {/* <Button variant="link">Invalid Link Button</Button> */}

  {/* variant が 'primary' なのに href がある場合は型エラー（IntersectionとUnionの組み合わせによるチェック） */}
  {/* <Button variant="primary" onClick={() => {}} href="invalid-url">Invalid Primary Button</Button> */}
</div>

if (newTodoText.trim() === '') return; // 空のTODOは追加しない

const newTodo: Todo = { // 新しいTODOアイテムは Todo 型
  id: Date.now(), // 簡単なユニークIDとしてタイムスタンプを使用
  text: newTodoText,
  completed: false,
};

setTodos(prevTodos => [...prevTodos, newTodo]); // State更新
setNewTodoText(''); // 入力フィールドをクリア

  {/* TODOリスト */}
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>
        {/* TODOアイテムのテキストと完了状態を表示 */}
        <span
          style={{ textDecoration: todo.completed ? 'line-through' : 'none', cursor: 'pointer' }}
          onClick={() => handleToggleComplete(todo.id)} // 完了状態トグルハンドラ
        >
          {todo.text}
        </span>
        {/* TODO削除ボタン */}
        <button onClick={() => handleRemoveTodo(todo.id)}>Remove</button> {/* 削除ハンドラ */}
      </li>
    ))}
  </ul>
</div>

  <section>
    <Counter />
  </section>

  <section>
    <TodoList />
  </section>

  {/* 他のコンポーネントを追加 */}
</div>