React使い方ガイド｜初心者向け基礎から実践まで徹底解説

Reactとは？なぜ今学ぶべきなのか

Reactとは、Meta（旧Facebook）が開発したJavaScriptのUIライブラリです。Webアプリケーションのフロントエンド開発で、世界中の企業が採用しています。2024年のStack Overflow調査によると、Reactは最も人気のあるWebフレームワーク・ライブラリとして連続でランクインしています。

「Reactの使い方を学びたいけれど、何から始めればいいかわからない」という声をよく耳にします。公式ドキュメントは英語中心で、情報が膨大なため、初心者にとってはハードルが高いのが現実です。

この記事では、Reactの使い方を環境構築から実践的なアプリ開発まで、段階的に解説します。現場でReactを使って開発しているエンジニアの視点から、つまずきやすいポイントや実務で役立つテクニックも交えて紹介します。

Reactを学ぶべき理由は大きく3つあります。

• 求人需要の高さ：日本国内のフロントエンド求人の約60%以上がReact経験を求めています
• コンポーネント指向の効率性：再利用可能なUI部品を作ることで、開発スピードが大幅に向上します
• 豊富なエコシステム：Next.js、React Native、Redux など周辺ツールが充実しており、Web・モバイル両方に対応できます

名古屋エリアでも、大手自動車メーカーや製造業のDX案件でReactの採用が急速に進んでいます。株式会社アイティークロスでも、React関連の案件は年々増加しており、エンジニアの需要の高まりを肌で感じています。

Reactの環境構築｜最短で開発をスタートする方法

Reactの使い方を学ぶ第一歩は、開発環境の構築です。2024年現在、Reactプロジェクトを始める方法は主に3つあります。

方法1：Viteを使う（推奨）

現在最も推奨されている方法が、Viteを使ったプロジェクト作成です。従来のCreate React App（CRA）はメンテナンスが停滞しているため、新規プロジェクトではViteが標準になりつつあります。

まず、Node.jsがインストールされていることを確認しましょう。ターミナルで以下のコマンドを実行します。

node -v

Node.js 18以上が表示されれば準備完了です。次に、プロジェクトを作成します。

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

ブラウザで「http://localhost:5173」にアクセスすると、Reactのデフォルトページが表示されます。ここまでわずか数分で完了します。

方法2：Next.jsを使う

本格的なWebアプリケーションを開発する場合は、Next.jsの利用も検討しましょう。SSR（サーバーサイドレンダリング）やルーティングが標準で組み込まれています。

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

React公式ドキュメントでも、プロダクション向けにはNext.jsなどのフレームワーク利用が推奨されています。

方法3：CDNで手軽に試す

環境構築なしでReactを試したい場合は、HTMLファイルにCDNリンクを追加する方法もあります。学習初期の動作確認に便利です。

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

ただし、CDN方式は本格開発には向きません。学習用として割り切って使いましょう。

開発ツールの準備

効率的にReact開発を進めるために、以下のツールを導入しておくことをおすすめします。

Reactの基本｜コンポーネントとJSXの使い方

Reactの使い方を理解するうえで、最も重要な概念が「コンポーネント」と「JSX」です。この2つを正しく理解することが、React習得の鍵になります。

コンポーネントとは

コンポーネントとは、UIを構成する独立した部品のことです。例えば、Webサイトのヘッダー、サイドバー、ボタン、カードなど、すべてがコンポーネントになります。

Reactでは「関数コンポーネント」が主流です。以下が最もシンプルなコンポーネントの例です。

function Welcome() {
  return <h1>こんにちは、React！</h1>;
}

この関数がHTMLのような記述を返しているのがポイントです。これが「JSX」と呼ばれる構文です。

JSXの基本ルール

JSXはJavaScriptの中にHTMLライクな記述ができる構文拡張です。見た目はHTMLに似ていますが、いくつかの重要な違いがあります。

• classではなくclassName：HTMLのclass属性はJavaScriptの予約語と重複するため、classNameを使います
• 閉じタグが必須：imgタグやbrタグも必ず閉じる必要があります（例：<img />）
• 単一のルート要素：コンポーネントは一つの親要素で囲む必要があります
• JavaScriptの埋め込み：中括弧{}でJavaScriptの式を埋め込めます

実際のコード例を見てみましょう。

function UserCard({ name, age, role }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>年齢：{age}歳</p>
      <p>役割：{role}</p>
      {age >= 20 && <span>成人済み</span>}
    </div>
  );
}

Props（プロップス）の使い方

Propsは、親コンポーネントから子コンポーネントにデータを渡す仕組みです。関数の引数として受け取ります。

// 親コンポーネント
function App() {
  return (
    <div>
      <UserCard name="田中太郎" age={28} role="エンジニア" />
      <UserCard name="鈴木花子" age={25} role="デザイナー" />
    </div>
  );
}

// 子コンポーネント
function UserCard({ name, age, role }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>{age}歳 / {role}</p>
    </div>
  );
}

Propsは読み取り専用です。子コンポーネントでPropsを直接変更することはできません。これはReactの「単方向データフロー」という重要な設計思想に基づいています。

コンポーネント設計のコツ

実務でReactを使う際、良いコンポーネント設計が開発効率を大きく左右します。以下のポイントを意識しましょう。

• 単一責任の原則：一つのコンポーネントには一つの役割だけを持たせます
• 適切な粒度：小さすぎず大きすぎない、再利用しやすいサイズに分割します
• 命名規則：コンポーネント名はパスカルケース（UserCard、HeaderNavなど）で統一します
• ファイル構成：1ファイル1コンポーネントを基本とし、関連ファイルはフォルダでまとめます

React Hooksの使い方｜状態管理と副作用を理解する

React Hooksは、関数コンポーネントに状態管理やライフサイクル機能を追加する仕組みです。2019年のReact 16.8で導入されて以降、Reactの使い方の中心的な概念となっています。

useState：状態管理の基本

useStateは、コンポーネントに「状態（state）」を持たせるためのHookです。ユーザーの入力値、表示/非表示の切り替え、カウンターの値など、画面上で変化するデータを管理します。

import { useState } from 'react';

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

return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}

useStateの重要なポイントは3つあります。

• 状態の更新にはセッター関数（setCount）を使う（直接代入はNG）
• 状態が更新されると、コンポーネントが自動的に再レンダリングされる
• 初期値はuseStateの引数で指定する

useEffect：副作用の処理

useEffectは、データの取得、タイマーの設定、DOM操作など、レンダリング以外の処理（副作用）を行うためのHookです。

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []); // 空の依存配列 = マウント時に1回だけ実行

if (loading) return <p>読み込み中...</p>;

return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

useEffectの第2引数（依存配列）の指定方法で、実行タイミングが変わります。

useContext：グローバルな状態共有

useContextは、コンポーネントツリー全体でデータを共有するためのHookです。テーマ切り替えやログインユーザー情報の共有などに使われます。

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function Header() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <header className={theme}>
      <button onClick={toggleTheme}>テーマ切替</button>
    </header>
  );
}

その他の重要なHooks

実務でよく使うHooksをまとめます。

• useRef：DOM要素への参照や、レンダリングに影響しない値の保持に使用します
• useMemo：計算コストの高い処理結果をキャッシュし、パフォーマンスを最適化します
• useCallback：関数をメモ化し、不要な再生成を防ぎます
• useReducer：複雑な状態管理をReducerパターンで整理できます

Hooksには守るべきルールがあります。Hooksはコンポーネントのトップレベルでのみ呼び出し、条件分岐やループの中では使用しないでください。これを守らないと予期しないバグが発生します。

実践編｜ToDoアプリで学ぶReactの使い方

ここまで学んだ知識を活かして、実際にToDoアプリを作ってみましょう。実践的なコードを書くことで、Reactの使い方への理解が格段に深まります。

アプリの機能要件

• タスクの追加
• タスクの完了/未完了の切り替え
• タスクの削除
• 残りタスク数の表示

メインコンポーネント（App.jsx）

import { useState } from 'react';
import TodoInput from './TodoInput';
import TodoList from './TodoList';

function App() {
  const [todos, setTodos] = useState([]);

const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

const remainingCount = todos.filter(todo => !todo.completed).length;

return (
    <div className="app">
      <h1>ToDoアプリ</h1>
      <p>残りタスク：{remainingCount}件</p>
      <TodoInput onAdd={addTodo} />
      <TodoList
        todos={todos}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
      />
    </div>
  );
}

入力コンポーネント（TodoInput.jsx）

import { useState } from 'react';

function TodoInput({ onAdd }) {
  const [text, setText] = useState('');

const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim() === '') return;
    onAdd(text.trim());
    setText('');
  };

return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="タスクを入力..."
      />
      <button type="submit">追加</button>
    </form>
  );
}

リストコンポーネント（TodoList.jsx）

function TodoList({ todos, onToggle, onDelete }) {
  if (todos.length === 0) {
    return <p>タスクがありません。追加してみましょう！</p>;
  }

return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} className={todo.completed ? 'completed' : ''}>
          <span onClick={() => onToggle(todo.id)}>
            {todo.completed ? '✅' : '⬜'} {todo.text}
          </span>
          <button onClick={() => onDelete(todo.id)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

このToDoアプリには、Reactの主要な概念がすべて含まれています。useState、Props、イベントハンドリング、リストレンダリング、条件分岐、コンポーネント分割などを一通り実践できます。

ここからさらに発展させるなら、ローカルストレージへの保存（useEffect活用）、フィルタリング機能、ドラッグ&ドロップによる並び替えなどに挑戦してみましょう。

Reactでよくあるエラーと解決方法

Reactの使い方を学ぶ過程で、多くの初心者がつまずくポイントがあります。現場のエンジニアが実際に遭遇するエラーと、その解決方法を紹介します。

エラー1：「Each child in a list should have a unique key prop」

リストをレンダリングする際に、各要素にユニークなkey属性がないと発生します。

// NG：keyがない
{items.map(item => <li>{item.name}</li>)}

// OK：ユニークなkeyを指定
{items.map(item => <li key={item.id}>{item.name}</li>)}

keyにはindexではなく、データ固有のIDを使うのがベストプラクティスです。indexを使うと、要素の追加・削除時に意図しない挙動が起きる可能性があります。

エラー2：状態の更新が反映されない

stateを直接変更してしまうケースです。Reactは参照の変化を検知して再レンダリングするため、新しいオブジェクトや配列を作る必要があります。

// NG：直接変更（ミューテーション）
const handleAdd = () => {
  todos.push(newTodo); // 配列の参照が変わらない
  setTodos(todos);
};

// OK：スプレッド構文で新しい配列を作成
const handleAdd = () => {
  setTodos([...todos, newTodo]);
};

エラー3：useEffectの無限ループ

依存配列の指定を誤ると、状態更新とuseEffectが無限に繰り返されます。

// NG：依存配列なしで状態を更新
useEffect(() => {
  setCount(count + 1); // 毎レンダリングで実行 → 無限ループ
});

// OK：適切な依存配列を指定
useEffect(() => {
  fetchData();
}, []); // 初回のみ実行

エラー4：イベントハンドラの即時実行

onClick属性に関数の呼び出し結果を渡してしまうミスです。

// NG：レンダリング時に即座に実行される
<button onClick={handleClick(id)}>削除</button>

// OK：アロー関数でラップする
<button onClick={() => handleClick(id)}>削除</button>

エラー5：非同期処理でのstate更新

コンポーネントがアンマウントされた後にstateを更新しようとすると、メモリリークの警告が出ることがあります。useEffectのクリーンアップ関数やAbortControllerを活用しましょう。

useEffect(() => {
  const controller = new AbortController();

fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });

return () => controller.abort(); // クリーンアップ
}, []);

これらのエラーはReact初心者がほぼ必ず経験するものです。事前に知っておくだけで、デバッグの時間を大幅に短縮できます。

React開発を加速するエコシステムとライブラリ

Reactの使い方に慣れてきたら、周辺ライブラリを活用してさらに効率的な開発を目指しましょう。実務で特に使用頻度の高いライブラリを紹介します。

状態管理ライブラリ

2024年現在のトレンドとして、Zustandの人気が急上昇しています。Reduxほどのボイラープレートコードが不要で、直感的に使えるのが人気の理由です。

UIコンポーネントライブラリ

• MUI（Material UI）：GoogleのMaterial Designに準拠。企業向けアプリで多く採用されています
• shadcn/ui：2023年以降急速に普及。Tailwind CSSベースで自由度が高いのが特徴です
• Chakra UI：アクセシビリティを重視した設計。学習コストが低く初心者にもおすすめです

データフェッチング

• TanStack Query（React Query）：サーバー状態の管理に特化。キャッシュ、再フェッチ、楽観的更新などを簡単に実装できます
• SWR：Vercel製の軽量ライブラリ。Next.jsとの相性が抜群です

フォーム管理

• React Hook Form：パフォーマンスに優れたフォームライブラリ。バリデーションライブラリのZodとの組み合わせが人気です

ルーティング

• React Router：SPA（シングルページアプリケーション）のルーティングに最も広く使われています
• Next.js App Router：Next.jsを使う場合は標準のApp Routerが利用できます

これらのライブラリは一度にすべて覚える必要はありません。プロジェクトの要件に応じて、必要なものを一つずつ学んでいくのが効率的です。

なお、JavaScriptの基礎力がReactの理解度を大きく左右します。ES6以降の文法（アロー関数、スプレッド構文、分割代入、Promise、async/awaitなど）に不安がある方は、JavaScript関連の記事もあわせて確認することをおすすめします。

Reactエンジニアのキャリアパスと市場価値

Reactの使い方を習得した先には、多様なキャリアパスが広がっています。React経験者の市場価値は非常に高く、特に名古屋エリアでは需要に対して供給が追いついていない状況です。

Reactエンジニアの年収相場

キャリアの方向性

• フロントエンドスペシャリスト：React + TypeScript + テスト技術を極め、UI/UXの専門家を目指すルートです
• フルスタックエンジニア：Node.jsやPythonなどのバックエンド技術も習得し、アプリケーション全体を設計・開発できる人材を目指します
• モバイルエンジニア：React Nativeを活用し、iOS・Androidアプリの開発にも領域を広げます
• 技術マネジメント：テックリードやエンジニアリングマネージャーとして、チーム全体の技術力向上に貢献します

実務で求められるスキルセット

Reactの基本的な使い方に加えて、実務では以下のスキルが求められます。

• TypeScriptの活用（型安全な開発）
• テストコードの記述（Jest、React Testing Library、Vitest）
• Git/GitHubでのバージョン管理とチーム開発
• CI/CDパイプラインの理解
• Webアクセシビリティの知識
• パフォーマンス最適化（React.memo、useMemo、Code Splitting）

株式会社アイティークロスでは、Reactを含むフロントエンド案件を多数取り扱っています。大手自動車メーカーや金融機関のプロジェクトで、React + TypeScriptの開発経験を積めるのが強みです。個人の希望を100％ヒアリングし、キャリア目標に沿った案件をマッチングするため、未経験からでも着実にスキルアップできる環境が整っています。

IT業界未経験から転職した社員が5割以上在籍しており、充実した研修制度のもとでReactを一から学んだエンジニアも多数活躍しています。年間休日125日、残業月平均12.3時間と、ワークライフバランスを保ちながら技術力を磨ける点も特徴です。

まとめ｜Reactの使い方を効率的にマスターするために

この記事では、Reactの使い方を環境構築から実践的なアプリ開発まで、体系的に解説しました。最後に、重要なポイントを整理します。

• 環境構築：Viteを使ったプロジェクト作成が現在の主流。Node.js 18以上を準備しましょう
• 基本概念：コンポーネント、JSX、Propsの3つがReactの土台です
• Hooks：useState、useEffect、useContextの3つを確実に理解することが最優先です
• 実践学習：ToDoアプリなどの小さなプロジェクトで手を動かすことが上達の近道です
• エラー対処：keyの指定漏れ、状態のミューテーション、useEffectの無限ループは定番のつまずきポイントです
• エコシステム：TanStack Query、Zustand、React Hook Formなど、必要に応じて周辺ライブラリを活用しましょう
• キャリア：React + TypeScriptのスキルは市場価値が高く、名古屋エリアでも需要が拡大中です

Reactの学習で最も大切なのは、実際にコードを書いて動かすことです。この記事で紹介したサンプルコードを自分の手で入力し、カスタマイズしてみてください。エラーに出会い、解決する過程こそが、エンジニアとしての成長につながります。

JavaScriptの基礎やTypeScriptの学習方法については、当ブログの関連記事もぜひ参考にしてください。AWS環境でのReactアプリのデプロイ方法やPythonを使ったバックエンドAPIの構築方法など、フルスタック開発に必要な情報も順次発信しています。