[React.js] - パート3: 「TypeScript (.tsx) を使用したタイプセーフなReactコンポーネント：初心者向けガイド」
Ace Lennox
TypeScript と React を組み合わせることで、堅牢で型安全なユーザーインターフェースを構築することができます。React コンポーネントは .tsx ファイルで記述され、TypeScript によって静的型付けが提供され、コードの信頼性が向上します。
このガイドでは、TypeScript を使用した 関数コンポーネント の作成と使用方法に焦点を当てます。
React におけるコンポーネントとは？
IReact における コンポーネント は、UI をレンダリングする再利用可能なビルディングブロックです。コンポーネントは入力データ（props）を受け取り、画面に表示する React 要素を返します。
TypeScript におけるコンポーネントの種類
ステートレス関数コンポーネント: 独自の状態を持たないコンポーネント。
ステートフル関数コンポーネント: 内部状態や動作を持つコンポーネント。
.tsx で関数コンポーネントを作成する
関数コンポーネントは、TypeScript の関数として定義され、JSX を返します。以下では、その記述方法を詳しく見ていきましょう。
基本的なステートレスコンポーネント
interface GreetingProps {
name: string;
}
const Greeting = ({ name }: GreetingProps) => {
return <h1>Hello, {name}!</h1>;
};
export default Greeting;
主なポイント:
Props のインターフェース:
GreetingPropsはpropsの形を定義します。nameプロパティが常にstring型であることを保証します。
使用例:
import './App.css'
import Greeting from './components/Greeting'
function App() {
return (
<>
<Greeting name="KaizuTech.com"/>
</>
)
}
export default App
useState を使用して状態を追加する
コンポーネントをステートフルにするには、useState フックを使用します。
import { useState } from "react";
const Counter = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;
主なポイント:
useState<number>は状態値 (count) の型を指定します。setCount関数は状態を更新します。
Props にデフォルト値を設定する
TypeScript で props のデフォルト値を定義できます。
interface ButtonProps {
label: string;
onClick?: () => void; // Optional prop
}
const Button = ({ label, onClick }: ButtonProps) => {
return <button onClick={onClick}>{label}</button>;
};
// Default props
Button.defaultProps = {
onClick: () => alert("Button clicked!"),
};
export default Button;
useEffect を使用して副作用を管理する
TypeScript で useEffect フックを使用して副作用を管理します。
import { useState, useEffect } from "react";
const Timer = () => {
const [seconds, setSeconds] = useState<number>(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
return () => clearInterval(interval); // Cleanup
}, []);
return <p>Elapsed Time: {seconds} seconds</p>;
};
export default Timer;
主なポイント:
useState<number>によってseconds状態が数値であることが保証されます。クリーンアップ関数はコンポーネントがアンマウントされるときにインターバルをクリアし、メモリリークを防ぎます。
Props と State を組み合わせる
より複雑なコンポーネントでは、props と state を組み合わせて使用できます。
import { useState } from "react";
interface UserCardProps {
name: string;
age: number;
}
const UserCard = ({ name, age }: UserCardProps) => {
const [isHidden, setIsHidden] = useState<boolean>(false);
return (
<div>
<h1>{name}</h1>
{!isHidden && <p>Age: {age}</p>}
<button onClick={() => setIsHidden(!isHidden)}>
{isHidden ? "Show Age" : "Hide Age"}
</button>
</div>
);
};
export default UserCard;
TypeScript におけるステートレス vs ステートフルコンポーネント
TypeScript を使用した React のベストプラクティス
インターフェースで Props の型を定義する:
interfaceまたはtypeを使用してpropsを定義し、型安全性を向上させます。
状態にジェネリック型を使用する:
状態変数の型を指定して、エラーを防ぎます。
TypeScript を使用した React 開発のヒント
コンポーネントを小さく保つ:
各コンポーネントは単一の責務を持つように設計します。
説明的な名前を使用する:
コンポーネント名はその目的を反映するようにします。
ロジックとマークアップを分離する:
必要に応じてカスタムフックを使用してロジックを抽象化します。
プロップの検証:
prop-typesライブラリや TypeScript を使用してpropsを検証します。
結論
TypeScript (.tsx) でコンポーネントを記述することは、型安全性とコードのメンテナビリティを向上させ、React 開発を強化します。ステートレスコンポーネントとステートフルコンポーネントの両方を構築する際に、TypeScript はコードの予測可能性と信頼性を確保します。
TypeScript を活用した React の習得は、バグの少ないスケーラブルなアプリケーションを作成するのに役立ちます。Happy coding! 🚀
ソースコード
このプロジェクトの完全なソースコードはGitHubで利用可能です。