HTML/CSS経験者のためのReact入門：基本からミニアプリ開発まで完全ガイド

## 🟢 第1章：Reactってなに？HTMLとの違いを知ろう

### はじめに

Web制作をしていると、「React（リアクト）」という言葉をよく目にすることはありませんか？  
Reactは、**動きのあるWebアプリ**を効率よく作るためのJavaScriptライブラリです。

この記事では、**HTMLとCSSはわかるけど、JavaScriptやReactはまだ不安……という方**に向けて、Reactの基本的な考え方や、HTMLとの違いをやさしく解説していきます。

---

### 1. Reactとは？

Reactは、Facebook（現Meta）が開発した、**ユーザーインターフェース（UI）を作るためのライブラリ**です。

たとえばこんなことができます：

- ボタンを押すとカウントが増える
- 入力フォームに文字を打つとリアルタイムで反映される
- リスト表示やタブ切り替えなどの動的な表示

つまり、**「動くWebページ」を部品（コンポーネント）で効率よく作る**のがReactの得意分野です。

---

### 2. HTMLとの違いは？

Reactでは、HTMLに似た構文を使います。これを「**JSX（JavaScript XML）**」と呼びます。

#### JSXの特徴

以下のような記述になります：

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

ぱっと見、HTMLと同じようですが、いくつかの違いがあります。

#### ✅ JSXとHTMLの違い（一部）

| HTML | JSX |
|------|-----|
| `class` | `className` |
| `onclick` | `onClick` |
| 属性値は文字列 | `{}` でJavaScriptを書く |

#### 例：HTMLとJSXの比較

**HTML**
```html
<button class="my-button" onclick="doSomething()">Click me</button>
```

**JSX**
```jsx
<button className="my-button" onClick={doSomething}>Click me</button>
```

このように、**見た目はHTMLに似ているけれど、実はJavaScriptの一部**として書くのがReactの特徴です。

---

### 3. 環境構築は不要！CodeSandboxで始めよう

Reactを始めるのに特別なインストールは不要です。  
まずは以下のサービスを使えば、すぐにReactを体験できます。

👉 [CodeSandbox（Reactテンプレート）](https://codesandbox.io/s/new/react)

#### 初めてのReactコードを書いてみよう

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

export default App;
```

- `App` はReactコンポーネントの名前
- `return` の中に書いたものが、画面に表示されます

右側のプレビューに「Hello, React!」と表示されていればOKです！

---

### まとめ

この章では、Reactが「**動くUIを部品として作れるライブラリ**」であること、  
そしてその記法である「**JSX**」がHTMLと似て非なるものだとわかりました。

次章では、Reactの肝である「**コンポーネント**」について、もっと深く見ていきましょう！

## 🔵 第2章：コンポーネントを理解しよう：HTMLを部品に分ける感覚

### はじめに

Reactの最大の特徴は「**UIを部品（コンポーネント）として分けて使えること**」です。

HTML/CSSの経験がある方は、「ヘッダー」「カード」「ボタン」などを部品のように使い回していたかもしれません。Reactでは、それを**コードレベルで部品化**して、再利用できるのが魅力です。

この章では、Reactのコンポーネントとは何か？どうやって作るのか？を実際に体験してみましょう。

---

### 1. コンポーネントってなに？

Reactでは、**1つ1つのUIパーツを「関数」として定義**します。  
これが「**関数コンポーネント**」と呼ばれるものです。

#### 例：見出しコンポーネント

```jsx
function Heading() {
  return <h1>こんにちは、React！</h1>;
}
```

この `Heading` 関数は、HTMLでいう `<h1>` を返すだけの単純な部品です。  
このコンポーネントを使いたいときは、タグのように `<Heading />` と書きます。

#### App内で使ってみよう

```jsx
function App() {
  return (
    <div>
      <Heading />
    </div>
  );
}

function Heading() {
  return <h1>こんにちは、React！</h1>;
}

export default App;
```

---

### 2. コンポーネントを組み合わせてみよう

今度は、「ボタン」も別のコンポーネントとして作ってみましょう。

#### 例：Buttonコンポーネント

```jsx
function MyButton() {
  return <button>クリックしてね</button>;
}
```

`App` コンポーネントの中で使う：

```jsx
function App() {
  return (
    <div>
      <Heading />
      <MyButton />
    </div>
  );
}
```

ここまでで、**「見出し」と「ボタン」を別々の部品として定義して組み合わせる**という流れが体験できました。

---

### 3. props（プロップス）で値を渡す

Reactでは、**コンポーネントに「データ」を渡す**ことができます。  
そのときに使うのが「**props（プロップス）**」です。

#### 例：ボタンのラベルを変更できるようにする

```jsx
function MyButton(props) {
  return <button>{props.label}</button>;
}
```

これで、以下のように使うとラベルを変えられます。

```jsx
function App() {
  return (
    <div>
      <MyButton label="送信" />
      <MyButton label="キャンセル" />
    </div>
  );
}
```

`props.label` の中身が、それぞれのボタンに渡されて表示されます。

---

### まとめ

この章では、Reactの「**コンポーネント**」という概念を学びました。

- 関数でUI部品を定義できる
- 複数の部品を組み合わせてページを構成できる
- `props` を使って、**カスタマイズ可能な部品**が作れる

まさに、HTML/CSSの「部品化」をコードの中でも実現できるイメージですね。

次の章では、Reactに動きをつける「**状態管理（useState）**」について学んでいきます！

## 🟠 第3章：useStateを使って状態を持たせよう：カウントアプリで体験

### はじめに

前章では、「ReactはUIを部品（コンポーネント）として作れる」という話をしました。

でも、ただ見た目を表示するだけでは、動きのあるアプリにはなりません。  
ボタンを押してカウントが増えるような、**「状態（state）」の変化**が必要になります。

Reactでは、この「状態」を `useState` という仕組みで扱います。

---

### 1. 状態（State）ってなに？

状態（State）とは、「**画面の中で変化する値**」のことです。

たとえば、次のようなものが状態です：

- カウントの数字
- 入力された文字
- チェックボックスのオン/オフ

HTMLだけでは「ページを再読み込みしないと反映されない」ような変化を、Reactでは**画面の一部だけをサッと更新**できます。

---

### 2. useStateでカウント機能を作ってみよう

まずは、Reactの`useState`を使ってカウントアプリを作ってみましょう。

```jsx
import { useState } from "react";

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

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

export default App;
```

#### 解説：

- `useState(0)`：初期値は0
- `count`：現在の状態
- `setCount`：状態を更新する関数
- `onClick={() => setCount(count + 1)}`：ボタンがクリックされたとき、`count`を1つ増やす

### ▶ 実行してみよう！

CodeSandboxでこのコードを試してみてください。  
ボタンをクリックするたびに、カウントが増えていけば成功です！

---

### 3. 状態を複数使ってみよう（応用編）

今度は、別の状態も一緒に使ってみます。たとえば「名前の入力」と組み合わせてみましょう。

```jsx
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="名前を入力"
      />
      <h2>こんにちは、{name}さん！</h2>

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

export default App;
```

- `name` という状態を追加
- テキストボックスで `name` を更新
- 画面にリアルタイムで反映

このように、Reactでは**複数の状態を自由に組み合わせて、動的な画面**が作れます。

---

### まとめ

この章では、Reactの「状態（state）」について学びました。

- `useState` で変化する値を管理できる
- 状態が変わると、Reactは自動的に画面を更新してくれる
- 入力フォームやボタンの動作が、すべて状態で管理できる

次の章では、**イベントの扱い方**や**ユーザー操作への反応**をさらに深堀りしていきます！

## 🟣 第4章：イベントでユーザー操作に反応しよう：onClick/onChangeの基本

### はじめに

Reactでは、ユーザーの操作（クリック・入力など）に応じて、UIを動的に変化させることができます。

そのために使うのが「**イベントハンドラ**」です。  
この章では、よく使うイベントである `onClick` と `onChange` の使い方を、やさしく解説していきます。

---

### 1. イベントとは？

イベントとは、ユーザーの操作によって発生する「できごと」のことです。

代表的なイベント：

| イベント名 | 発生条件           |
|------------|--------------------|
| `onClick`  | ボタンや要素がクリックされたとき |
| `onChange` | 入力欄の値が変更されたとき       |
| `onSubmit` | フォームが送信されたとき         |

Reactでは、**要素にイベントハンドラを設定して、操作に応じた処理を実行**します。

---

### 2. onClick：クリックされたときに動かす

ボタンがクリックされたときに、アラートを出してみましょう。

```jsx
function App() {
  const handleClick = () => {
    alert("クリックされました！");
  };

  return (
    <div>
      <button onClick={handleClick}>クリックしてね</button>
    </div>
  );
}

export default App;
```

#### 解説：

- `handleClick` は関数（イベントが起きたときに実行される）
- `onClick={handleClick}` でボタンと関数をつなげている

---

### 3. onChange：入力値をリアルタイムで取得

テキストボックスに入力された文字を、画面に表示してみましょう。

```jsx
import { useState } from "react";

function App() {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input value={text} onChange={handleChange} placeholder="何か入力してみてね" />
      <p>入力中：{text}</p>
    </div>
  );
}

export default App;
```

#### 解説：

- `value={text}` で入力欄の値と状態を連動
- `onChange={handleChange}` で変更を検知
- `e.target.value` で入力された文字を取得

---

### 4. よくある注意点：即時実行に注意！

以下のように書くと、**クリック前に関数が実行されてしまいます**。

```jsx
// ❌ NGパターン
<button onClick={handleClick()}>押す</button>
```

- `handleClick()` は「今すぐ関数を実行する」という意味になります
- Reactがレンダリングした瞬間に実行されてしまいます

✅ 正しくは「関数そのもの」を渡しましょう：

```jsx
<button onClick={handleClick}>押す</button>
```

---

### まとめ

この章では、Reactにおける「イベント処理」の基本を学びました。

- `onClick`：ボタンや要素がクリックされたとき
- `onChange`：入力欄の値が変更されたとき
- イベントハンドラ関数を使って、ユーザー操作に反応できる

Reactでは、「ユーザーの行動に応じて何をするか？」をしっかりコードで管理できます。

次章では、**これまでの知識を活かして、実際に簡単なミニアプリを作ってみましょう！**

## 🟢 第5章：集大成！ミニアプリを作ってみよう：ToDoリスト編

### はじめに

ここまでで、Reactの基本的な機能を学んできました。

- JSXでHTMLのように書く
- コンポーネントでUIを部品化する
- useStateで状態を管理する
- イベントでユーザー操作に反応する

今回はこれらをすべて活用して、簡単な**ToDoリストアプリ**を作ってみましょう！

---

### 完成イメージ

- 入力欄にやることを入力して追加ボタンを押すと、リストに追加される
- リストはリアルタイムで画面に表示される
- 削除ボタンで項目を消せる（オプション）

---

### 1. 基本構造を用意しよう

まずは、必要な状態と基本レイアウトを用意します。

```jsx
import { useState } from "react";

function App() {
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState([]);

  const handleAdd = () => {
    if (task.trim() === "") return;
    setTasks([...tasks, task]);
    setTask("");
  };

  return (
    <div>
      <h1>ToDoリスト</h1>
      <input
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="やることを入力"
      />
      <button onClick={handleAdd}>追加</button>

      <ul>
        {tasks.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
```

---

### 2. ポイント解説

- `task`：入力欄の文字を保持する状態
- `tasks`：やることの一覧を配列で保持する状態
- `setTasks([...tasks, task])`：配列に新しいタスクを追加（スプレッド構文）

---

### 3. 削除機能も追加してみよう（応用）

```jsx
const handleDelete = (index) => {
  const newTasks = tasks.filter((_, i) => i !== index);
  setTasks(newTasks);
};
```

表示部分を少し変更します：

```jsx
<ul>
  {tasks.map((item, index) => (
    <li key={index}>
      {item}
      <button onClick={() => handleDelete(index)}>削除</button>
    </li>
  ))}
</ul>
```

---

### 4. ちょっとした工夫：空文字を追加できないようにする

以下のように、空文字やスペースだけの場合は追加されないようにしています。

```jsx
if (task.trim() === "") return;
```

Reactは「UIの状態」を自分でコントロールできるので、こうしたちょっとした工夫も簡単に取り入れられます。

---

### まとめ

この章では、ToDoリストという形で、Reactの基礎知識を総動員しました。

- 状態（task, tasks）で画面を制御
- イベントで追加・削除を処理
- JSXでリストをレンダリング

こうした小さなアプリを作ることで、Reactの「使える実感」がグッと湧いてきたと思います！

---

次の章では、ここまで学んだ内容の振り返りと、次に目指すステップについてまとめましょう。

## 🧩 第6章：まとめと次のステップ：Reactを使いこなすために

### 1. ここまでの振り返り

Reactの入門として、HTML/CSS経験者向けにやさしく学んできました。  
1つ1つの章で、新しい考え方と技術を身につけてきたと思います。

| 章 | 内容 |
|----|------|
| 第1章 | JSXの基本：HTMLにそっくりな構文でUIを定義 |
| 第2章 | コンポーネント：UIを部品化して再利用する考え方 |
| 第3章 | useState：状態を持って画面を動かす |
| 第4章 | イベント処理：ユーザー操作に応じて反応する |
| 第5章 | ToDoアプリ作成：実際に小さなアプリを作る体験 |

ここまでの内容をしっかり理解していれば、Reactの**基礎はマスター**できています！

---

### 2. よくあるつまずきポイント

Reactを学び始めたときによくある疑問・つまずき：

- なぜ `useState` が必要なの？ → UIの動的な変化を自動で管理するため
- コンポーネントの分け方がわからない → 1つの部品に1つの役割をもたせよう
- `props` と `state` の違いは？ → 外から渡すのが `props`、自分で管理するのが `state`

焦らず、「UIを分割し、状態を管理する」という本質を意識しましょう。

---

### 3. 次に進むためのステップ

#### ✅ やってみるとよいこと

- **別のミニアプリを作ってみる**
  - 例）メモ帳アプリ、買い物リスト、カウンター、タイマー など

- **状態をもっと複雑にしてみる**
  - オブジェクトや配列の状態管理にチャレンジ

- **複数コンポーネント間でデータをやりとり**
  - `props` を渡して親子関係を意識する

#### 📚 学習の次のテーマ候補

- useEffect（副作用の処理）
- コンポーネントの分割と設計
- React Router（画面遷移）
- コンポーネントのスタイリング方法（CSS Modules, Styled Components など）
- 状態管理ライブラリ（Context, Redux など）

---

### 4. おわりに

Reactはとても強力なライブラリですが、最初は「考え方」が少し独特で戸惑うこともあるかもしれません。

しかし、今回のように**HTML/CSSの経験を活かしながら、1ステップずつ**進めていけば、確実に理解が深まります。

あなたが今日作ったToDoアプリは、小さな第一歩ですが、そこにはすでにReactの本質が詰まっています。

ぜひ、次の一歩として「自分のアプリを作る」という体験にチャレンジしてみてください！

一緒に、楽しみながらReactを学んでいきましょう！

---