React/Next.js基礎 - AIでWebアプリ開発を学ぼう

Reactとは

Reactは、Facebookが開発したUIライブラリです。「コンポーネント」という部品を組み合わせてWebページを作ります。

コンポーネントの概念

Webページを「部品」に分けて管理します：

Header

Sidebar

Card

Button

Footer

JSXの書き方

ReactではJSXという、JavaScript内にHTMLのような記法を書けます。

// コンポーネントの例
function Greeting() {
  const name = "太郎";

  return (
    <div>
      <h1>こんにちは、{name}さん</h1>
      <p>Reactへようこそ！</p>
    </div>
  );
}

JSXのポイント

{}の中にJavaScriptの式を書ける
classの代わりにclassNameを使う
コンポーネント名は大文字で始める（Greetingなど）
return する要素は1つのタグで囲む

Next.jsとは

Next.jsはReactをベースにした、より高機能なフレームワークです。

Reactだけだと

ルーティング（ページ遷移）を自分で設定
設定ファイルが多い
SEO対策が難しい

Next.jsなら

ファイル名がそのままURLになる
設定がほぼ不要
SEO対策も簡単

ファイルベースルーティング

Next.jsでは、ファイルを置くだけでページが作れます。

フォルダ構成 → URL

app/page.tsx → /

app/about/page.tsx → /about

app/products/page.tsx → /products

app/products/[id]/page.tsx → /products/123

useState（状態管理）

useStateは、コンポーネント内で変更可能なデータ（状態）を管理するための機能です。

"use client";  // Next.jsではこれが必要

import { useState } from "react";

function Counter() {
  // [現在の値, 値を更新する関数] = useState(初期値)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        増やす
      </button>
    </div>
  );
}

useStateのポイント

countは現在の値
setCountは値を更新する関数
直接count = 1と書いてはダメ。必ずsetCount(1)を使う
値が変わると、画面が自動的に再描画される

Next.jsでの注意：useStateを使うコンポーネントは、ファイルの先頭に"use client"と書く必要があります。

useEffect（副作用）

useEffectは、コンポーネントが表示されたときや、特定の値が変わったときに処理を実行します。

"use client";

import { useState, useEffect } from "react";

function TodoList() {
  const [todos, setTodos] = useState([]);

  // コンポーネントが表示されたときにAPIからデータを取得
  useEffect(() => {
    async function fetchTodos() {
      const response = await fetch("http://localhost:8000/todos");
      const data = await response.json();
      setTodos(data);
    }
    fetchTodos();
  }, []);  // [] は「最初の1回だけ実行」の意味

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

useEffectの第2引数

[]：最初に1回だけ実行
[count]：countが変わるたびに実行
指定なし：毎回実行（通常は使わない）

props（データの受け渡し）

親コンポーネントから子コンポーネントにデータを渡すには、propsを使います。

// 子コンポーネント：propsでデータを受け取る
function TodoItem({ title, completed }) {
  return (
    <li>
      {completed ? "✅" : "⬜"} {title}
    </li>
  );
}

// 親コンポーネント：propsでデータを渡す
function TodoList() {
  return (
    <ul>
      <TodoItem title="買い物" completed={true} />
      <TodoItem title="掃除" completed={false} />
    </ul>
  );
}

ポイント：propsは親から子への一方通行。子から親にデータを渡すには、関数をpropsで渡します。

コードの読み方のコツ

1. コンポーネントを見つける

大文字で始まる関数（function TodoList）がコンポーネントです。

2. returnの中がUI

returnの中のJSXが、実際に画面に表示される内容です。

3. useStateを探す

useStateがあれば、そのコンポーネントは「状態を持つ」＝動的に変わる部分がある。

4. mapでリスト表示

.map()があれば、配列をループして表示しています。

練習問題

Q1. Reactでコンポーネント名を書くときのルールは？

A. 小文字で始める B. 大文字で始める C. どちらでもよい

Q2. useStateで値を変更するとき、正しい方法は？

const [count, setCount] = useState(0);

A. count = 1 B. setCount(1) C. count.set(1)

Q3. useEffect(() => {...}, []) の [] は何を意味する？

A. 毎回実行する B. 最初の1回だけ実行する C. 実行しない

まとめ

✓ Reactはコンポーネント（部品）を組み合わせてUIを作る
✓ Next.jsはファイル名がそのままURLになる
✓ useStateで状態を管理する
✓ useEffectで初期処理やデータ取得を行う
✓ propsで親から子にデータを渡す