TypeScript + React入門 - 型安全なコンポーネント開発

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// プリミティブ型
const name: string = "太郎";
const age: number = 25;
const isActive: boolean = true;

// 配列型
const numbers: number[] = [1, 2, 3];
const names: string[] = ["太郎", "花子"];
// Array<T>という書き方も可能
const items: Array<string> = ["item1", "item2"];

// オブジェクト型
const user: { name: string; age: number } = {
  name: "太郎",
  age: 25
};

// オプショナルプロパティ（?をつけると省略可能）
const profile: { name: string; bio?: string } = {
  name: "太郎"
  // bioは省略可能
};

// ユニオン型（複数の型を許容）
const id: string | number = "abc123";
const status: "loading" | "success" | "error" = "success";

// null/undefinedを許容する型
const value: string | null = null;
const optionalValue: string | undefined = undefined;

1
2

// エラー例：number型にstringを代入しようとしている
const age: number = "25"; // Type 'string' is not assignable to type 'number'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// interfaceによる型定義
interface User {
  name: string;
  age: number;
}

// typeによる型定義
type UserType = {
  name: string;
  age: number;
};

// どちらも同じように使用できる
const user1: User = { name: "太郎", age: 25 };
const user2: UserType = { name: "花子", age: 22 };

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

interface GreetingProps {
  name: string;
}

// 方法1: 引数に直接型を指定（推奨）
function Greeting({ name }: GreetingProps) {
  return <div>こんにちは、{name}さん！</div>;
}

// 方法2: アロー関数 + 引数に型を指定（推奨）
const GreetingArrow = ({ name }: GreetingProps) => {
  return <div>こんにちは、{name}さん！</div>;
};

// 方法3: 戻り値の型を明示
const GreetingExplicit = ({ name }: GreetingProps): React.JSX.Element => {
  return <div>こんにちは、{name}さん！</div>;
};

// 方法4: React.FC（React.FunctionComponent）を使用
const GreetingFC: React.FC<GreetingProps> = ({ name }) => {
  return <div>こんにちは、{name}さん！</div>;
};

1
2
3
4
5
6
7
8
9

// 非推奨: React.FCを使用
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

// 推奨: 引数に直接型を指定
function Button({ label, onClick }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>;
}

1
2
3
4
5
6
7
8

// displayNameを設定する場合
const MemoizedComponent: React.FC<Props> = React.memo(({ title }) => {
  return <h1>{title}</h1>;
});
MemoizedComponent.displayName = "MemoizedComponent";

// 既存のコードベースで統一されている場合
// チームのコーディング規約に従う

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// Propsの型を定義
interface GreetingProps {
  name: string;
  age: number;
}

// 関数コンポーネントにPropsの型を指定
function Greeting({ name, age }: GreetingProps) {
  return (
    <div>
      <h1>こんにちは、{name}さん！</h1>
      <p>年齢: {age}歳</p>
    </div>
  );
}

// 使用例
function App() {
  return <Greeting name="太郎" age={25} />;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 正しい使用方法
<Greeting name="太郎" age={25} />

// コンパイルエラー：必須のPropsが不足
<Greeting name="太郎" />
// Property 'age' is missing in type '{ name: string; }'

// コンパイルエラー：型が一致しない
<Greeting name="太郎" age="25" />
// Type 'string' is not assignable to type 'number'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

interface ButtonProps {
  label: string;
  variant?: "primary" | "secondary" | "danger"; // 省略可能
  disabled?: boolean; // 省略可能
}

function Button({ 
  label, 
  variant = "primary", // デフォルト値
  disabled = false 
}: ButtonProps) {
  const className = `btn btn-${variant}`;
  
  return (
    <button className={className} disabled={disabled}>
      {label}
    </button>
  );
}

// 使用例
function App() {
  return (
    <div>
      <Button label="送信" />
      <Button label="キャンセル" variant="secondary" />
      <Button label="削除" variant="danger" disabled />
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { ReactNode } from "react";

interface CardProps {
  title: string;
  children: ReactNode; // あらゆるReact要素を受け取れる
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2 className="card-title">{title}</h2>
      <div className="card-content">{children}</div>
    </div>
  );
}

// 使用例
function App() {
  return (
    <Card title="ユーザー情報">
      <p>名前: 太郎</p>
      <p>年齢: 25歳</p>
    </Card>
  );
}

1
2
3
4
5
6

import { ReactElement } from "react";

interface StrictCardProps {
  title: string;
  children: ReactElement; // JSX要素のみ受け取る
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import { PropsWithChildren } from "react";

interface ContainerProps {
  maxWidth: number;
}

// PropsWithChildrenでchildrenを自動追加
function Container({ maxWidth, children }: PropsWithChildren<ContainerProps>) {
  return (
    <div style={{ maxWidth: `${maxWidth}px`, margin: "0 auto" }}>
      {children}
    </div>
  );
}

1
2
3
4
5
6
7
8
9

function ClickButton() {
  // イベントハンドラを別関数として定義する場合
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log("クリックされました");
    console.log("ボタンのテキスト:", event.currentTarget.textContent);
  };

  return <button onClick={handleClick}>クリック</button>;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { useState, ChangeEvent } from "react";

function TextInput() {
  const [value, setValue] = useState("");

  // ChangeEvent<HTMLInputElement>で型を指定
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={value} 
        onChange={handleChange}
        placeholder="入力してください"
      />
      <p>入力値: {value}</p>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import { useState, FormEvent } from "react";

interface FormData {
  email: string;
  password: string;
}

function LoginForm() {
  const [formData, setFormData] = useState<FormData>({
    email: "",
    password: ""
  });

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("送信データ:", formData);
    // APIへの送信処理など
  };

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">メールアドレス</label>
        <input
          id="email"
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label htmlFor="password">パスワード</label>
        <input
          id="password"
          type="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit">ログイン</button>
    </form>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { ChangeEventHandler } from "react";

function SimpleInput() {
  const [value, setValue] = useState("");

  // ChangeEventHandler<HTMLInputElement>を使用
  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    setValue(event.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { useState } from "react";

function Counter() {
  // 型推論：number型として推論される
  const [count, setCount] = useState(0);
  
  // 明示的な型指定
  const [name, setName] = useState<string>("");
  
  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

function UserProfile() {
  // null または User型
  const [user, setUser] = useState<User | null>(null);
  
  // ユニオン型でステータスを管理
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

  // userがnullの場合のガード
  if (!user) {
    return <p>ユーザー情報がありません</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { useRef, useEffect } from "react";

function AutoFocusInput() {
  // DOM要素を参照する場合
  const inputRef = useRef<HTMLInputElement>(null);
  
  useEffect(() => {
    // inputRef.currentはnullの可能性があるためチェック
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} placeholder="自動フォーカス" />;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import { useRef, useEffect, useState } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);
  // number型を保持（初期値をnullにしない場合）
  const intervalRef = useRef<number | null>(null);

  const start = () => {
    if (intervalRef.current !== null) return;
    
    intervalRef.current = window.setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
  };

  const stop = () => {
    if (intervalRef.current !== null) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };

  useEffect(() => {
    return () => stop(); // クリーンアップ
  }, []);

  return (
    <div>
      <p>経過時間: {seconds}秒</p>
      <button onClick={start}>開始</button>
      <button onClick={stop}>停止</button>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import { createContext, useContext, useState, ReactNode } from "react";

// Contextで共有する値の型を定義
type Theme = "light" | "dark" | "system";

// createContextに型引数を渡す
const ThemeContext = createContext<Theme>("system");

// カスタムフックでContextを利用
function useTheme() {
  return useContext(ThemeContext);
}

// Providerコンポーネント
interface ThemeProviderProps {
  children: ReactNode;
}

function ThemeProvider({ children }: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>("light");

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

// 使用例
function ThemeDisplay() {
  const theme = useTheme();
  return <p>現在のテーマ: {theme}</p>;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

import { createContext, useContext, useState, useMemo, ReactNode } from "react";

// Contextで共有するオブジェクトの型
interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  isAuthenticated: boolean;
}

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

// 初期値をnullに設定（型は AuthContextType | null）
const AuthContext = createContext<AuthContextType | null>(null);

// カスタムフック（nullチェックを含む）
function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
}

// Providerコンポーネント
interface AuthProviderProps {
  children: ReactNode;
}

function AuthProvider({ children }: AuthProviderProps) {
  const [user, setUser] = useState<User | null>(null);

  const value = useMemo<AuthContextType>(() => ({
    user,
    isAuthenticated: user !== null,
    login: async (email: string, password: string) => {
      // APIへのログイン処理
      const response = await fetch("/api/login", {
        method: "POST",
        body: JSON.stringify({ email, password }),
      });
      const userData: User = await response.json();
      setUser(userData);
    },
    logout: () => {
      setUser(null);
    },
  }), [user]);

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

// 使用例
function UserProfile() {
  const { user, isAuthenticated, logout } = useAuth();

  if (!isAuthenticated) {
    return <p>ログインしてください</p>;
  }

  return (
    <div>
      <h2>{user?.name}</h2>
      <p>{user?.email}</p>
      <button onClick={logout}>ログアウト</button>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

import { createContext, useContext, useState, ReactNode, Dispatch, SetStateAction } from "react";

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

// Contextの型定義
interface TodoContextType {
  todos: Todo[];
  setTodos: Dispatch<SetStateAction<Todo[]>>;
  addTodo: (text: string) => void;
  toggleTodo: (id: number) => void;
  deleteTodo: (id: number) => void;
}

const TodoContext = createContext<TodoContextType | null>(null);

function useTodos(): TodoContextType {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error("useTodos must be used within a TodoProvider");
  }
  return context;
}

function TodoProvider({ children }: { children: ReactNode }) {
  const [todos, setTodos] = useState<Todo[]>([]);

  const addTodo = (text: string) => {
    setTodos(prev => [
      ...prev,
      { id: Date.now(), text, completed: false }
    ]);
  };

  const toggleTodo = (id: number) => {
    setTodos(prev =>
      prev.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id: number) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  };

  return (
    <TodoContext.Provider value={{ todos, setTodos, addTodo, toggleTodo, deleteTodo }}>
      {children}
    </TodoContext.Provider>
  );
}

// 使用例
function TodoList() {
  const { todos, toggleTodo, deleteTodo } = useTodos();

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => toggleTodo(todo.id)}
          />
          <span style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
            {todo.text}
          </span>
          <button onClick={() => deleteTodo(todo.id)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

import { useReducer } from "react";

// State型の定義
interface TodoState {
  todos: Todo[];
  filter: "all" | "active" | "completed";
}

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

// Action型の定義（ユニオン型で全アクションを表現）
type TodoAction =
  | { type: "ADD_TODO"; payload: string }
  | { type: "TOGGLE_TODO"; payload: number }
  | { type: "DELETE_TODO"; payload: number }
  | { type: "SET_FILTER"; payload: "all" | "active" | "completed" };

// 初期状態
const initialState: TodoState = {
  todos: [],
  filter: "all"
};

// Reducer関数
function todoReducer(state: TodoState, action: TodoAction): TodoState {
  switch (action.type) {
    case "ADD_TODO":
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: Date.now(),
            text: action.payload,
            completed: false
          }
        ]
      };
    case "TOGGLE_TODO":
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };
    case "DELETE_TODO":
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload)
      };
    case "SET_FILTER":
      return {
        ...state,
        filter: action.payload
      };
    default:
      return state;
  }
}

function TodoApp() {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  const handleAddTodo = (text: string) => {
    dispatch({ type: "ADD_TODO", payload: text });
  };

  const handleToggle = (id: number) => {
    dispatch({ type: "TOGGLE_TODO", payload: id });
  };

  const filteredTodos = state.todos.filter(todo => {
    if (state.filter === "active") return !todo.completed;
    if (state.filter === "completed") return todo.completed;
    return true;
  });

  return (
    <div>
      <h1>Todoリスト</h1>
      <TodoInput onAdd={handleAddTodo} />
      <ul>
        {filteredTodos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggle(todo.id)}
            />
            <span style={{ 
              textDecoration: todo.completed ? "line-through" : "none" 
            }}>
              {todo.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

interface TodoInputProps {
  onAdd: (text: string) => void;
}

function TodoInput({ onAdd }: TodoInputProps) {
  const [text, setText] = useState("");

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (text.trim()) {
      onAdd(text);
      setText("");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="新しいTodoを入力"
      />
      <button type="submit">追加</button>
    </form>
  );
}

1
2
3
4
5
6
7
8
9

// ジェネリックな関数の例
function identity<T>(value: T): T {
  return value;
}

// 使用時に型が決定される
const num = identity<number>(42);     // T = number
const str = identity<string>("hello"); // T = string
const auto = identity(true);           // T = boolean（型推論）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => ReactNode;
  keyExtractor: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map(item => (
        <li key={keyExtractor(item)}>
          {renderItem(item)}
        </li>
      ))}
    </ul>
  );
}

// 使用例1: ユーザーリスト
interface User {
  id: number;
  name: string;
  email: string;
}

function UserList() {
  const users: User[] = [
    { id: 1, name: "太郎", email: "taro@example.com" },
    { id: 2, name: "花子", email: "hanako@example.com" }
  ];

  return (
    <List
      items={users}
      keyExtractor={user => user.id}
      renderItem={user => (
        <div>
          <strong>{user.name}</strong> - {user.email}
        </div>
      )}
    />
  );
}

// 使用例2: 商品リスト
interface Product {
  sku: string;
  name: string;
  price: number;
}

function ProductList() {
  const products: Product[] = [
    { sku: "A001", name: "商品A", price: 1000 },
    { sku: "B002", name: "商品B", price: 2000 }
  ];

  return (
    <List
      items={products}
      keyExtractor={product => product.sku}
      renderItem={product => (
        <div>
          {product.name}: ¥{product.price.toLocaleString()}
        </div>
      )}
    />
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

interface SelectProps<T> {
  options: T[];
  value: T | null;
  onChange: (value: T) => void;
  getLabel: (option: T) => string;
  getValue: (option: T) => string | number;
  placeholder?: string;
}

function Select<T>({
  options,
  value,
  onChange,
  getLabel,
  getValue,
  placeholder = "選択してください"
}: SelectProps<T>) {
  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const selectedValue = e.target.value;
    const selectedOption = options.find(
      option => String(getValue(option)) === selectedValue
    );
    if (selectedOption) {
      onChange(selectedOption);
    }
  };

  return (
    <select
      value={value ? String(getValue(value)) : ""}
      onChange={handleChange}
    >
      <option value="" disabled>
        {placeholder}
      </option>
      {options.map(option => (
        <option key={getValue(option)} value={getValue(option)}>
          {getLabel(option)}
        </option>
      ))}
    </select>
  );
}

// 使用例
interface Country {
  code: string;
  name: string;
}

function CountrySelect() {
  const [selected, setSelected] = useState<Country | null>(null);
  
  const countries: Country[] = [
    { code: "JP", name: "日本" },
    { code: "US", name: "アメリカ" },
    { code: "GB", name: "イギリス" }
  ];

  return (
    <div>
      <Select
        options={countries}
        value={selected}
        onChange={setSelected}
        getLabel={country => country.name}
        getValue={country => country.code}
        placeholder="国を選択"
      />
      {selected && <p>選択された国: {selected.name}</p>}
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

// APIレスポンスの型定義
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

// カスタムフックで型を活用
function usePosts() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts"
        );
        if (!response.ok) {
          throw new Error("Failed to fetch posts");
        }
        const data: Post[] = await response.json();
        setPosts(data);
      } catch (err) {
        setError(err instanceof Error ? err : new Error("Unknown error"));
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  return { posts, loading, error };
}

function PostList() {
  const { posts, loading, error } = usePosts();

  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラー: {error.message}</p>;

  return (
    <ul>
      {posts.slice(0, 5).map(post => (
        <li key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// src/types/index.ts

// ユーザー関連
export interface User {
  id: number;
  name: string;
  email: string;
  role: UserRole;
}

export type UserRole = "admin" | "editor" | "viewer";

// APIレスポンス
export interface ApiResponse<T> {
  data: T;
  status: "success" | "error";
  message?: string;
}

// ページネーション
export interface PaginatedResponse<T> {
  items: T[];
  total: number;
  page: number;
  perPage: number;
  totalPages: number;
}

// フォーム状態
export interface FormState<T> {
  values: T;
  errors: Partial<Record<keyof T, string>>;
  isSubmitting: boolean;
  isValid: boolean;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// src/components/UserCard.tsx
import type { User } from "../types";

interface UserCardProps {
  user: User;
  onEdit?: (user: User) => void;
  onDelete?: (userId: number) => void;
}

export function UserCard({ user, onEdit, onDelete }: UserCardProps) {
  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <span className={`role-badge role-${user.role}`}>{user.role}</span>
      
      {onEdit && (
        <button onClick={() => onEdit(user)}>編集</button>
      )}
      {onDelete && (
        <button onClick={() => onDelete(user.id)}>削除</button>
      )}
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// エラーが発生するコード
const inputRef = useRef<HTMLInputElement>(null);
inputRef.current.focus(); // Object is possibly 'null'

// 解決策1: オプショナルチェイニング
inputRef.current?.focus();

// 解決策2: nullチェック
if (inputRef.current) {
  inputRef.current.focus();
}

// 解決策3: 非nullアサーション（確実にnullでない場合のみ）
inputRef.current!.focus();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// エラーが発生するコード
interface Props {
  name: string;
}

function Component({ name, age }: Props) {} // 'age' does not exist

// 解決策: 型定義に追加
interface Props {
  name: string;
  age: number;
}

1
2
3
4
5
6

// エラーが発生するコード
const [status, setStatus] = useState<"loading" | "success">("idle");
// Type '"idle"' is not assignable to type '"loading" | "success"'

// 解決策: ユニオン型に追加
const [status, setStatus] = useState<"idle" | "loading" | "success">("idle");

1
2
3
4
5
6
7
8

// インラインで書く場合は型推論が効く
<input onChange={(e) => setValue(e.target.value)} />

// 別関数として定義する場合は明示的な型が必要
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};
<input onChange={handleChange} />