React入門：初心者でもわかる使い方と新規プロジェクト作成ガイド

Reactって何？初心者向け基本解説

Reactの正体：JavaScriptライブラリとしての特徴

Reactは、ユーザーインターフェース（UI）構築に特化したJavaScriptライブラリです。
あのFacebook（現Meta）によって開発され、現在では世界中の開発者から絶大な支持を得ています。
その最大の特徴は、「コンポーネントベース」という考え方です。

UIを再利用可能な独立した部品（コンポーネント）として捉え、それらを組み合わせて複雑な画面を構築していきます。
例えば、ボタン、入力フォーム、カード表示など、一つ一つの要素をカプセル化されたコンポーネントとして作成することで、開発効率が飛躍的に向上します。
また、データの変更を効率的に検知し、関連するコンポーネントのみを更新・描画する「宣言的なView」もReactの魅力です。
これにより、開発者はUIの状態を直接操作するのではなく、「このデータになったらこう表示する」と宣言するだけで済むため、コードの見通しが良くなり、バグも減りやすくなります。
(参考情報より)

なぜReactが人気なのか？そのメリットとは

Reactがこれほどまでに人気を集めているのには、いくつかの明確な理由があります。
まず、コンポーネント指向であるため、一度作成したコンポーネントは他の場所でも使い回すことができ、開発の生産性が大幅に向上します。
大規模なアプリケーション開発においても、チームで分担して開発しやすく、管理がしやすいというメリットがあります。

次に、世界中に広がる活発なコミュニティと豊富なエコシステムです。
困ったことがあればすぐに情報が見つかりやすく、多数の便利なライブラリやツールが提供されています。
さらに、ReactはWebアプリケーションだけでなく、React Nativeを使えばiOSやAndroidのネイティブアプリも開発できる汎用性の高さも魅力です。
「宣言的なUI」によって、コードの意図が明確になりやすく、メンテナンス性も高まるため、長期的なプロジェクトにも適しています。

Reactの最新トレンドとバージョン

Reactは非常に活発に開発が進められており、定期的に新しいバージョンがリリースされ、機能改善やパフォーマンス向上が図られています。
2025年10月現在、Reactの最新バージョンは19.2.0です。
常に最先端の技術を取り入れながら進化を続けているのが特徴です。

公式ドキュメントは、この最新バージョン（React 19.2.0）にしっかり対応しており、最新の情報を学ぶ上で最も信頼できる情報源となっています。
また、過去のバージョンのドキュメントもアーカイブとして参照できるため、古いプロジェクトのメンテナンスや学習にも役立ちます。
Reactのバージョンアップは頻繁に行われるため、開発を進める際には、プロジェクトやチームの状況に応じて適切なバージョンを選択し、バージョン管理ツールを活用することが重要です。(参考情報より)

Reactの始め方：セットアップから新規プロジェクト作成まで

開発環境構築の第一歩：Node.jsとnpm

React開発を始める上で、まず必須となるのが「Node.js」と「npm（Node Package Manager）」のインストールです。
Node.jsは、Webブラウザの外でJavaScriptを実行するためのランタイム環境であり、サーバーサイド開発などにも利用されます。
npmは、JavaScriptのライブラリやツールを管理するためのパッケージ管理ツールで、React本体や関連ライブラリのインストールに欠かせません。

Node.jsは公式サイトから各OS（macOS, Windows, Linuxなど）に対応したインストーラーをダウンロードして簡単にインストールできます。
通常、Node.jsをインストールするとnpmも同時にインストールされるため、個別にインストールする必要はありません。
インストールが完了したら、ターミナルでnode -vとnpm -vコマンドを実行し、バージョンが表示されることで正しくインストールされたかを確認しましょう。
複数のNode.jsバージョンを管理したい場合は、nvm（Node Version Manager）の利用が推奨されています。
(参考情報より)

最適なコードエディタとブラウザの準備

React開発を効率的に進めるためには、高性能なコードエディタの準備が不可欠です。
特に開発者コミュニティで広く推奨されているのは、Visual Studio Code (VS Code)です。
VS Codeは、豊富な拡張機能、強力なデバッグ機能、Gitとの連携機能などを備え、React開発を強力にサポートしてくれます。

他にもSublime TextやWebStormなども選択肢として挙げられますが、初心者の方にはVS Codeをおすすめします。
また、開発中のアプリケーションをテストし、動作を確認するためのブラウザも必要です。
Google Chromeのデベロッパーツールは、Reactアプリケーションのデバッグに非常に役立つため、利用を推奨します。
これらのツールを揃えることで、快適な開発環境が整います。(参考情報より)

新規プロジェクト作成：Create React App vs Vite

開発環境が整ったら、いよいよReactの新規プロジェクトを作成します。
Reactのプロジェクト作成には、主に2つの方法があります。

一つは、React公式が推奨するツールであるCreate React App (CRA)を使用する方法です。
Node.jsとnpmがインストールされていれば、以下のシンプルなコマンドで新しいReactプロジェクトを簡単に作成できます。

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

my-appの部分は好きなプロジェクト名に変更してください。
TypeScriptを使用したい場合は、--template typescriptオプションを追加します。

もう一つは、より高速な開発体験を提供するビルドツール「Vite」を使用する方法です。
Viteは、特に小〜中規模のWebアプリケーション開発に適しており、開発サーバーの起動やホットリロードが非常に高速です。
以下のコマンドでReactプロジェクトを作成できます。

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

どちらの方法も手軽に始められますが、CRAは大規模な設定なしで安定した環境を提供し、Viteは高速性が魅力です。
まずはCRAから始めて、慣れてきたらViteも試してみるのが良いでしょう。(参考情報より)

Reactの基本的な使い方：コンポーネントとJSX

Reactの核心：コンポーネント思考

React開発の根幹にあるのが「コンポーネント思考」です。
これは、WebページのUIを構成する要素を、独立した再利用可能な部品（コンポーネント）として捉え、それらを組み合わせてアプリケーションを構築していく考え方です。
例えば、ヘッダー、フッター、サイドバー、商品カード、ボタンなど、それぞれを一つのコンポーネントとして作成します。

これにより、コードの再利用性が高まり、アプリケーション全体の見通しが良くなります。
また、各コンポーネントが自身のロジックとUIを持つため、変更やデバッグが特定のコンポーネント内で完結しやすくなり、チーム開発もスムーズになります。
Reactのコンポーネントには、主に「関数コンポーネント」と「クラスコンポーネント」がありますが、現在はHooksの登場により関数コンポーネントが主流です。
コンポーネント間でデータを渡す際には「Props（プロパティ）」を使用し、親コンポーネントから子コンポーネントへ情報を伝達します。

HTMLを拡張するJSXの魅力

Reactでは、UIを記述するために「JSX（JavaScript XML）」というJavaScriptの構文拡張を使用します。
JSXは一見するとHTMLのように見えますが、その中にJavaScriptのコードを直接埋め込むことができる点が大きな特徴です。
これにより、UIの見た目とロジックを同じファイル内で記述でき、開発者はコンポーネントの構造を一目で把握しやすくなります。

例えば、JavaScriptの変数を表示したい場合は、波括弧{}で囲むだけで簡単に埋め込むことができます。
また、HTML属性と同様にJavaScriptの式を渡すことも可能です。
JSXを使うことで、より直感的かつ宣言的にUIを構築できるようになり、開発の生産性が向上します。
ただし、JSXはあくまでJavaScriptの拡張であるため、最終的にはBabelなどのツールによって通常のJavaScriptに変換されて実行されます。(参考情報より)

function Greeting(props) {
  const name = props.name || 'ゲスト';
  return (
    <h1>こんにちは、{name}さん！</h1>
  );
}
// このコンポーネントは <Greeting name="太郎" /> のように使います

状態管理とHooksの基本（useState, useEffect）

Reactアプリケーションにおいて、ユーザーインタラクションに応じてUIを動的に変化させるためには、「状態（State）」の管理が不可欠です。
Reactの「Hooks（フック）」は、関数コンポーネントで状態管理やその他のReactの機能を「フック」できるようにするために導入されました。
中でも最も基本的なHooksがuseStateとuseEffectです。

useStateは、コンポーネントにローカルな状態変数とその更新関数を追加するために使われます。
例えば、ボタンをクリックするたびにカウントを増やすカウンター機能などで利用されます。
一方、useEffectは、コンポーネントのレンダリング後に発生する「副作用（side effect）」を処理するために使われます。
データの取得、購読の設定、DOMの直接操作などが副作用の例です。
これらのHooksを適切に使うことで、シンプルかつ強力な方法でインタラクティブなUIを構築できます。

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

function Counter() {
  const [count, setCount] = useState(0); // countという状態変数と更新関数

  useEffect(() => {
    // コンポーネントがマウントされた時や、countが変更された時に実行
    document.title = `カウント: ${count}`;
  }, [count]); // countが変更された時にのみ副作用を実行

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

初心者におすすめのReact学習リソース（公式ドキュメント・チュートリアル・書籍）

最高の教科書：React公式ドキュメント

React学習の第一歩として、そして最も信頼できる情報源として、React公式ドキュメントを強くお勧めします。
公式ドキュメントは、Reactの開発元であるMeta（旧Facebook）によって作成・管理されており、常に最新の情報が反映されています。
基本的なコンセプトから高度なトピックまで、非常に網羅的かつ正確な情報が提供されています。

特に初心者向けには、実際にコードを書きながらReactの基本を学べるインタラクティブなチュートリアルが用意されています。
例えば、三目並べゲームを作成するチュートリアルは、Reactのコンポーネント、Props、Stateといった概念を実践的に理解するのに最適です。
日本語版も提供されているため、英語が苦手な方でも安心して学習を進めることができます。
迷ったらまず公式ドキュメントを参照する、という習慣をつけましょう。(参考情報より)

実践で学ぶ：オンラインチュートリアルと学習プラットフォーム

公式ドキュメント以外にも、Reactを実践的に学べるオンラインのチュートリアルや学習プラットフォームが多数存在します。
これらは、動画コンテンツやインタラクティブな演習を通じて、より直感的にReactの使い方を習得できるのが魅力です。
例えば、Microsoft LearnやW3Schoolsといったサイトでは、初心者向けのReactチュートリアルが無料で提供されています。

また、YouTubeなどの動画プラットフォームには、多くの開発者が作成した解説動画がアップロードされています。
視覚的にコードの動きを確認できるため、座学だけでは理解しにくい部分もスムーズに習得できるでしょう。
これらのリソースを組み合わせることで、多様な角度からReactに触れ、理解を深めることができます。
ただし、情報が古くなっている可能性もあるため、公開日や更新日を確認し、できるだけ新しい情報を参照するように心がけましょう。(参考情報より)

体系的な知識を深める：おすすめの書籍

オンラインのリソースで基本的な使い方を学んだら、さらに体系的な知識を深めるために書籍を活用するのも良い方法です。
書籍は、基礎から応用までを網羅的に解説しており、インターネットの情報のように断片的ではないため、Reactの全体像をじっくりと理解するのに役立ちます。

特に、特定のバージョンに特化したものや、特定のフレームワーク（例: Next.js）と組み合わせた開発について詳述している書籍など、様々な種類があります。
書店で実際に内容を確認したり、オンラインのレビューを参考にしたりして、自分の学習レベルや目的に合った一冊を選びましょう。
良質な書籍は、実践的な開発のノウハウやベストプラクティスも教えてくれるため、より堅牢なアプリケーションを開発するための土台を築くことができます。

Reactで作れるもの：具体的なサンプルコードと応用例

シンプルなコンポーネント作成：ボタンとカウンター

Reactの最も基本的な使い方を理解するために、まずはシンプルなコンポーネントを作成してみましょう。
ここでは、クリックするたびに数字が増える「カウンターボタン」を例に挙げます。
これはReactのコンポーネント、JSX、そして状態管理の基本であるuseStateフックの良い練習になります。

import React, { useState } from 'react';

function CounterButton() {
  const [count, setCount] = useState(0); // countは現在の値、setCountは更新関数

  const handleClick = () => {
    setCount(count + 1); // ボタンがクリックされたらカウントを1増やす
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
      <p>現在のカウント: <strong>{count}</strong></p>
      <button onClick={handleClick} style={{ padding: '10px 20px', fontSize: '16px' }}>
        クリックでカウントアップ
      </button>
    </div>
  );
}

export default CounterButton;

このコードでは、useState(0)で初期値が0のcountという状態変数を定義し、setCountでその値を更新しています。
ボタンのonClickイベントでhandleClick関数が呼ばれ、countが更新されるたびにコンポーネントが再描画され、画面上の数字も変わります。
このように、Reactでは「状態」を管理し、その変化に応じてUIが自動的に更新される仕組みが基本となります。

TODOリストアプリで学ぶ：データ管理とリスト描画

次に、もう少し複雑なReactアプリケーションの典型例として「TODOリストアプリ」があります。
これは、新しいタスクの追加、既存タスクの完了マーク、削除といった機能を通じて、複数のコンポーネント間のデータ受け渡しや、リストの描画方法、状態管理の全体像を学ぶのに最適です。

TODOリストアプリでは、タスクのリストをuseStateで管理し、各タスクを個別のTodoItemコンポーネントとして描画します。
新しいタスクを追加するフォーム、各タスクを表示するリスト、そして各タスクの「完了」や「削除」ボタンなど、複数のコンポーネントが連携して動作します。
特に、JavaScriptのmap関数を使って配列から要素のリストを動的に生成するテクニックは、React開発で頻繁に登場するため、このアプリを通じてしっかりと理解することができます。
この種のアプリは、Reactの基本的な要素を統合的に学べる優れた学習題材です。

実際のWebサービスでの応用例

Reactは、その強力な機能と柔軟性から、世界中の様々なWebサービスやアプリケーションで採用されています。
最も一般的な応用例は、ユーザー体験が重視されるシングルページアプリケーション (SPA)の構築です。
SPAは、ページ遷移時にブラウザがリロードされず、高速で滑らかな操作感を提供します。

具体的な例としては、以下のようなサービスがReactを用いて構築されています。

• SNSアプリケーション: FacebookのほとんどのUIや、InstagramのWeb版など。
• 管理画面・ダッシュボード: 複雑なデータ表示やインタラクティブな操作が必要な社内ツールなど。
• ECサイト: 多くの商品情報やカート機能、ユーザーインタラクションを伴う部分。
• ブログ・ニュースサイト: 動的なコンテンツ表示やコメント機能。
• モバイルアプリ: React Nativeを使えば、iOS/Android向けのネイティブアプリも開発可能。

これらはほんの一部であり、Reactは小規模なコンポーネントから、Facebookのような大規模なWebサービスまで、幅広い用途でその真価を発揮しています。
あなたのアイデア次第で、どんなアプリケーションでもReactを使って実現できる可能性を秘めているのです。