初心者にもわかるReactのインストールと基礎知識を解説

ReactはWebアプリのUI（画面）を構築するJavaScriptライブラリで、初心者が最初に学ぶ技術として広く選ばれています。開発を始めるには、Reactの開発環境を構築（インストール）する必要があります。本記事では、初心者にもわかる「Reactの基礎と環境構築」をテーマに解説します。

この記事で学べること：

• Reactとは
• Reactの開発環境の構築方法
• Reactプロジェクトの起動方法
• React開発に必要な基本概念

Reactの開発環境の構築が完了したら、実際にファイルを編集してReactの動作を確認する簡単なハンズオンも用意しています。この記事を読み終えるころには、Reactの開発環境が整い、自分の手でコードを書き始められる状態になります。ぜひ手を動かしながら読み進めてください。

Reactとは

ReactとはJavaScriptのライブラリで、ウェブアプリのUI（画面）を構築するために使われます。画面を「コンポーネント」と呼ばれる部品単位で管理し、パーツを組み合わせてページ全体を構築します。

UI要素をそれぞれ独立した部品として扱えるため、変更や再利用がしやすい構造になっています。初心者が最初に学ぶライブラリとしても広く選ばれており、Reactを身につけることでWebアプリ開発の現場で求められるスキルの土台が作れます。

Reactの開発環境の構築方法

Reactの開発環境の構築とは、ローカル環境（お使いのPC）でReactアプリを開発・実行できる状態にすることです。構築には、以下の準備が必要です。

• Node.jsのインストール
• Viteを使ったReactプロジェクトの作成
• Reactプロジェクトの起動

Node.jsのインストール方法

Node.jsとは、JavaScriptアプリをPC上で動かすためのソフトウェアです。Reactの開発に必要なツールを動かすために使用します。Node.jsをインストールすると、パッケージ管理ツール「npm」も一緒に導入され、Reactプロジェクトの作成や起動ができるようになります。

1. Node.js 公式サイトにアクセス

   公式サイトを開きます。

   

2. ダウンロードページを表示

   「Node.jsを入手」または「ダウンロード」をクリックします。

   

3. インストーラーをダウンロード

   LTS（長期サポート）版のインストーラーをダウンロードします。ご使用のPCに適切な項目が自動で選択されているので、そのままダウンロードボタンをクリックします。

   Mac版

   

   Windows版

   

4. インストーラーを起動

   画面の指示に従い、インストールを完了させます。

   

5. インストール完了の確認

   インストール後、ターミナルで以下のコマンドを実行し、バージョンが表示されればインストールが無事に完了しています。

   # Node.jsのバージョンを確認
   node -v
   
   # npmのバージョンを確認
   npm -v

   コマンド実行例

   node -v
   vXX.XX.X
   
   npm -v
   XX.X.X

Viteを使ったReactプロジェクトの作成方法

ViteとはReactをはじめとするフロントエンド開発向けのビルドツールで、高速な開発環境を構築できます。React公式でも推奨されているツールです。

1. デスクトップに移動

   プロジェクト（React環境）をデスクトップに作成します。ターミナル（WindowsはコマンドプロンプトまたはPowerShell）で以下のコマンドを実行します。

   Mac

   cd ~/Desktop

   Windows

   cd %USERPROFILE%\Desktop

   ※ %USERPROFILE% は自動でPCのユーザー名に置き換わります。

2. Viteの実行

   以下のコマンドをターミナルで実行します。Reactプロジェクトの作成、フォルダへの移動、必要なパッケージのインストールを順に行います。

   Mac・Windows共通

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

   ※ my-appはプロジェクト名です。任意の名前に変更できます。

3. 確認メッセージの対応

   「create-viteをインストールしますか？」と表示された場合、 y を入力してEnterを押してください。

   Need to install the following packages:
   create-vite@X.X.X
   Ok to proceed? (y)

4. ターミナルの出力を進める

   実行中に以下のメッセージが表示されます。それぞれ選択してください。

   次のメッセージは No を選択します。

   ◇  Use Vite 8 beta (Experimental)?:
   │  No
   │

   次のメッセージは Yes を選択します。

   ◇  Install with npm and start now?
   │  Yes
   │

   ※ 表示されるメッセージはViteのバージョンによって異なる場合があります。

5. プロジェクトの作成完了

   以下のメッセージが表示されれば、Reactプロジェクトの作成は完了です。Install with npm and start now?でYesを選択した場合、開発サーバーも自動で起動します。

   ◇  Scaffolding project in /Users/username/Desktop/my-app...
       │
       ◇  Installing dependencies with npm...
       │
       ◇  Starting dev server...
   
         VITE vX.X.X  ready in xxx ms
   
         ➜  Local:   http://localhost:5173/

   ※http://localhost:5173/ の番号表示は環境によって異なる場合があります。

Reactの起動方法

Reactの開発サーバーは、以下のコマンドで起動します。プロジェクト作成時に自動で起動した場合、次回以降の開発で使用するコマンドです。

npm run dev

起動後にターミナルへ以下の表示が出たら、起動成功です。

VITE vX.X.X  ready in xxx ms

➜  Local:   http://localhost:5173/

ターミナルに表示されているURLにアクセスし、以下の画面が開くことを確認してください。

開発サーバーを終了するには、ターミナルでCtrl + Cを押してください。

Reactプロジェクトのファイル・フォルダについて

Reactプロジェクトとは、Reactアプリの開発に必要なファイルやフォルダをまとめた作業環境です。Viteで作成すると、自動でいくつかのファイルとフォルダが生成されます。

Viteで作成されるプロジェクトの構成について

Viteで生成されるプロジェクトの構成は以下の通りです。開発で主に触れるのはsrc/フォルダ内のファイルです。

my-app/
├── public/          # 画像など静的ファイルの置き場所
├── src/             # 開発で主に編集するファイル群
│   ├── assets/      # 画像などのリソースファイル
│   ├── App.css      # Appコンポーネントのスタイル
│   ├── App.jsx      # メインのコンポーネント
│   ├── index.css    # 全体のスタイル
│   └── main.jsx     # アプリのエントリーポイント
├── index.html       # アプリのベースとなるHTMLファイル
├── package.json     # 依存パッケージの管理ファイル
└── vite.config.js   # Viteの設定ファイル

Reactの動作を確認する

ここからは、Reactの動作を実際に確認するミニハンズオンです。ファイルを編集すると画面が即座に更新されるというReactの特徴を体感できます。

カウント数の変更

ブラウザで開いているページのボタンをクリックすると、画面全体を再読み込みせずに数字だけが変わります。これはReactが画面の一部だけを効率よく更新する仕組みを持っているためです

※Stateについては、後のセクションで解説します。

テキストの変更

src/App.jsxを編集すると、ブラウザの表示がリアルタイムで更新されます。これはプロジェクトのホットリロード機能によるもので、ファイルを保存するたびに即座に反映されます。

エディタでsrc/App.jsxを開き、以下の箇所を書き換えます。

// 変更前
<h1>Vite + React</h1>

// 変更後（例）
<h1>エンベーダー</h1>

ファイルを保存し、ブラウザの表示が自動で更新されることを確認できます。

Reactの基本について

Reactの開発を進めるうえで、基本となるのがコンポーネント、JSX、Props、Stateの4つの概念です。それぞれの概要を紹介します。

コンポーネントとは

コンポーネントとは、UIを部品単位に分割して管理する仕組みです。ボタンやフォームなどの要素をそれぞれ独立した部品として定義し、組み合わせてページを構築します。

React コンポーネントの記事 >>

JSXとは

JSXとは、JavaScript内にHTMLに似た構文を記述できる拡張記法です。Reactのコンポーネントはこの記法を使ってUIを定義します。

JSXについて >>

Propsとは

Propsとは、親コンポーネントから子コンポーネントへデータを渡す仕組みです。コンポーネントを再利用する際に、表示内容を動的に変えることができます。

React Propsの記事 >>

Stateとは

Stateとは、コンポーネント内で管理する動的なデータのことです。ユーザーの操作に応じて値が変化し、画面へ即座に反映されます。

React useStateの記事 >>

Reactに関するよくある質問

Reactに関するよくある質問を以下の通りにまとめました。

Q. JavaScriptの知識がなくてもReactは学べる？

Reactを学びながら、疑問点はJavaScriptの基礎を確認しながら進めることも可能です。変数・関数・配列といった基本的な概念は、Reactを触りながら自然と身につけていけます。

Q. Reactの開発にNode.jsが必要な理由は？

ReactはNode.js上で動作する開発ツールを使用するため、事前にインストールが必要です。Node.jsがない環境ではプロジェクトの作成や開発サーバーの起動ができません。

Q. MacでのNode.jsインストールは、Homebrewとインストーラーどちらがよい？

Homebrewはパッケージ管理に慣れた方向けの方法です。すでにPCにHomebrewがインストールされている方に、おすすめの方法です。初めてNode.jsをインストールする場合は、公式サイトのインストーラー経由がシンプルで手軽です。

Q. ViteとCreate React Appの違いは？

Create React App はかつてReact公式が推奨していたセットアップツールですが、現在はメンテナンスが停止しており非推奨となっています。現在は、ViteがReact公式が推奨するプロジェクトの作成方法です。

Q. ReactとNext.jsの違いは？

ReactはUIを構築するためのJavaScriptライブラリで、Next.jsはReactをベースに構築されたフレームワークです。

まとめ

本記事では、Reactのインストール方法から基本概念までを解説しました。

学んだ内容：

この記事の要点は以下の通りです。

• ReactはUIを構築するJavaScriptライブラリ
• Node.jsはReactの開発に必要なソフトウェア
• ViteはReact公式が推奨する高速な開発環境構築ツール
• npm create vite@latestコマンドでプロジェクトを作成
• npm run devで開発サーバーを起動
• src/App.jsxを編集することでブラウザの表示をリアルタイムに確認可能
• コンポーネント・JSX・Props・StateがReactの基本概念

ここまで進めたことで、Reactの開発環境が整い、自分の手でコードを書き始められる状態になっています。小さな一歩ですが、実際に手を動かして動作を確認できたことは確かな成功体験です。同じようにReactの基本概念を一つずつ進め、成功体験を積んで成長を継続していってください。

参考資料

以下のリンクは、この記事で解説した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご覧ください。

• Vite - 公式 >>
• node.js - 公式 >>
• React - 公式 >>