【React入門】忙しい人のためのReactチュートリアル【2025年更新版】

# 更新ログ
この記事は数年前に書いたものですが有り難いことに新年度が近づくと読んでくださる方がいらっしゃるようで、古い内容では不都合が生じることもあるかと思い不定期にはなりますが最新情報に更新したいと思います。
読んでくださった皆様にこの場を借りてお礼申し上げます。
- 2025/1 : 現時点最新のReactに対応、全体の文章校正・最新化

# はじめに
本記事は**Reactにこれから一歩を踏み出したいけどチュートリアルの難しい言葉理解してる時間はあまりない**、という方に向けて、**環境の構築からなんとなく画面が動くまで**を解説します。
今回はReact + TypeScriptをベースに説明します。
これを読んでもっと知りたいと思った方は是非公式チュートリアルをお試しください。
https://ja.react.dev/learn

# 目次
- [はじめに](#はじめに)
- [環境構築](#環境構築)
- [Reactの導入](#reactの導入)
- [Reactの書き方](#reactの書き方)
- [コンポーネントとは](#コンポーネントとは)
- [実際に書いてみる](#実際に書いてみる)
    - [変数の利用](#変数の利用)
    - [ルーティング](#ルーティング)
    - [子コンポーネントとprops](#子コンポーネントとprops)
    - [React Hooksとstate](#react-hooksとstate)
- [おわりに](#おわりに)

# 環境構築
## Node
まずはパッケージ管理ツールであるnpmを利用するためにNodeをインストールします。
### インストール
下のリンクからnodeのインストーラをダウンロードし、インストールを行ってください。
https://nodejs.org/ja/

CLIがわかる方はそちらでインストールしていただいても問題ありません。

### Nodeとnpmのインストール確認
うまくいけばnodeとnpmのバージョンが表示されます。
（バージョンの数字が一致しなくても問題ありません、ある程度新しいものを利用しましょう）
```shell
node -v
v23.3.0
```
```shell
npm -v
10.9.0
```

## Visual Studio Code
### インストール
次に、統合開発環境の`Visual Studio Code`をインストールします。
Atomなどでも問題ないですが、個人的に一番便利なのが`Visual Studio Code`だと思っています。
https://code.visualstudio.com/download

### 日本語化
必要に応じて日本語化が可能です。
1. Visual Studio Codeを開き、サイドバーから拡張機能のストアに移動します。
![スクリーンショット 2022-03-07 11.12.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/520f9c9a-3f18-c9e8-423b-d75ca4397efe.png)
2. 検索欄に```Japanese```と打ち、```Japanese Language Pack```をインストールします。
3. Visual Studio Codeを再起動します。

うまくいかない場合、`F1`を押して画面上部に出る「コマンドパレット」に`display`と入力し、`Configue Display Language`を選択、「日本語(ja)」を選択すると変更できます。

# Reactの導入
### インストール
~~今回は```create react app```という、react公式が提供している環境の一括インストールを利用します。~~

数年前までは`Create React App`が主流でありこの記事でも紹介しておりましたが、2023年にサポートが終わっており利用をお勧めしません。
代わりにViteというものを利用してインストールを行います。

Visual Studio Codeを開き、フォルダを開くで開発に使いたいフォルダを開きます。
その状態で画面上部のタブから「ターミナル」を開き、「新しいターミナル」をクリックします。

![test - Cursor 2025_01_20 1_22_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/4a3eade5-74d5-26a7-c7a6-b43227a962bb.png)

画面下部にターミナルというツールが表示されるので、下記のコマンドを入力してください。

```shell
npm create vite@latest
```
```shell
Need to install the following packages:
create-vite@6.1.1
Ok to proceed? (y)
```
create-viteをインストールしますか？と聞かれるのでYesと答えます。

```shell
> npx
> create-vite

? Project name: › 
```

ここで作成するフォルダの名前を決めます（英語が良いです）

```shell
✔ Project name: … test
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others
```

どれで開発するか聞かれるため、今回は`React`を選択します。
他のフレームワークを勉強するときもViteが楽に準備してくれるので、とても助かります。

```shell
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC
    React Router v7 ↗
```

開発に使う言語等を聞かれます。今回は`TypeScript + SWC`を選択します。
`SWC`はあまり気にしなくてもよいですが御幣を恐れずに言うと「一部プロセスが高速に動く」という感じです。

```shell
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /home/terao/work/test...

Done. Now run:

  cd test
  npm install
  npm run dev
```

これで完了です！

画面左側に新しいフォルダが作られていると思います。
画面上部の「ファイル」タブをクリックして「フォルダーを開く」から新しく作られた開発用フォルダを開いてください。

### 確認
このようにいくつかのファイルが生成されていればインストール成功です。（おそらくコードの内容などは若干違いますが問題ありません）
![スクリーンショット 2022-03-07 11.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/bf11a5cd-5f11-2d46-4f2b-fb56c9634134.png)
では、実際に動かしてみましょう。

```shell
npm install
```

ターミナルに上記のコマンドを入力してください。

いろいろな文字が流れ、また入力できるようになったら完了です。
これはコードを動かすのに必要な様々なものをインストールしています。
「ライブラリ」等で調べると色々出てくるのでいずれ勉強していただければと思います。

次に下記のコマンドをターミナルに入力してください。

```shell
npm run dev
```


![package.json - test [WSL_ Ubuntu] - Cursor 2025_01_20 1_29_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/b509b8df-6c54-6349-e980-1da4544c5fc5.png)


ターミナルにこんな文字が表示されれば成功です。

```Local: http://localhost:5173```

ターミナルの3行目に記載されたこのURLをブラウザで開いてみてください。

![Vite + React + TS - Vivaldi 2025_01_20 1_31_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/25e37279-f48d-90ca-a4ee-0bfc4c0192e7.png)


このような画面が表示されたと思います。
これで無事Reactの導入完了になります。

# Reactの書き方
## 動かしてみる
まずは試しに今開いているサンプルページを少し触ってみましょう。

```{プロジェクト名}/src/App.tsx```を開き、19行目の文字を```Hello World!```にしてみましょう。
保存するとターミナルに文字が走り、自動的にページが更新されるはずです。

![Vite + React + TS - Vivaldi 2025_01_20 1_33_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/7d27141a-e43a-1b0f-4962-9a1cdab63da2.png)


このように、Reactではホットリロードという自動更新機能がデフォルトで導入されています。

## .tsxファイル
次に```.tsx```というファイルについて簡単に説明します。
先程```App.tsx```という名前のファイルを編集しました。見慣れない拡張子だと思いますが、これは「React特有の書き方を利用したファイル」という意味になります。(JavaScriptの場合```.jsx```となります)

特徴としては、**関数の返り値にHTMLを記載する**ところが他の記法との大きな違いになります。
Reactの考えとしては「ロジック(JavaScript)とマークアップ(HTML)を別々に書く」従来の**技術の分離**ではなく、「ロジック(JavaScript)とマークアップ(HTML)を機能ごとにひとまとめにする」という**関心の分離**を採用しているため、このような記法になります。

# コンポーネントとは
Reactについて調べていると、しばしば「コンポーネント」という単語を目にします。
コンポーネントとは**ロジックとマークアップを両方含む疎結合の部品**を指します。
つまり、同じ機能を必要な場所で何度も再利用できるように機能ごとに分離して管理するという考え方です。

ページの余白等を決めるコンポーネント
↓
ページに含まれるコンテンツのコンポーネント
↓
コンテンツに含まれるアイテムコンポーネント

と言ったように、分離を行います。
![イラスト2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/44e3840a-64a5-bda6-9d17-e1db00b0924f.png)

# 実際に書いてみる
実際に動くコードを作ってみます。
まずは先程見た```App.tsx```の中身をシンプルなものにしてみましょう。
```react
function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;
```
画面を見るとただ「Hello World!」と白い画面に表示されています。
先程[話題](Reactの書き方)に出たように、関数の返り値がHTMLになっていることが分かりやすく見えると思います。
## 変数の利用
このように書き換えてみましょう
```react:App.tsx
function App() {
  const text: string = 'Hello World!';

  return (
    <div className="App">
      <h1>{text}</h1>
    </div>
  );
}

export default App;
```
画面を見ると何も変化がないことがわかると思います。
上記のように、変数をHTML内に入れられるのも```.tsx```の特徴です。

## ルーティング
次はボタンを押したら画面が遷移されるようにしたいと思います。
まずは下記の画面遷移に使うライブラリをインストールします。

```shell
npm i react-router-dom
```

まずApp.tsxを下記のように変更します。
```react:App.tsx
import { Link } from "react-router-dom";

export const App = () => {
  const title: string = "Hello World!";

  return (
    <div className="App">
      <h1>{title}</h1>
      <Link to='/test'>
        ボタン
      </Link>
    </div>
  );
}
```

`{プロジェクト名}/src/test.tsx`を作成し下記のコードを記述します。

```react:test.tsx
export const Test = () => {
    const title: string = "test";

    return (
        <div className="Test">
            <h1>{title}</h1>
        </div>
    );
}
```
その後、```{プロジェクト名}/src/main.tsx```を下記のように編集します。
ここでルーティングするURLやコンポーネントを指定しています。
```react:index.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import "./index.css";
import { App } from "./App";
import { Test } from "./test";
import { BrowserRouter, Route, Routes } from "react-router-dom";

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>,
)
```

画面に戻り、ボタンを押すと画面が切り替わる（遷移する）ことが分かると思います。

## 子コンポーネントとprops
今度はコンポーネント内でコンポーネントを呼び出してみましょう。
[コンポーネントの説明](コンポーネントとは)で説明したように、コンポーネントは機能を分割したものになります。そのため、例えば**画面コンポーネントの中にボタンコンポーネントを呼び出したい**という場合は、コンポーネントをコンポーネントの中に呼ぶ、**親子関係のような構造**が出来上がります。

```{プロジェクト名}/src/components/link.tsx```を作成し下記のコードを記述します。
```react:link.tsx
type LinkButtonProps = {
    text: string,
    link: string
}

export const LinkButton = (props: LinkButtonProps) => {
  return (
    <div className="LinkButton">
      <Link to={props.link}>
        {props.text}
      </Link>
    </div>
  );
}
```
この時、`link.tsx`に`type`というものを宣言しています。
これは**型宣言**と呼ばれるもので、この型を利用した場合はオブジェクト型で`string型のtext`と`string型のlink`しかこの変数に入りませんという意味になります。TypeScriptはこうやって型を指定していくことで変な値の出入りを防いでいます。

次にApp.tsxを下記のように変更します。
```react:App.tsx
import { LinkButton } from "./children/LinkButton";

export const App = () => {
  const title: string = "Hello World!";

  return (
    <div className="App">
      <h1>{title}</h1>
      <LinkButton text="ボタン" link="/test" />
    </div>
  );
}
```

画面を見るとルーティングの時と同じように動作しているのが分かります。
`link.tsx`は3行目の関数の引数に先程作成した型を指定しています。
このコンポーネント関数の引数が`props`と呼ばれるもので、親コンポーネントから子コンポーネントへ値を受け渡すことが可能になります。
親側で書いた処理を子に渡すことで、**子が不要な処理を抱え込まずに済む**のがメリットです。
つまり、**担当する機能を分割したままにコンポーネントを細かく増やすことができる**のです。

## React Hooksとstate
まずはこのように「増やす」ボタンを押したら```num```が加算されるように書いてみます。
```react:App.tsx
import { LinkButton } from "./children/LinkButton";

export const App = () => {
  const title: string = "Hello World!";
  let num: number = 0;

  const increment = () => {
    num += 1;
    console.log(num);
  };

  return (
    <div className="App">
      <h1>{title}</h1>
      {num}回押しました。
      <LinkButton text="ボタン" link="/test" />
      <button type="button" onClick={increment}>増やす</button>
    </div>
  );
}
```

![スクリーンショット 2022-03-07 15.28.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/3ac7b9d2-8dee-f37b-bee6-0abd79db4be0.png)

この書き方では画面の文字が変わらない事が分かります。
Reactでは、値の更新はとある方法で検知させないと画面に反映がされません。

ここで登場するのが状態管理、**state**になります。
簡単に説明すると**関数の状態を必要な時だけ更新することで、常に最新のHTMLを最低限の処理で返却する**という機能です。
いくつか方法がありますが、今回はReact Hooksと呼ばれる機能を利用します。
下記のようにコードを修正してください。

```react:App.tsx
import { useState } from "react";
import { LinkButton } from "./children/LinkButton";

export const App = () => {
  const title: string = "Hello World!";
  const [num, setNum] = useState(0);

  const increment = () => {
    setNum(num + 1);
    console.log(num);
  };

  return (
    <div className="App">
      <h1>{title}</h1>
      {num}回押しました。
      <LinkButton text="ボタン" link="/test" />
      <button type="button" onClick={increment}>
        増やす
      </button>
    </div>
  );
}
```
画面を見ると表示される数字が更新されていることが分かります。
このように、必要な時だけ画面レンダリングを行うことが可能になります。

![スクリーンショット 2022-03-07 15.48.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/e4f96d47-c702-92bc-5685-f4267cbeda7a.png)

また、画面右側のconsoleの数字が画面に対して1低いことが気になった方もいるかと思います。
これはstateの更新は一瞬で済むものではなく、多少時間がかかってしまうため**即時に変更後の値を取り出すのは難しい**ことを表しています。
この**値が更新されたこと**を検知する方法もあるのですが、さらに多くのHooksを理解する必要があるため今回は省略します。
state管理に関するHooksについて紹介した記事があるのでそちらも参照していただけると理解が深まるかと思います。
https://qiita.com/r-terao/items/10d6fe6047f1d117b59a

(これもいつか更新します)

# おわりに
今回はReact + TypeScriptの環境構築から、ある程度コーディングすることが可能なレベルまでのチュートリアルをなるべく単語数少なめで紹介させていただきました。
Reactの良いところは、やはり**関心事の分離**という考え方にあると思います。
これを利用することで、例えば**複数画面で再利用されるボタンコンポーネントを先に作ってから大人数で同時に利用して作業しても、処理部分を持っているのは呼び出す側のコンポーネントのためコンフリクトを起こしにくい**のです。
このように大量にコンポーネントを生み出すような規模の大きい開発で大いに役立つReactというフレームワークを皆様一度利用してはいかがでしょうか？