Claude CodeでReactコンポーネントを生成する方法

npm install -g @anthropic-ai/claude-code

claude login

claude --version

npm create vite@latest my-app -- --template react-ts

cd my-app

npm install

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

cd my-app

claude

TypeScriptでTodoリストコンポーネントを作成してください。
Tailwind CSSを使用してください。
追加、削除、完了切り替え機能を実装してください。

import { useState } from "react";

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

export default function TodoApp() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [text, setText] = useState("");

  const addTodo = () => {
    if (!text) return;

    setTodos([
      ...todos,
      {
        id: Date.now(),
        text,
        completed: false,
      },
    ]);

    setText("");
  };

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

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

  return (
    <div className="max-w-md mx-auto p-4">
      <div className="flex gap-2 mb-4">
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          className="border p-2 flex-1"
        />

        <button
          onClick={addTodo}
          className="bg-blue-500 text-white px-4 py-2"
        >
          Add
        </button>
      </div>

      <ul className="space-y-2">
        {todos.map(todo => (
          <li
            key={todo.id}
            className="flex justify-between border p-2"
          >
            <span
              onClick={() => toggleTodo(todo.id)}
              className={
                todo.completed
                  ? "line-through cursor-pointer"
                  : "cursor-pointer"
              }
            >
              {todo.text}
            </span>

            <button
              onClick={() => removeTodo(todo.id)}
              className="text-red-500"
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Reactコンポーネントを作って

TypeScriptを使用してください。
Tailwind CSSでスタイリングしてください。
レスポンシブ対応してください。
フォームバリデーションを追加してください。
アクセシビリティを考慮してください。

このコンポーネントをuseReducerへ変更してください

パフォーマンス改善のためにmemo化してください

ECサイトの商品一覧ページを作成してください。
以下を含めてください。

・商品カード
・検索フォーム
・カテゴリフィルター
・ページネーション
・レスポンシブ対応
・TypeScript対応
・Tailwind CSS使用

useLocalStorageフックをTypeScriptで作成してください

import { useState } from "react";

export function useLocalStorage<T>(
  key: string,
  initialValue: T
) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    const item = localStorage.getItem(key);

    return item
      ? JSON.parse(item)
      : initialValue;
  });

  const setValue = (value: T) => {
    setStoredValue(value);

    localStorage.setItem(
      key,
      JSON.stringify(value)
    );
  };

  return [storedValue, setValue] as const;
}