【初心者向け】Reactとは?JavaScriptとの違いと学習すべき理由

React初心者向けに基本概念からJavaScriptとの違い、学習メリットまで詳しく解説。コンポーネント、仮想DOM、JSXなど重要な概念を分かりやすく紹介します。

Learning Next 運営
28 分で読めます

みなさん、「React」という言葉を聞いたことはありますか?

「ReactってJavaScriptと何が違うの?」 「学習する価値はあるの?」

こんな疑問を持ったことはありませんか? プログラミング初心者の方にとって、これらの違いは分かりにくいものです。

この記事では、React初心者向けに基本概念からJavaScriptとの違いまで詳しく解説します。 読み終わる頃には、Reactの魅力と学習の価値が明確に理解できるはずです。

Reactとは何か?

まず、Reactの基本的な概念から理解していきましょう。

Reactの定義

React(リアクト)は、Facebook(現Meta)が開発したJavaScriptライブラリです。

主に**ユーザーインターフェース(UI)**を作るために使われます。 簡単に言うと、Webサイトの「見た目」や「操作性」を効率的に作るツールです。

Reactの特徴

Reactが人気な理由は、以下の特徴があるからです。

  • コンポーネントベース設計
  • 仮想DOM による高速化
  • 宣言的プログラミング
  • 豊富なエコシステム

これらの特徴により、効率的で保守しやすいアプリケーションが作れます。

Reactで作れるもの

Reactを使って作れるものをご紹介します。

Webアプリケーション

// 簡単なカウンターアプリの例
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

このコードは、ボタンを押すとカウントが増える簡単なアプリです。 useStateでカウントの状態を管理しています。

モバイルアプリ

React Nativeを使えば、同じコードでiOSとAndroidアプリが作れます。

デスクトップアプリ

Electronと組み合わせることで、デスクトップアプリも開発可能です。

有名なReactアプリ

多くの大手企業がReactを採用しています。

  • Facebook
  • Instagram
  • Netflix
  • Airbnb
  • WhatsApp

これらのサービスの多くで、Reactが使われています。

JavaScriptとReactの違い

ここが初心者の方が最も混乱しやすい部分です。 違いを明確にしていきましょう。

JavaScriptとは

JavaScriptはプログラミング言語です。

ブラウザで動作し、Webサイトに動きをつけることができます。

// 純粋なJavaScriptの例
const button = document.getElementById('myButton');
const counter = document.getElementById('counter');
let count = 0;

button.addEventListener('click', function() {
  count++;
  counter.textContent = count;
});

この例では、ボタンをクリックするとカウントが増える処理を書いています。 document.getElementByIdでHTML要素を取得しています。 addEventListenerでクリックイベントを設定しています。

Reactとは

ReactはJavaScriptのライブラリです。

JavaScriptをより効率的に書くためのツールセットです。

// React での同じ機能
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <span id="counter">{count}</span>
      <button onClick={() => setCount(count + 1)}>
        クリック
      </button>
    </div>
  );
}

同じ機能でも、Reactの方がシンプルで読みやすいですね。 useStateで状態管理を行っています。

主な違い

具体的な違いを見ていきましょう。

1. 記述方法の違い

JavaScript(従来の方法)

// HTML要素を直接操作
const element = document.createElement('div');
element.textContent = 'Hello, World!';
element.className = 'greeting';
document.body.appendChild(element);

この方法では、HTML要素を1つずつ作成する必要があります。 createElementで要素を作成します。 appendChildで要素を追加します。

React

// JSX という記法を使用
function Greeting() {
  return <div className="greeting">Hello, World!</div>;
}

Reactでは、JSXという記法を使います。 HTMLのような見た目で、直感的に書けます。

2. データ管理の違い

JavaScript(従来の方法)

let userData = {
  name: '田中太郎',
  age: 25
};

// データが変わったら手動でDOMを更新
function updateUI() {
  document.getElementById('userName').textContent = userData.name;
  document.getElementById('userAge').textContent = userData.age;
}

userData.age = 26;
updateUI(); // 手動で更新が必要

従来の方法では、データが変わるたびに手動でUI更新が必要です。 updateUI関数を自分で呼び出す必要があります。

React

function UserProfile() {
  const [userData, setUserData] = useState({
    name: '田中太郎',
    age: 25
  });
  
  // データが変わると自動でUIが更新される
  return (
    <div>
      <p>名前: {userData.name}</p>
      <p>年齢: {userData.age}</p>
      <button onClick={() => setUserData({...userData, age: 26})}>
        年齢を更新
      </button>
    </div>
  );
}

Reactでは、データが変わると自動的に画面が更新されます。 setUserDataを呼び出すだけで、UIが更新されます。

3. コードの再利用性

JavaScript(従来の方法)

// 同じような機能を何度も書く必要がある
function createButton1() {
  const button = document.createElement('button');
  button.textContent = '保存';
  button.onclick = () => alert('保存しました');
  return button;
}

function createButton2() {
  const button = document.createElement('button');
  button.textContent = '削除';
  button.onclick = () => alert('削除しました');
  return button;
}

従来の方法では、似たような機能を何度も書く必要があります。 コードが重複しやすく、保守が大変です。

React

// 一度作ったコンポーネントを再利用
function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

// 使用例
<Button text="保存" onClick={() => alert('保存しました')} />
<Button text="削除" onClick={() => alert('削除しました')} />

Reactなら、一度作った部品(コンポーネント)を何度でも使い回せます。 Buttonコンポーネントを作れば、様々な場面で再利用できます。

Reactの重要な概念

Reactを理解するために、重要な概念を学んでいきましょう。

1. コンポーネント

コンポーネントは、Reactの基本単位です。

レゴブロックのように、小さな部品を組み合わせてアプリを作ります。

// ヘッダーコンポーネント
function Header() {
  return (
    <header>
      <h1>マイブログ</h1>
      <nav>
        <a href="/">ホーム</a>
        <a href="/about">アバウト</a>
      </nav>
    </header>
  );
}

// 記事コンポーネント
function Article({ title, content }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{content}</p>
    </article>
  );
}

// メインアプリ
function App() {
  return (
    <div>
      <Header />
      <Article 
        title="React入門" 
        content="Reactは素晴らしいライブラリです" 
      />
    </div>
  );
}

この例では、HeaderArticleという2つのコンポーネントを作っています。 Appコンポーネントで、これらを組み合わせて使用しています。

2. JSX

JSXは、JavaScriptの中にHTML風の記法を書ける仕組みです。

// JSX の例
function Welcome({ name }) {
  return (
    <div className="welcome">
      <h1>こんにちは、{name}さん!</h1>
      <p>今日も一日頑張りましょう</p>
    </div>
  );
}

// 使用例
<Welcome name="田中太郎" />

JSXの特徴は以下の通りです。

  • HTMLを書くような感覚で記述できる
  • {}内にJavaScriptのコードを書ける
  • classNameなど、一部の属性名が異なる

3. State(状態)

Stateは、コンポーネントが持つデータのことです。

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');
  
  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');
  };
  
  return (
    <div>
      <input 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="新しいタスク"
      />
      <button onClick={addTodo}>追加</button>
      
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

この例では、todosinputValueという2つの状態を管理しています。 useStateを使って状態を定義します。 状態が変わると、画面が自動的に更新されます。

4. Props(プロパティ)

Propsは、親から子コンポーネントにデータを渡す仕組みです。

// 子コンポーネント
function UserCard({ name, age, email }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>年齢: {age}歳</p>
      <p>メール: {email}</p>
    </div>
  );
}

// 親コンポーネント
function UserList() {
  const users = [
    { name: '田中太郎', age: 25, email: 'tanaka@example.com' },
    { name: '佐藤花子', age: 30, email: 'sato@example.com' }
  ];
  
  return (
    <div>
      {users.map((user, index) => (
        <UserCard 
          key={index}
          name={user.name}
          age={user.age}
          email={user.email}
        />
      ))}
    </div>
  );
}

この例では、UserListコンポーネントからUserCardコンポーネントにデータを渡しています。 nameageemailがPropsとして渡されています。

5. 仮想DOM

仮想DOMは、Reactのパフォーマンス向上の秘密です。

// 従来の方法:直接DOMを操作(遅い)
document.getElementById('counter').textContent = newCount;
document.getElementById('message').textContent = newMessage;

// React:仮想DOMで効率化(速い)
function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('');
  
  return (
    <div>
      <span id="counter">{count}</span>
      <span id="message">{message}</span>
    </div>
  );
}

仮想DOMの仕組みは以下の通りです。

  1. Reactが仮想的なDOMを作成
  2. 変更があった場合、新しい仮想DOMと比較
  3. 違いがある部分だけを実際のDOMに反映

これにより、効率的で高速なUI更新が可能になります。

Reactを学習すべき理由

なぜReactを学ぶ価値があるのでしょうか? 具体的な理由をご紹介します。

理由1: 高い需要と年収

React開発者の需要は年々増加しています。

求人市場での需要

React関連の求人数は右肩上がりで増えています。 多くの企業がReact開発者を求めています。

年収の例

React開発者の年収は、経験によって大きく変わります。

  • 未経験(0-1年): 300-450万円
  • 経験1-3年: 450-650万円
  • 経験3-5年: 650-900万円
  • 経験5年以上: 900万円以上

JavaScriptのみと比べて、Reactができると年収アップが期待できます。

理由2: 開発効率の向上

コンポーネントの再利用

// 一度作ったボタンコンポーネント
function Button({ variant, children, onClick }) {
  return (
    <button 
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// 様々な場面で再利用
<Button variant="primary" onClick={handleSave}>保存</Button>
<Button variant="danger" onClick={handleDelete}>削除</Button>
<Button variant="secondary" onClick={handleCancel}>キャンセル</Button>

このように、一度作ったコンポーネントを様々な場面で再利用できます。 variantプロパティでボタンの種類を変更できます。

開発時間が大幅に短縮され、バグの発生も減らせます。

理由3: モダンな開発体験

ホットリロード

// コードを変更すると、ブラウザが自動で更新される
function App() {
  return (
    <div>
      <h1>Hello, React!</h1> {/* ここを変更 */}
    </div>
  );
}
// 保存すると即座にブラウザに反映

コードを変更して保存すると、ブラウザが自動的に更新されます。 開発効率が格段に向上します。

豊富な開発ツール

Reactには多くの開発ツールがあります。

  • React Developer Tools
  • ESLint
  • Prettier
  • TypeScript サポート

これらのツールで、快適な開発環境が構築できます。

理由4: 豊富なエコシステム

人気ライブラリとの連携

// ルーティング(React Router)
import { BrowserRouter, Route, Routes } from 'react-router-dom';

// 状態管理(Redux)
import { useSelector, useDispatch } from 'react-redux';

// UI ライブラリ(Material-UI)
import { Button, TextField } from '@mui/material';

// アニメーション(Framer Motion)
import { motion } from 'framer-motion';

これらのライブラリと組み合わせることで、より高機能なアプリケーションが作れます。

理由5: キャリアの選択肢拡大

フロントエンド開発者

// Webアプリケーション開発
function Dashboard() {
  return (
    <div className="dashboard">
      <Sidebar />
      <MainContent />
      <Analytics />
    </div>
  );
}

フルスタック開発者

// Next.js でサーバーサイドも対応
export async function getServerSideProps() {
  const data = await fetchDataFromAPI();
  return { props: { data } };
}

モバイルアプリ開発者

// React Native でモバイルアプリ
import { View, Text, TouchableOpacity } from 'react-native';

function MobileApp() {
  return (
    <View>
      <Text>Hello, React Native!</Text>
      <TouchableOpacity>
        <Text>ボタン</Text>
      </TouchableOpacity>
    </View>
  );
}

Reactを学ぶことで、様々な分野でのキャリアが選択できます。

Reactの学習に必要な前提知識

Reactを学ぶ前に、どんな知識が必要でしょうか?

必須の知識

HTML/CSS

<!-- HTML の基本 -->
<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>
/* CSS の基本 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

HTMLとCSSの基本的な知識が必要です。 HTMLタグの意味と、CSSでのスタイリングができれば大丈夫です。

JavaScript

// 変数と関数
const message = "Hello";
const numbers = [1, 2, 3, 4, 5];

function greet(name) {
  return `Hello, ${name}!`;
}

// 配列メソッド
const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);

// 分割代入
const { name, age } = user;
const [first, second] = array;

// アロー関数
const add = (a, b) => a + b;

JavaScriptの基本的な文法が理解できていれば問題ありません。 特に、変数、関数、配列、オブジェクトは重要です。

あると良い知識

以下の知識があると、より理解が深まります。

  • ES6+ の文法
  • モジュール(import/export)
  • 非同期処理(Promise、async/await)
  • パッケージマネージャー(npm、yarn)

学習期間の目安

JavaScript経験者の場合

  • React基本: 2-4週間
  • 実用レベル: 2-3ヶ月
  • 上級レベル: 6ヶ月以上

プログラミング初心者の場合

  • HTML/CSS/JavaScript: 2-4ヶ月
  • React基本: 1-2ヶ月
  • 実用レベル: 4-6ヶ月

個人差はありますが、継続的に学習すれば必ず習得できます。

実際にReactを始めてみよう

実際にReactを始める方法をご紹介します。

環境構築

Create React App を使用

# Node.js をインストール後
npx create-react-app my-app
cd my-app
npm start

この方法が最も簡単です。 必要なファイルが自動的に作成されます。

Vite を使用(高速)

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

Viteは高速で、開発体験が優れています。

最初のコンポーネント

// src/App.js
import { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  
  return (
    <div className="App">
      <h1>React へようこそ!</h1>
      <input 
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="お名前を入力"
      />
      <p>こんにちは、{name}さん!</p>
    </div>
  );
}

export default App;

この例では、入力フィールドに名前を入力すると挨拶が表示されます。 useStateを使って、入力値を管理しています。

学習リソース

公式ドキュメント

  • React 公式サイト(react.dev)
  • React チュートリアル

公式ドキュメントは最も正確で、最新の情報が得られます。

オンライン学習

  • freeCodeCamp
  • Udemy
  • Progate

これらのサービスでは、実際にコードを書きながら学習できます。

日本語リソース

  • Zenn
  • Qiita
  • MDN Web Docs

日本語の解説記事も豊富にあります。

よくある質問

初心者の方からよく寄せられる質問にお答えします。

Q: JavaScriptを完璧にしてからReactを始めるべき?

A: 完璧である必要はありません。

基本的な文法(変数、関数、配列、オブジェクト)が理解できていれば大丈夫です。 Reactを学習しながら、JavaScriptの理解も深められます。

Q: Reactは難しい?

A: 最初は概念が多くて大変ですが、段階的に学習すれば必ず習得できます。

重要なのは、小さなプロジェクトから始めることです。 焦らず、一つずつ概念を理解していきましょう。

Q: 他のフレームワーク(Vue、Angular)との違いは?

A: それぞれに特徴があります。

React:

  • 学習コストが中程度
  • 豊富なエコシステム
  • Facebook のサポート

Vue:

  • 学習コストが低い
  • 日本語情報が豊富
  • 小規模プロジェクトに適している

Angular:

  • 学習コストが高い
  • 大規模アプリケーションに適している
  • TypeScript が標準

Q: React Native も一緒に学ぶべき?

A: まずはReactをしっかり理解してから、React Nativeに進むことをおすすめします。

Reactの概念を理解していれば、React Nativeの習得は比較的簡単です。

Q: 転職に有利?

A: 非常に有利です。

React開発者の需要は高く、多くの企業がReact開発者を求めています。 学習への投資効果は高いと言えるでしょう。

まとめ

この記事では、React初心者向けに基本概念からJavaScriptとの違いまで詳しく解説しました。

Reactとは

  • Facebook開発のJavaScriptライブラリ
  • UI作成に特化
  • コンポーネントベース設計
  • 豊富なエコシステム

JavaScriptとの違い

  • 記述方法(JSXの使用)
  • データ管理(自動的なUI更新)
  • コードの再利用性(コンポーネント)

学習すべき理由

  1. 高い需要と年収
  2. 開発効率の向上
  3. モダンな開発体験
  4. 豊富なエコシステム
  5. キャリアの選択肢拡大

今日から始められること

  1. JavaScript基礎の復習
  2. React環境の構築
  3. 簡単なコンポーネント作成
  4. 公式チュートリアルの実践

Reactは確かに学習コストがありますが、それ以上に得られる価値は大きいです。 モダンなWeb開発では必須のスキルと言えるでしょう。

今日から、Reactの世界に飛び込んでみませんか? きっと、新しい可能性が見つかるはずです。

関連記事