[React講座] Node.js・npm・ビルドツールの基礎

2025年11月26日

当ページのリンクには広告が含まれています。

Node.js・npm・ビルドツールの基礎

なぜNode.jsが必要なのか？

Reactは「ブラウザで動くUIライブラリ」ですが、開発するときはブラウザだけではなく、

Node.js（サーバー側JavaScript実行エンジン）
npm（パッケージ管理ツール）
ビルドツール（Vite / webpack など）

をセットで使います。

それぞれの役割：

Node.js
- PC上でJavaScriptを実行するためのランタイム
- 開発サーバーやビルドツールを動かすエンジン
npm / pnpm / yarn
- ライブラリをインストールするツール
  （React本体、React Router、Testing Libraryなど全部ここ経由）
ビルドツール（Viteなど）
- 開発中：
  - ローカルサーバーを立ててhttp://localhost:XXXXで表示
  - コードを変更すると自動リロード（HMR：Hot Module Replacement）
- 本番用：
  - バラバラのJS/CSSをまとめて最適化したファイルに変換（バンドル）

実務的には「Node.jsを入れる＝React開発の土台を入れる」というイメージでOKです。

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

公式サイトからLTS版（安定版）をダウンロードしてインストール
- 検索ワード：Node.js download
- 基本的には LTS（推奨版）を選ぶ
インストール後、ターミナルでバージョン確認

node -v
npm -v

どちらもバージョンが表示されればOK

npm / npx の役割

npm とは？

「Node Package Manager」の略
ライブラリをインストールするコマンド

例：

npm install react react-dom

npx とは？

npm に同梱されている「その場限りの実行ツール」
ローカルにインストールされていないパッケージも、一時的にダウンロードしてコマンド実行できる

例（Viteのプロジェクト作成など）：

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

例では create vite@latest というツールを一時的に動かして、my-react-app というReactプロジェクトのひな形を作っています。

package.json の読み方

Reactプロジェクトを作ると、ルートに必ず package.json ができます。
これは「このプロジェクトが使っているライブラリとコマンドの一覧」です。

例（Vite + React）：

{
  "name": "my-react-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react-swc": "^4.0.0",
    "vite": "^5.0.0"
  }
}

ポイントだけ拾うと：

dependencies
- 本番環境でも必要なライブラリ
- react, react-dom, react-router-dom など
devDependencies
- 開発中だけ使うライブラリ
- vite, eslint, jest など
scripts
- npm run xxx で実行できるコマンドの短縮名
- 例：
  - npm run dev ⇒ "dev": "vite"
  - npm run build ⇒ "build": "vite build"
  - npm run preview ⇒ "preview": "vite preview"

Reactを書くうえでは、「scripts にどんなコマンドがあるか」を見ておくと、開発・ビルドの手順が一発で分かるので便利です。

ViteでReactプロジェクトを作ってみる

今後の学習用としては、Vite + React 前提で説明します。

① プロジェクトを作成

ターミナルで以下のコマンドを実行：

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

my-react-app の部分はプロジェクト名（好きな名前でOK）
--template react で React 用のテンプレートを指定

対話式で色々聞かれる場合もありますが、基本 Enter連打でOK。

② 依存パッケージをインストール

作られたフォルダに移動して依存パッケージをインストール：

cd my-react-app
npm install

これで node_modules フォルダが作られ、
React本体やViteなど、必要なライブラリ一式がローカルに入ります。

③ 開発サーバーを起動

npm run dev

上記コマンドを実行すると、こんな感じのメッセージが出ます：

  VITE v5.0.0  ready in 300 ms

  ➜  Local:   http://localhost:5173/

ブラウザで http://localhost:5173/ を開けば、ViteのReact初期画面が表示されます。

この状態が「React開発環境が立ち上がった」状態です。

開発サーバーとビルドの違い

開発中：`npm run dev`

ソースコードをそのまま（に近い形で）読み込んで動かす
ファイル保存すると即座にブラウザ側が更新（HMR）
開発時限定のサーバーなので、本番公開には使わない

本番用ビルド：`npm run build`

npm run build

これを叩くと、dist/ フォルダに最適化済みファイルが生成されます。

たとえば：
- dist/index.html
- dist/assets/index-xxxxxx.js
- dist/assets/index-xxxxxx.css

これが実際にサーバーにアップロードされる「本番用成果物」になります。

ビルド結果をローカルで確認：`npm run preview`

npm run preview

ビルド結果（dist/）を使って、本番と近い状態でローカル確認するためのコマンドです。

Reactのコードを書く場所（Vite版）

Vite + React の初期構成：

my-react-app/
  ├─ index.html
  ├─ package.json
  ├─ vite.config.mts
  └─ src/
       ├─ main.jsx
       ├─ App.jsx
       └─ assets/

よく触るのは主にこの2つです：

src/App.jsx
- 画面のメインコンポーネント
- 最初はここをいじっていく
src/main.jsx
- Reactアプリ全体をDOMにマウントしている入口
- 基本的には、最初はほとんど触らなくてOK

初期の main.jsx はだいたいこんな感じです：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

index.html の中にある <div id="root"></div> に対して、
App コンポーネントを「差し込んでいる」という構造です。

つまり、「App.jsx の中身＝画面のスタート地点」。ここを書き換えていけば、ReactのUI開発が始められる

というイメージでOKです。

よくあるハマりポイントと軽い対策

Nodeのバージョンが古い / 新しすぎる
- Viteの要件を満たしていないと、プロジェクト作成や実行時にエラー
- 基本、LTS版を入れておけば問題になりにくい
npm install を忘れて npm run dev してエラー
- 「module not found」「Cannot find package 〜」などが出る
- 一度 npm install してから再実行
フォルダ階層を間違えてコマンドを打つ
- my-react-app に入っていない状態で npm run dev
  → Missing script: "dev" など
- cd でプロジェクトルートに移動してから実行
ポート被り
- http://localhost:5173 が他アプリと被ることは少ないですが、もし既に使われていればViteの方で別ポートにしてくれます
- 出力ログに書いてあるURLを毎回ちゃんと見るクセをつけると安心です

まとめ

Node.js は「ブラウザ外でJSとツールを動かすための土台」
npm は「ライブラリのインストール＆管理ツール」
package.json で依存関係とコマンド（scripts）を管理
Vite で
- npm create vite@latest ... ⇒ 雛形作成
- npm install ⇒ ライブラリ導入
- npm run dev ⇒ 開発サーバー起動
- npm run build ⇒ 本番用ファイル生成
Reactコードは基本 src/App.jsx から触り始める