【初心者OK】Reactってなにが便利なの？動かして体感してみた！

## はじめに
こんにちは！
この記事では、フロントエンド開発でよく名前を聞く「React」について、  
一緒にゆっくり学んでいこう！というスタンスでお届けします✨

「Reactって聞いたことあるけど、ちょっと難しそう…」  
そんなあなたに向けて、できるだけやさしく紹介していきます！
## Reactってなに？
Reactは、Meta（旧Facebook）が開発した  
**UI（ユーザーインターフェース）を作るためのJavaScriptライブラリ**です。

つまり、「画面を作るための道具」みたいなもの！

<center>
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061905/de1ced74-a368-47f2-8a79-981c65fa6ccf.png">
</center>

 **コンポーネント（ボタン）　＝　 <INS><font color="orange">見た目（色・形）</font></INS>　×　 <INS><font color="gree">機能（押したら光る）** </font></INS>
<br> 
💡 **コンポーネントを組み合わせることで画面を作っていく！** 💡　

## どう便利なの？
実は…
**従来のHTMLへの記述方法では再描画コストが高いのです！:scream_cat::sweat_drops:**

***
### 🔁 従来のDOM操作では…

たとえば、HTMLとJavaScriptでこんな感じにボタンを作ってたとします👇

```html
<div id="message">こんにちは！</div>
<button onclick="update()">更新</button>

<script>
  function update() {
    document.getElementById("message").innerHTML = "こんにちは、React！";
  }
</script>
```
このような場合、ブラウザは要素全体を再描画することが多く、
特に要素が多くなると処理が重くなってしまいます…💦
***

### ⚛️ Reactでは…
Reactは、変更があったところだけをピンポイントで更新します！

```jsx
function App() {
  const [text, setText] = useState("こんにちは！");

  return (
    <>
      <div>{text}</div>
      <button onClick={() => setText("こんにちは、React！")}>更新</button>
    </>
  );
}
```
ここで起きているのは…

**💡「差分だけ」＝ 変わった部分だけを再描画している！** 
***
#### 🧠 なぜそんなことができるの？
Reactは「仮想DOM（Virtual DOM）」という仕組みを使っています！

仮想DOMは、ブラウザに表示されているDOMをメモリ上でコピーしておいて、
変更前と変更後を比較し、必要な部分だけ効率的に更新してくれます👀✨


## 実際にコーディングしてみよう！
「Reactが効率的に再描画してくれる」って話、  
ちょっとワクワクしてきませんか？😎

ここからは、**ローカルでReactアプリを動かして、  
ボタンを押すとテキストが変わる！** というところまで一緒にやってみましょう！

#### 🛠 ステップ1：Reactアプリを作ろう！

まずは以下のコマンドを実行！

```bash
npx create-react-app my-app
cd my-app
npm start
```
⬆️ これだけで「 http://localhost:3000 」にReactのアプリが立ち上がります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061905/7f096cd1-5c7b-4697-87cb-2602e03f141f.png)

:::note warn
初回実行時に、以下のような確認メッセージが表示される場合があります
```text
Need to install the following packages:
  create-react-app@latest
Ok to proceed? (y)
```
この場合は、y を入力してEnterキーを押してください
これは「このツール（create-react-app）をインストールして使っていい？」という確認なので、問題ありません！
:::

:::note warn
補足
すでに同じ名前（例：`my-app`）のフォルダがある状態で  
`npx create-react-app my-app` を実行すると、以下のようなエラーになります
```text
A template was not provided. This is likely because you're trying to create a project in a directory that already exists.
```
この場合は、別のフォルダ名を使って作成しましょう！（例：`my-app2`）
:::


***
**🧭「コマンドってなに？」「どうやって実行するの？」と不安な方へ**

　とてもわかりやすく解説してくれている記事があります
　**VSCodeでReact開発環境を整える方法** 
　 https://high-career.jp/2022/01/04/vscode-react-dev/

<br> 
フォルダ構成は下記リンクを参照！✨

https://qiita.com/omo_taku/items/9553430a64bd3e79b948

***
#### ✏️ ステップ2：テキストを書き換えてみよう！
src/App.js を開いて、以下のように書き換えてみてください👇
```jsx
import { useState } from 'react'; // ReactからuseStateをインポート

function App() {
// text という状態（state）と、それを更新する setText を定義
  const [text, setText] = useState('こんにちは！');
// 画面に表示する内容を返す
  return (
    <div className="App">
      <h1>{text}</h1>
      <button onClick={() => setText('こんにちは、React！')}>
        テキストを変える
      </button>
    </div>
  );
}
export default App; // このコンポーネントを他の場所でも使えるようにする
```
保存後下図のようになればOK！:+1:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061905/cb95801c-cd44-43cc-aada-e1aafdaf4ac0.png)

👇　🔁 ボタンを押すと…！？　👇
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061905/24f48bd2-f38c-408c-b55e-202a5c4389c6.png)

**🤔 ここで注目！**
Reactでは、ボタンを押して text の値が変わると…

 **⚛️ Reactが自動で表示を更新してくれます！**

しかも、変わった部分 だけ をサクッと再描画してくれるから、
速くて・軽くて・気持ちいい！

***
### 💻コード説明
ここからは、さっき実践したコードを
一緒に確認していきましょう！
***
１. useStateを使う準備をする
```jsx
import { useState } from 'react'; // ReactからuseStateをインポート
```
ReactがもっているuseStateという道具を使えるようにしています！

用語メモ ✏️
・useState = 画面に表示するデータを覚えておくための機能

 
:::note info
ここは「道具を取り出してるんだな〜」くらいで今はOK！
:::

***
２. Appというコンポーネントを作る
```jsx
function App() {
```
「App」という名前の **コンポーネント（画面の部品）** を作り始めます

Reactでは、画面を「部品」に分けて作るのが基本です！
***
３. 状態（＝textという変数）を管理する
```jsx
// text という状態（state）と、それを更新する setText を定義
  const [text, setText] = useState('こんにちは！');
```

Reactでは、画面に表示するデータを「状態（state）」として管理します

この1行でやっているのは、
・ `text` という状態変数を宣言（初期値は 'こんにちは！'）
・ `setText` という状態を更新する関数もセットで受け取っている
ということです！

普通の変数と違って、stateは「画面とつながっている」のがポイント👌
つまり、`text` の中身が変わると、それに合わせて画面も自動で更新される仕組みになっています！

:::note info
状態（state）＝「画面をリフレッシュするトリガー付きの変数」みたいなものと考えるとイメージしやすいです！
(次回詳しく説明します🌟)
:::
***
４. returnで画面に表示する内容を決める
この`return`の中で、このコンポーネントが画面に出力する内容を定義しています

中身のポイント☝️
```jsx
<h1>{text}</h1>
```
　→ 今のtextの中身を表示する
　つまり、`text`の値が 'こんにちは！' なら「こんにちは！」と表示されるし、
　`text`が 'こんにちは、React！' に変わったら、画面上もちゃんと更新されます！
 ```jsx
<button onClick={() => setText('こんにちは、React！')}>
```
　→ ボタンを押したら、`setText`を使って`text`を更新する
　これによって、表示されるテキストも一緒に変わります！

***
５. export defaultで外に出す
```jsx
export default App; // このコンポーネントを他の場所でも使えるようにする
```
このファイルで作った**App**コンポーネントを他のファイルからインポートできるようにしています

ここは今すぐ深く理解しなくても大丈夫👍✨
ざっくり「このコンポーネントをアプリのメイン画面に使うための準備」くらいに思っておきましょう！

## まとめ

今回は、

- Reactってなにが便利なの？
- 実際にローカルでReactアプリを立ち上げる方法
- ボタンをクリックして、表示を変える基本の仕組み

を一緒に体験してみました！

:::note warn
補足
本記事では、Reactを手軽に体験できる方法として `npx create-react-app` を使用しています

ただし、現在React公式からは「create-react-app は今後推奨されない」と発表がありました。  
参考：https://ja.react.dev/blog/2025/02/14/sunsetting-create-react-app

学習目的で使う分には問題ありませんが、  
もし今後本格的にReactでアプリ開発をしてみたい場合は、  
より軽量で高速な [Vite](https://vitejs.dev/) や、フルスタック対応の [Next.js](https://nextjs.org/) といった代替ツールの利用も検討してみてくださいね！
:::

***

###  次回予告：さらにReactに触れてみよう！
今回のように「状態（state）」の変化で画面が更新される体験ができたら、次はもう一歩進んでみましょう！

#### ⏭️ 次回以降の予定はこちら！
- 🔢 **カウントアップアプリを作ってみる** 
→ ボタンを押すたびに数字が増えていく簡単アプリを通して、useState をさらに深く理解！

- :books: **複数の状態を扱ってみる** 
→ 複数のuseStateを使って、ちょっとだけ複雑なUIにもチャレンジ！

- 🎨 **CSSでスタイリングしてみる** 
→ Reactの中でどうやってデザインを整える？簡単なスタイル調整にもトライ！

- 🧩 **コンポーネントを分けてみる** 
→ Reactの本領発揮！コードを小さく・再利用しやすくしていく方法を学びます！
---

💬「やってみたけど分からない！」  
　 「ここをもう少し詳しく教えてほしい！」  
  　　そんなときは、気軽にコメントください😊

一緒にReactを楽しみながら学んでいきましょ〜！💪✨

## 実行環境🌎
- Node.js： v22.14.0
- npm： v10.9.2
- React： v19.1.0
- create-react-app： 5.0.1