React入門：初心者が最初に学ぶべきステップ【導入編】

## はじめに
Reactは、WebアプリケーションのUI（ユーザーインターフェイス）を効率的に構築できるJavaScriptライブラリです。Reactの主要な特徴を理解し、実際に簡単なアプリケーションを作りながら学ぶことで、初めてのReact開発をスムーズに進められます。この記事では、Reactの基本概念やJSX、HTMLとの関係性を解説し、実際にカウントアップ機能を持つボタンを実装するまでの手順を紹介します。

## 目次
1. Reactとは？
2. Reactの基本概念
   - コンポーネント
   - 仮想DOM
   - JSXの概要
3. HTMLとの関係性
4. 環境設定
5. 実装：Hello Worldプログラム
6. 実装：3つのボタンでそれぞれカウントアップ
7. まとめと次回予告

## 1. Reactとは？
Reactは、Facebookが開発したJavaScriptライブラリで、UIをコンポーネントベースで構築できます。Reactはシンプルで再利用性の高いコードを実現するため、多くの開発者に採用されています。動的なWebアプリケーションの構築に非常に役立つツールです。

## 2. Reactの基本概念
Reactの強力な機能を理解するために、いくつかの重要な概念を見ていきましょう。

### コンポーネント
**コンポーネント**は、ReactにおけるUIの基本単位です。アプリケーションのUIを小さな独立したパーツに分けることができ、各コンポーネントは他のコンポーネントと独立して機能します。ReactコンポーネントはJavaScriptの関数やクラスとして定義され、以下のように書きます。

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

### 仮想DOM
**仮想DOM**は、Reactが効率的にUIを更新するために使用する仕組みです。従来のDOM（Document Object Model）を直接操作するのではなく、仮想DOMでUIの状態をメモリ上に保持し、差分だけを実際のDOMに反映することで、高速なレンダリングを実現します。

### JSXの概要
**JSX（JavaScript XML）**は、JavaScriptの中でHTMLに似た構文を使ってUIを定義する記法です。見た目はHTMLですが、実際にはJavaScriptの構文です。JSXを使うことで、HTMLタグと同様の方法でReactコンポーネントを記述できます。

**JSXの例**:
```jsx
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
```
上記のコードでは、`props.name`がJSXの中で呼び出され、動的に値を挿入しています。これにより、柔軟なUIのレンダリングが可能です。

## 3. HTMLとの関係性
Reactでは、通常のHTMLファイルを直接操作する機会は少なくなりますが、`public/index.html`という1つのHTMLファイルがプロジェクトの「入り口」として使われます。このHTMLファイル内の`<div id="root"></div>`タグが、Reactコンポーネントをレンダリングする領域となります。

Reactは、JavaScriptコードを使ってこの`root`要素にUIを描画し、すべてのUIの管理をJavaScript側で行います。HTMLそのものはスタート地点として使われるだけであり、動的なUIはすべてJavaScriptとJSXで定義されます。

**index.htmlの例**:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

このHTMLファイルの中で、Reactコンポーネントが動的に描画される領域が`<div id="root"></div>`です。

## 4. 環境設定
Reactを始めるために必要なツールをセットアップします。

### 必要なツール
- **Node.js**: Reactのプロジェクトを作成するために使用します。
- **VSCode**: React開発に適したエディタです。

### 手順
1. Node.jsをインストールします（[公式サイト](https://nodejs.org/)）。
2. ターミナルで以下のコマンドを実行してプロジェクトを作成します。

   ```bash
   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   ```

   プロジェクトが自動で起動し、ブラウザにReactアプリが表示されます。


## 5. 実装：Hello Worldプログラム
まずは最もシンプルな「Hello World」プログラムを作成してみましょう。

### コード
1. `src/App.js`を以下のように書き換えます。

```jsx
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;
```

### 説明
- **コンポーネントの作成**: `App`というReactのコンポーネントを作成し、`<h1>Hello, World!</h1>`というテキストを表示しています。
- **JSX**: このコードはHTMLに似ていますが、JSXというReact独自の構文で記述されています。`<div>`や`<h1>`は実際にはJavaScriptの構文です。
- **エクスポート**: `App`コンポーネントを他のファイルでも使用できるように`export`しています。

### 実行結果
ブラウザに「Hello, World!」と表示されれば成功です。


## 6. 実装：3つのボタンでそれぞれカウントアップ
Reactの基本を理解したところで、3つのボタンをクリックするたびにカウントがアップされる簡単なアプリを作成しましょう。

**`App.js`のコード**:

```jsx
import React, { useState } from 'react';

function ClickCounter() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  const totalClicks = count1 + count2 + count3;

  return (
    <div>
      <h1>ボタンごとのクリック数</h1>
      <button onClick={() => setCount1(count1 + 1)}>ボタン1: {count1}</button>
      <button onClick={() => setCount2(count2 + 1)}>ボタン2: {count2}</button>
      <button onClick={() => setCount3(count3 + 1)}>ボタン3: {count3}</button>
      <h2>合計クリック数: {totalClicks}</h2>
    </div>
  );
}

export default ClickCounter;
```

### 解説
- **useState**: クリック数を管理するために`useState`を使用しています。各ボタンのクリック数を個別に管理します。
- **クリックイベント**: ボタンをクリックするたびに対応するカウントが増加します。
- **合計クリック数**: 3つのボタンのクリック数を合計し、表示しています。


### 画面イメージ
![スクリーンショット 2024-09-27 16.25.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/b007efc4-d2cb-625e-f027-b953ad875565.png)


## 7. まとめと次回予告
今回の記事では、Reactの基本的な概念であるコンポーネントやJSX、仮想DOMについて学び、実際にカウントアップ機能を持つボタンを実装しました。次回は、状態管理やコンポーネント間のデータ共有についてさらに掘り下げた内容を解説する予定です。

---

この記事が役に立ったと思った方は、ぜひ「いいね」とフォローをお願いします！次回の記事もお楽しみに！