Happy Web Engineer
Last updated on

フロントエンド開発に欠かせないReact入門｜初心者から中級者へのステップアップ

はじめに

Web開発の世界は日々進化しています。特にフロントエンドの分野では、HTML・CSS・JavaScriptの基本に加えて、多様なフレームワークやライブラリが次々と登場してきました。
その中で圧倒的なシェアを誇り、世界中のエンジニアに利用されているのが React です。

ReactはFacebook（現Meta）が開発したライブラリで、シンプルな学習曲線と強力な機能を兼ね備えています。UIを「部品（コンポーネント）」に分けて考える仕組みは、Web開発のスタンダードとも言えるアプローチになりました。

この記事では、初心者がReactをゼロから学び始められるように基本をやさしく解説し、さらに 中級者に向けて実務で役立つ知識や拡張方法 までを徹底的に紹介します。
実際に手を動かして試せるコード例も交えながら進めるので、学びながら「小さなアプリを作れる」感覚を得られるはずです。

Reactの基本概念を理解する

コンポーネント指向とは？

React最大の特徴は「コンポーネント指向」です。
アプリを「ボタン」「入力フォーム」「カード」といった小さな部品に分けて開発し、それらを組み合わせることで大きなUIを構築します。

例えばブログ記事ページなら、次のように分割できます。

  • ヘッダー
  • 記事タイトル
  • 記事本文
  • コメント欄

それぞれを独立したコンポーネントとして作ることで、コードの再利用性が高まり、保守がしやすくなります。

仮想DOMの仕組み

通常のJavaScriptではDOMを直接操作しますが、これが増えると処理が重くなります。
Reactでは 仮想DOM を用いて、変更部分だけを効率的に更新します。
これにより画面の描画がスムーズになり、複雑なアプリでも高速に動作します。

JSXとは？

JSXは「JavaScript XML」の略で、JavaScript内にHTMLライクな記法を埋め込める仕組みです。
例：

const element = <h1>Hello, React!</h1>;

JSXを使うことで、見た目の構造と処理を直感的に書けるようになります。

環境構築の手順

Node.jsのインストール

ReactはNode.jsを前提に動きます。公式サイトから最新版をインストールしてください。

プロジェクト作成

最も簡単なのは「Create React App」を使う方法です。

npx create-react-app my-app
cd my-app
npm start

これでローカル環境にReactアプリが立ち上がり、ブラウザで確認できます。

Viteを使った高速セットアップ

最近はViteを使うのも主流です。より軽量でビルドが高速になります。

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

初めてのコンポーネント

import React from 'react';

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

export default App;

これが最小のReactコンポーネントです。
シンプルな関数でUIを返すだけで、Reactアプリが動きます。

PropsとState

Props（プロパティ）

外部からコンポーネントに渡すデータのこと。変更はできません。

function Welcome(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

<Welcome name="太郎" />

State（状態）

コンポーネント内部で保持し、変更できるデータ。useStateを使って管理します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>クリック数: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

Propsは外から受け取る値、Stateは中で管理する値、と覚えると整理しやすいです。

useEffectとライフサイクル

Reactではコンポーネントが描画されたり更新されたりするときに処理を追加できます。

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>{seconds}秒経過しました</p>;
}

useEffectは「副作用の処理」を書く場所で、API通信やタイマー設定などに使います。

実践！小さなアプリを作ってみよう

フォーム入力とリスト表示

import React, { useState } from 'react';

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

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

  return (
    <div>
      <h2>ToDoアプリ</h2>
      <input 
        value={task} 
        onChange={(e) => setTask(e.target.value)} 
        placeholder="やることを入力" 
      />
      <button onClick={addTask}>追加</button>
      <ul>
        {tasks.map((t, i) => <li key={i}>{t}</li>)}
      </ul>
    </div>
  );
}

入力フォームとリスト表示を組み合わせれば、簡単なToDoアプリが完成します。

API連携

import React, { useState, useEffect } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts?_limit=5")
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h2>記事一覧</h2>
      <ul>
        {posts.map(p => <li key={p.id}>{p.title}</li>)}
      </ul>
    </div>
  );
}

外部APIからデータを取得して表示することで、実用的なWebアプリに近づきます。

よくあるつまずきポイントと解決法

  • 再レンダリングが止まらない → useEffectの依存配列を正しく設定する
  • PropsとStateの混乱 → 「外から渡すのがProps、中で管理するのがState」と整理
  • エラーが怖い → まずはコンソールに出たエラーメッセージを読む習慣をつける

中級者へのステップアップ

  • Next.js を使ってSSRやSSGを学ぶ
  • TypeScript導入 で型安全なコードを書く
  • パフォーマンス改善（メモ化、コード分割、Lazy Loading）
  • テスト自動化（Jest, React Testing Library, Playwright）

これらを順に学ぶことで「個人開発レベル」から「チーム開発で通用するスキル」へ成長できます。

Reactの現場活用事例

  • ECサイト：商品検索、カート、レビュー表示
  • SaaSダッシュボード：グラフやフィルタリングで大量データを扱う
  • SNS：コメントやチャットなどリアルタイム更新

多くの企業で採用されており、学んで損はないスキルです。

学習の進め方

  1. 小さなコンポーネントを作る
  2. PropsとStateでデータの流れを理解する
  3. 簡単なアプリを完成させて「動く体験」を積む
  4. 公式ドキュメントで深掘りする
  5. 実務で使われるNext.jsやTypeScriptへ広げる

まとめ

Reactは「初心者でも始めやすく、中級者以上でも十分に使い込める」万能なライブラリです。
まずはコンポーネントやStateから始め、小さなアプリを完成させて成功体験を積むことが重要です。

関連記事

👉 フロントエンド開発に必須のVS Code拡張機能まとめ｜初心者から中級者まで役立つ厳選ツール
👉 TypeScriptを導入するメリットと学習の始め方｜初心者でも挫折しないステップ解説
👉 HTML・CSS・JavaScriptの違いを初心者向けに解説｜未経験から理解するWebの基礎
👉 初心者が最短でWebエンジニアになるための学習プラン｜独学から就職・転職までのロードマップ
👉フロントエンド開発にはReactとVueどちらがいいの？｜初心者〜中級者向け徹底解説