React入門ガイド
— TypeScriptは分かる人向け

# TypeScript + React のプロジェクトを作成
npm create vite@latest my-app -- --template react-ts

# プロジェクトフォルダに移動して依存関係をインストール
cd my-app
npm install

# 開発サーバーを起動
npm run dev

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default function App() {
  return (
    <div>
      <Hello />
      <p>これは別のコンポーネントです</p>
    </div>
  );
}

const userName: string = "Kosuke";

function Greeting() {
  return <h1>Hello, {userName}!</h1>;
  // { } の中は式として評価される。変数、関数呼び出し、三項演算子などが使える
}

interface UserCardProps {
  name: string;
  age: number;
}

function UserCard({ name, age }: UserCardProps) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

export default function App() {
  return (
    <UserCard name="太郎" age={28} />
  );
}

interface CardProps {
  children: React.ReactNode;
}

function Card({ children }: CardProps) {
  return <div className="card">{children}</div>;
}

// 使う側
<Card>
  <p>これがchildrenになります</p>
</Card>

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState<number>(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      クリック回数: {count}
    </button>
  );
}

interface Profile {
  name: string;
  age: number;
}

const [profile, setProfile] = useState<Profile>({ name: "太郎", age: 28 });

// NG: profile.age++ のような直接変更
// OK: 新しいオブジェクトを作って置き換える
setProfile({ ...profile, age: profile.age + 1 });

function App() {
  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
    console.log("clicked", event.currentTarget);
  }

  return <button onClick={handleClick}>押す</button>;
}

// 1. 三項演算子（if/elseが必要なとき）
<div>
  {isLoggedIn ? <p>ようこそ</p>> : <p>ログインしてください</p>}
</div>

// 2. && 演算子（elseが不要なとき）
<div>
  {errorMessage && <p className="error">{errorMessage}</p>}
</div>

// 3. 関数内でif文を使い、返す要素をあらかじめ決める
function Status({ isOnline }: { isOnline: boolean }) {
  if (isOnline) {
    return <span>オンライン</span>;
  }
  return <span>オフライン</span>;
}

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

function TodoList({ todos }: { todos: Todo[] }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

import { useState } from "react";

function NameForm() {
  const [name, setName] = useState<string>("");

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setName(e.target.value);
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault(); // ページ再読み込みを防ぐ
    alert(`送信された名前: ${name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleChange} />
      <button type="submit">送信</button>
    </form>
  );
}

import { useState, useEffect } from "react";

function ClockDisplay() {
  const [time, setTime] = useState<Date>(new Date());

  useEffect(() => {
    const timerId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // クリーンアップ: コンポーネントが消えるときにタイマーを止める
    return () => clearInterval(timerId);
  }, []); // 依存配列が空 = マウント時に1回だけ実行

  return <p>現在時刻: {time.toLocaleTimeString()}</p>;
}

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

function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data: User) => {
        if (!cancelled) setUser(data);
      });

    return () => { cancelled = true; }; // 古いリクエストの結果を無視する
  }, [userId]); // userIdが変わるたびに再取得

  if (!user) return <p>読み込み中...</p>;
  return <p>{user.name}</p>;
}

import { useRef } from "react";

function FocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  function handleClick() {
    inputRef.current?.focus(); // 実際のDOM要素にアクセスできる
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>入力欄にフォーカス</button>
    </>
  );
}

import { useState } from "react";

interface CounterButtonProps {
  count: number;
  onIncrement: () => void;
}

function CounterButton({ count, onIncrement }: CounterButtonProps) {
  return <button onClick={onIncrement}>合計: {count}</button>;
}

export default function App() {
  const [count, setCount] = useState<number>(0);
  const increment = () => setCount((prev) => prev + 1);

  return (
    <div>
      <CounterButton count={count} onIncrement={increment} />
      <CounterButton count={count} onIncrement={increment} />
    </div>
  );
}

import { useState } from "react";

function useCounter(initial: number = 0) {
  const [count, setCount] = useState<number>(initial);

  const increment = () => setCount((c) => c + 1);
  const decrement = () => setCount((c) => c - 1);
  const reset = () => setCount(initial);

  return { count, increment, decrement, reset };
}

// 使う側
function Counter() {
  const { count, increment, decrement, reset } = useCounter(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
}