Reactについて学ぼう【第一弾】

Last updated at 2025-09-11Posted at 2025-09-11

みなさん、こんにちは！

前回はJavaScript（JS）の基礎を学び、ブラウザ上でWebページを動かす方法を知りましたね。
今回はそのJSをさらに進化させた、Web開発の「トレンド」であるReactに挑戦します。

「Reactは難しい」という声も聞きますが、JSの知識があれば大丈夫！今回は、複雑な設定は全部自動でやってくれるツールを使い、手軽にReactを学習していきましょう。

記事のゴール

Reactのコンポーネントという考え方を理解する
JSXという独自の文法を学んで、HTMLとJSを混ぜて書けるようになる
コンポーネントの状態を管理するuseStateの使い方をマスターする
ボタンを押すと画像が変わる、簡単なReactアプリを作成する

1. はじめに：なぜ今、Reactを学ぶのか？

これまでのようにHTMLとCSS、そしてJSだけでWebページを作ることもできますが、より複雑なWebサービスを作るには限界があります。そこで登場するのがReactです。

Reactは、Webページを**「コンポーネント」**という小さな部品に分けて作る、という考え方で開発をシンプルにしました。

この「部品化」のおかげで、同じ部品を何度も使い回したり、部品ごとに独立して開発を進めたりできるので、開発効率が飛躍的に上がります。そのため、多くの現場でReactが使われるのです。

2. 開発環境の準備：`Vite`で一発OK！

Reactを始めるには、いくつかの設定が必要ですが、ご安心ください！
今回は ~~create-react-app~~ Viteというツールを使い、自動でやってもらいます。

create-react-appはReact公式では非推奨とされているようです。

2.1. Node.jsのインストール

まずは、Node.jsをインストールします。Node.jsは、Reactを動かすために必要なツールです。

公式サイトからインストーラーをダウンロード：https://nodejs.org/
推奨版（LTS）をインストールしてください。

インストールが完了したら、ターミナル（またはコマンドプロンプト）で以下のコマンドを実行し、バージョンが表示されるか確認しましょう。

node -v
npm -v

2.2. Reactプロジェクトの作成

それでは、いよいよReactプロジェクトを作成します。好きな場所に新しいフォルダを作り、ターミナルでそのフォルダに移動して、以下のコマンドを実行してください。

npm create vite@latest

プロジェクト名を聞かれたら、my-react-app と入力します。
フレームワークは react を選びます。
バリアントは javascript を選びます。

これで Vite が必要なファイルを自動で生成してくれます。

【ポイント】

npmとnpx、似ていて混乱しました。簡単に言うと、npmは「パッケージをインストールする」、npxは「パッケージを実行する」という役割です。今回はインストールせずにツールを実行したいので、npxを使います。

2.3. アプリの起動

コマンドが完了したら、新しくできた my-react-app フォルダに移動し、以下のコマンドを順番に実行します。

cd my-react-app
npm install
npm run dev

npm install は、プロジェクトに必要なライブラリをインストールするコマンドです。
npm run dev を実行すると、リンクが表示されると思うので、そちらをクリックしてください。
これであなたのReactアプリが動きます！

3. Reactの基本：3つの概念を学ぼう

Reactでアプリを作るには、3つの重要な概念を理解する必要があります。

3.1. コンポーネント：Webページの部品

Reactでは、Webページをすべてコンポーネントとして考えます。
srcフォルダの中にある App.jsx を見てみましょう。.jsxという拡張子は、JSX（HTMLとJavaScriptを混ぜて書く文法）を使っているファイルであることを示しています。

// src/App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

App()という関数が、画面全体を表す一番大きなコンポーネントです。この中に、他の小さな部品（コンポーネント）を組み込んでいくイメージです。

3.2. JSX：HTMLとJSの融合

return文の中にある<div className="App">といった部分は、HTMLにそっくりですが、これはJSXというReact独自の文法です。

JSXは、HTMLのような見た目でJavaScriptのロジックを自由に書けるのが特徴です。例えば、以下のように変数や関数をHTMLに埋め込むことができます。

const name = "太郎";
const greeting = <p>こんにちは、{name}さん！</p>;

3.3. ステート（`useState`）：状態を管理するフック

Reactコンポーネントは、ボタンが押されたかどうか、画像が表示されているかどうか、といった 「状態」 を持っています。この状態を管理するのがuseStateという機能です。

useStateを使うと、状態が変わるたびに、Reactが自動で画面を更新してくれます。
Reactがスムーズに動く秘密ですね。

4. 実践編：ボタンで画像が切り替わるアプリを作ろう

それでは、いよいよ実践です。src/App.jsの中身をすべて以下のコードに書き換えてください。

// src/App.js
import React, { useState } from 'react';
import './App.css'; // 必要であればCSSも調整

// 画像のURLを配列にまとめておきます
// Pexelsの著作権フリー画像を使用
const imageUrls = [
  "https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", // 猫
  "https://images.pexels.com/photos/58997/pexels-photo-58997.jpeg", // 犬1
  "https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg", // 鳥
  "https://images.pexels.com/photos/2071873/pexels-photo-2071873.jpeg"  // 猫2
];

function App() {
  // useStateを使って状態を管理します
  // `currentIndex`は現在の値、`setCurrentIndex`は値を変更するための関数です
  const [currentIndex, setCurrentIndex] = useState(0);

  // ボタンがクリックされた時の処理
  const changeImage = () => {
    // 現在のインデックスを1つ進めます
    const nextIndex = (currentIndex + 1) % imageUrls.length;
    // `setCurrentIndex`関数を呼び出して、状態を更新します
    setCurrentIndex(nextIndex);
  };

  return (
    <div className="App">
      <h1>画像切り替えアプリ</h1>
      <button onClick={changeImage}>次の画像を見る</button>
      <br />
      {/* widthとheightで画像のサイズを固定しておくとレイアウトが崩れにくいです */}
      <img src={imageUrls[currentIndex]} alt="切り替え画像" width="400" height="300" />
    </div>
  );
}

export default App;

ファイルを保存すると、ブラウザが自動で更新されます。
ボタンをクリックしてみてください！JavaScriptだけで作ったときとは違い、コードがとてもシンプルになったはずです。