初心者のためのReact入門：環境構築から始める最初のステップ

AI React

Web開発の世界に足を踏み入れたい、あるいはフロントエンド開発のスキルを向上させたいと考えているなら、React（リアクト）は間違いなく学ぶべき価値のある技術です。Facebook（現Meta）が開発したこのJavaScriptライブラリは、今日のWebアプリケーション開発においてデファクトスタンダードの一つとなっています。しかし、「どこから始めればいいのかわからない」「環境構築でつまずきそう」と感じている初心者の方も多いのではないでしょうか。

この記事では、2025年現在の最新情報を踏まえ、React初心者がスムーズに学習を開始するための環境構築から、基本的な概念までをわかりやすく解説します。具体的な手順とコード例を交えながら、あなたの「はじめてのReact」を強力にサポートします。統計によると、Reactは開発者の間で最も人気のあるJavaScriptフレームワークの一つであり、その需要は今後も増加すると予測されています。このガイドを読み終える頃には、あなたもReactの基本を理解し、独自のWebアプリケーションを開発するための土台を築いていることでしょう。さあ、一緒にReactの世界へ飛び込みましょう！

💡 知っておくと便利 ReactはJavaScriptのライブラリであり、UI（ユーザーインターフェース）構築に特化しています。フレームワークとは異なり、自由度が高く、他のライブラリやツールと組み合わせて使うことが多いのが特徴です。

1. React開発の第一歩：環境構築の準備

React開発を始める上で、まず必要なのが開発環境の準備です。ご安心ください、以前に比べて格段に簡単になっています。

Node.jsとnpm/Yarnのインストール

Reactアプリケーションを開発するには、Node.jsが必須です。Node.jsはJavaScriptの実行環境であり、同時にパッケージ管理ツールであるnpm（Node Package Manager）も含まれています。npmは、Reactやその他の必要なライブラリをインストールするために使用します。より高速なパッケージ管理ツールとしてYarnもありますが、まずはnpmで十分です。

  1. Node.jsのダウンロードとインストール: Node.jsの公式サイト（https://nodejs.org/）にアクセスし、推奨版（LTS版）をダウンロードしてインストールしてください。インストール中にnpmも自動的にインストールされます。

  2. インストールの確認: コマンドプロンプトやターミナルを開き、以下のコマンドを入力してバージョンが表示されれば、インストールは成功です。

    node -v
npm -v

エディタの選定：VS Codeがおすすめ

コードを書くためのエディタも重要です。初心者には、豊富な拡張機能と優れたUIを持つVisual Studio Code (VS Code)が断然おすすめです。

  1. VS Codeのダウンロードとインストール: VS Codeの公式サイト（https://code.visualstudio.com/）からダウンロードしてインストールしてください。
  2. 推奨拡張機能: VS Codeをインストールしたら、以下の拡張機能を入れておくと開発効率が格段に上がります。
    • ESLint: JavaScriptコードの品質を保ち、エラーを未然に防ぎます。
    • Prettier - Code formatter: コードを自動で整形し、統一されたスタイルを維持します。
    • React Developer Tools: Reactアプリケーションのデバッグに非常に役立ちます。

💡 知っておくと便利 VS Codeは、JavaScriptだけでなく多くのプログラミング言語に対応しており、Web開発者にとって必須のツールの一つです。日本語化パックも提供されているので、英語が苦手な方も安心して使えます。

2. Create React Appで手軽に始める開発環境

Reactアプリケーションをゼロから構築するのは手間がかかりますが、幸いなことにCreate React Appという便利なツールがあります。これは、React開発に必要な設定済みの環境を自動で生成してくれる公式ツールです。

プロジェクトの作成

Node.jsとnpmがインストールされていれば、コマンド一つでReactプロジェクトを作成できます。

  1. プロジェクトを作成するディレクトリへ移動: コマンドプロンプトやターミナルで、プロジェクトを作成したいフォルダに移動します。

    cd C:UsersYourUserDocumentsWebProjects

  2. Reactプロジェクトの作成: 以下のコマンドを実行します。my-react-appの部分は好きなプロジェクト名に変更してください。

    npx create-react-app my-react-app

    このコマンドは、インターネットから必要なファイルをダウンロードして、自動的にプロジェクトを作成します。数分かかる場合がありますが、完了すると成功メッセージが表示されます。

開発サーバーの起動

プロジェクトが作成されたら、すぐに開発サーバーを起動して、作成されたばかりのReactアプリを確認できます。

  1. プロジェクトディレクトリへ移動:

    cd my-react-app

  2. 開発サーバーの起動:

    npm start

    このコマンドを実行すると、自動的にブラウザが開き、http://localhost:3000でReactアプリケーションが表示されます。初期状態では、Reactのロゴが回転するシンプルなページが表示されるはずです。これは、変更を保存するとブラウザが自動的に更新される開発サーバーが起動している状態です。

3. Reactアプリケーションの基本構造を理解する

Create React Appで生成されたプロジェクトの構造を理解することは、今後の開発を進める上で非常に重要です。

主要なファイルとフォルダ

生成されたプロジェクトの主要なファイルとフォルダは以下の通りです。

  • my-react-app/
    • node_modules/: プロジェクトに必要なすべてのライブラリがインストールされる場所です。通常、このフォルダを直接編集することはありません。
    • public/: 静的なアセット（HTMLファイル、画像など）が配置される場所です。
      • index.html: アプリケーションの単一のHTMLファイルです。Reactアプリケーションは、このファイル内の特定の要素にマウントされます。
    • src/: Reactアプリケーションの主要なソースコードが配置される場所です。
      • App.js: メインのコンポーネント（アプリの主要な部分）です。
      • index.js: Reactアプリケーションのエントリーポイントです。public/index.htmlにApp.jsをレンダリングする役割を担います。
      • App.css, index.css: 各コンポーネントやグローバルなスタイルシートです。
      • App.test.js: テストファイルです。
      • logo.svg: アプリケーションで使われるロゴ画像です。

index.jsとApp.jsの役割

  • index.js: このファイルはReactアプリケーションの「玄関」です。ReactDOM.createRoot(document.getElementById('root')).render(...)という行で、public/index.htmlにあるIDがrootのHTML要素に、Appコンポーネントをレンダリングするよう指示しています。
  • App.js: このファイルはアプリケーションの中心となるコンポーネントです。Reactのコンポーネントは、UIの一部を構成する再利用可能なコードブロックです。App.jsの中では、HTMLのような構文（実際にはJSXと呼ばれるもの）を使ってUIを記述しています。
ファイル名 役割
index.js Reactアプリのエントリーポイント

4. Reactの核心概念：コンポーネントとJSX

React開発において、コンポーネントとJSXは最も重要な概念です。これらを理解すれば、Reactでの開発がぐっと楽しくなります。

コンポーネントとは？

コンポーネントは、UIを独立した再利用可能な小さな部品に分割するReactの基本的な考え方です。例えば、Webサイトのヘッダー、フッター、ボタン、商品カードなどは、それぞれが独立したコンポーネントとして設計できます。これにより、コードの管理がしやすくなり、再利用性が高まります。

Reactのコンポーネントは、大きく分けて2種類あります。

  1. 関数コンポーネント (Functional Components): 単なるJavaScriptの関数で、シンプルでモダンなReact開発の主流です。

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

  2. クラスコンポーネント (Class Components): JavaScriptのクラスを使って定義され、以前は主流でしたが、現在は関数コンポーネントとHooksが推奨されています。

    import React from 'react';

class Counter extends React.Component {
  render() {
    return <div>カウンター</div>;
  }
}

JSXの魔法

Reactのコンポーネント内でHTMLのような構文を目にすることがありますが、これは厳密にはHTMLではなく、JSX (JavaScript XML)と呼ばれるものです。JSXはJavaScriptのシンタックス拡張で、JavaScriptコード内でHTMLのような要素を記述できるようにします。

JSXの例:

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

一見するとHTMLのようですが、実際にはJavaScriptに変換され、最終的にブラウザが理解できる形式になります。JSXを使うことで、UIの構造とロジックを同じファイル内で記述できるため、開発の効率が向上します。

JSXの注意点:

  • class属性の代わりにclassNameを使う: HTMLのclassはJavaScriptの予約語であるため、JSXではclassNameを使用します。
  • スタイルはオブジェクトで記述: インラインスタイルを適用する場合、CSSプロパティはキャメルケースで記述し、値は文字列ではなくオブジェクトで渡します（例: style={{ backgroundColor: 'blue', color: 'white' }}）。
  • 単一のルート要素: コンポーネントが複数の要素を返す場合、それらを<></>（Fragment）や<div>などで囲む必要があります。
JSXのポイント 説明
JSXのポイント JavaScript内でHTMLのような構文を書くための拡張機能。UIの記述を直感的かつ効率的に行う。
コンポーネント UIを再利用可能な独立した部品に分割する。関数コンポーネントが主流。

5. コンポーネントの状態管理：StateとProps

Reactアプリケーションは静的な表示だけでなく、ユーザーの操作に応じて動的に変化する必要があります。そのために重要なのがState（状態）とProps（プロパティ）です。

Props：親から子へのデータの受け渡し

Propsは、親コンポーネントから子コンポーネントへデータを渡すための仕組みです。Propsは読み取り専用であり、子コンポーネントは受け取ったPropsを変更できません。これにより、データの流れが予測可能になり、デバッグが容易になります。

Propsの使用例:

// 親コンポーネント (App.js)
import React from 'react';
import WelcomeMessage from './WelcomeMessage'; // WelcomeMessageコンポーネントをインポート

function App() {
  return (
    <div>
      <WelcomeMessage name="太郎" /> {/* 'name'というPropsを渡す */}
      <WelcomeMessage name="花子" />
    </div>
  );
}

export default App;

// 子コンポーネント (WelcomeMessage.js)
import React from 'react';

function WelcomeMessage(props) { // 'props'オブジェクトを受け取る
  return <h1>こんにちは、{props.name}さん！</h1>; // props.nameで値にアクセス
}

export default WelcomeMessage;

State：コンポーネント自身の状態管理

Stateは、コンポーネントが自身で管理するデータであり、時間の経過とともに変更される可能性があります。例えば、カウンターの現在の数値、入力フォームのテキスト、チェックボックスのオン/オフ状態などがStateとして管理されます。Stateが変更されると、Reactはそのコンポーネントを自動的に再レンダリングし、UIを更新します。

関数コンポーネントでは、React Hooksの一つであるuseStateフックを使ってStateを管理します。

Stateの使用例 (useStateフック):

import React, { useState } from 'react'; // useStateをインポート

function Counter() {
  // useStateを使い、countというState変数とsetCountという更新関数を定義
  const [count, setCount] = useState(0); // 初期値は0

  const increment = () => {
    setCount(count + 1); // setCountを使ってStateを更新
  };

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={increment}>カウントアップ</button>
    </div>
  );
}

export default Counter;

この例では、countというState変数が定義され、setCount関数を使ってその値を更新しています。ボタンをクリックするとincrement関数が呼び出され、setCountによってcountが更新され、画面に表示されるカウントも自動的に増えます。

「Propsは親から子へ、Stateはコンポーネント自身が持つデータ」という原則を理解することが、Reactでのデータフローを把握する鍵となります。Stateが変更されるとコンポーネントが再レンダリングされるため、UIの動的な変化を可能にします。

  • 出典: React公式ドキュメントより

6. イベント処理とユーザーインタラクション

Reactアプリケーションは、ユーザーの操作（クリック、入力、フォーム送信など）に反応して動的に振る舞うことが不可欠です。Reactでは、これらのユーザーインタラクションをイベント処理として扱います。

イベントハンドラの登録

HTMLと同様に、Reactの要素にもonClickやonChangeのようなイベントハンドラを登録できます。ただし、Reactではイベントハンドラの名前がキャメルケース（例: onclickではなくonClick）である点に注意が必要です。

イベントハンドラの例:

import React, { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);

  // ボタンがクリックされた時に実行される関数
  const handleClick = () => {
    setLiked(!liked); // likedの状態を反転させる
  };

  return (
    <button onClick={handleClick}>
      {liked ? 'いいね済み！' : 'いいね！'}
    </button>
  );
}

export default LikeButton;

この例では、onClick属性にhandleClick関数を渡しています。ボタンがクリックされるたびにhandleClickが実行され、likedステートが更新されることで、ボタンのテキストが動的に変化します。

イベントオブジェクト

イベントハンドラ関数には、標準のJavaScriptイベントと同様にイベントオブジェクトが引数として渡されます。これには、イベントの種類、ターゲット要素、キーボードイベントの場合は押されたキーなどの情報が含まれます。

function TextInput() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value); // イベントオブジェクトから入力値を取得
  };

  return (
    <input type="text" value={text} onChange={handleChange} placeholder="何か入力してください" />
  );
}

ここで、event.target.valueは、入力フィールドの現在の値を取得するために使用されています。Reactのイベントシステムは、ブラウザ間の互換性を考慮して正規化されているため、クロスブラウザで一貫したイベント処理が可能です。

7. コンポーネントの再利用と構成

Reactの大きな強みの一つは、コンポーネントを組み合わせて複雑なUIを構築できることです。これにより、コードの重複が減り、保守性が向上します。

コンポーネントのネスト

作成したコンポーネントは、他のコンポーネント内で自由に使用できます。これをコンポーネントのネスト（入れ子）と呼びます。

// Card.js
import React from 'react';

function Card(props) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '15px', margin: '10px', borderRadius: '5px' }}>
      <h2>{props.title}</h2>
      <p>{props.description}</p>
      {props.children} {/* children Propを使って、Card内に他の要素を配置 */}
    </div>
  );
}

export default Card;

// App.js
import React from 'react';
import Card from './Card'; // Cardコンポーネントをインポート
import LikeButton from './LikeButton'; // LikeButtonコンポーネントをインポート

function App() {
  return (
    <div>
      <h1>私のブログ記事</h1>
      <Card title="Reactの基本" description="ReactコンポーネントとJSXについて学びます。">
        <p>この記事はReact学習の第一歩です。</p>
        <LikeButton />
      </Card>
      <Card title="StateとProps" description="Reactでデータを管理する方法を理解します。">
        <p>動的なUIを作成するために不可欠な概念です。</p>
      </Card>
    </div>
  );
}

export default App;

この例では、Appコンポーネント内でCardコンポーネントを複数回使用し、さらにCardコンポーネントの内部にLikeButtonコンポーネントを配置しています。props.childrenを使うことで、親コンポーネントから子コンポーネントへ、任意の要素を渡すことができるようになります。

コンポーネント指向開発のメリット

  • 再利用性: 一度作成したコンポーネントは、アプリケーション内のどこでも再利用できます。
  • 保守性: コンポーネントごとに独立しているため、特定の機能やUIの変更が必要な場合でも、影響範囲が限定されます。
  • 開発効率: チーム開発において、各メンバーが異なるコンポーネントを並行して開発できます。

まとめと次のステップ

ここまでで、React開発の基本となる環境構築から、コンポーネント、JSX、State、Props、そしてイベント処理といった重要な概念について学びました。これであなたも、シンプルなReactアプリケーションを開発するための基礎を築けたはずです。

しかし、Reactの世界は非常に奥深く、学ぶべきことはまだまだたくさんあります。

  • React Router: 複数ページを持つアプリケーションを作成するためのルーティングライブラリ
  • Hooksのさらなる活用: useEffect, useContext, useReducerなど、より高度なHooks
  • 外部API連携: 外部サービスからデータを取得して表示する方法
  • 状態管理ライブラリ: ReduxやZustandなど、大規模アプリケーションでの複雑な状態管理
  • テスト: 作成したコンポーネントが正しく動作するかを検証する方法

これらはReactをさらに深く学ぶための次のステップとなります。焦らず、一つずつ着実に学習を進めていきましょう。

あなたへのヒント:

  • 手を動かすこと: コードを実際に書いてみることが最も重要です。
  • 公式ドキュメント: Reactの公式ドキュメントは非常に充実しており、最高の学習リソースです。
  • コミュニティ: 困った時は、QiitaやStack Overflow、開発者コミュニティで質問してみましょう。

今日学んだ知識を活かして、ぜひあなた自身のReactアプリケーション開発に挑戦してみてください。あなたのアイデアが、Web上で形になることを楽しみにしています！

💡 知っておくと便利 |項目|説明| |---|---| |次のステップ|ルーティング、Hooks、API連携、状態管理ライブラリなど、Reactの応用学習へ進む| |学習のコツ|公式ドキュメント活用、実際にコードを書いてみる、コミュニティでの情報交換|