2 章

開発環境の設定(Node.js + Vite)

Node.js と pnpm をインストールし、Vite で最初の React プロジェクトを作って dev server を立ち上げます。本書のすべての例コードはこの環境の上で動作します。

1 章で React が何で、本書がどこへ向かうのかを見ました。本章では手元に道具を入れていきます。本文のすべての例コードは、本章で作った環境の上で動作します。

本章でやることは 3 つです。

Node.js 22 LTS のインストール
pnpm の有効化
Vite で新しい React プロジェクトを作成 + dev server の実行

道具を正確に選んでおくことが重要です。本書は最初から最後まで同じ道具一式を前提として進みます。4 部の Next.js、5 部のテスト / デプロイ、6 部のフルスタックキャップストーンまで、すべてこの環境をそのまま拡張する形でつながっていきます。

Node.js とは何で、なぜ必要なのか #

React は JavaScript ライブラリです。ところが、私たちが書く React コード(JSX、モジュールの import など)はブラウザがそのままでは理解できない構文を含んでいます。実行可能な JavaScript に変換(transpile + bundle)するビルド工程が必要で、そのビルド道具を動かすには JavaScript ランタイムが必要です。それが Node.js です。

Node.js はもともとサーバ開発のために作られましたが、今日のフロントエンド開発者も Node.js の上で動作する道具(バンドラ、コンパイラ、パッケージマネージャ、テストランナー)を毎日使います。React で開発するには Node.js が必須です。

バージョン選び — LTS #

おすすめのバージョンは Node.js 22 LTS です。LTS は Long Term Support の略で、一定期間の安定性とセキュリティパッチが保証されるバージョンです。nodejs.org に行くと LTS と Current の 2 つのバージョンが見えますが、初めて始める場合や実務プロジェクトであれば LTS を取得します。

本書のコードは Node.js 22 LTS を基準に動作を検証しました。これ以上のバージョンでもほぼ同じように動きます。

Node.js のインストール #

OS ごとに手順が少し異なります。

macOS #

最もきれいな方法は Homebrew によるインストールです。

Homebrew でインストール

brew install node@22

Homebrew を使わないなら、nodejs.org から .pkg インストーラを取得して、ダブルクリックでインストールします。

Linux #

ほとんどのディストリビューションではパッケージマネージャでインストールできますが、バージョンがやや古い場合があるので、NodeSource リポジトリを追加するか、nvm を使う方が安全です。

nvm でインストール(Linux/macOS 共通)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# 新しいターミナルを開いてから
nvm install 22
nvm use 22

nvm を使うと、1 台のマシンで複数の Node.js バージョンを切り替えて使えます。プロジェクトごとに Node.js のバージョンが異なる環境ならおすすめです。

Windows #

道は 2 つあります。

選択 1. WSL2 + Linux 手順(推奨)

最近 Windows でフロントエンド開発をするなら、WSL2(Windows Subsystem for Linux 2)の中で作業するのがほぼ標準です。Linux のシェル / ファイルシステムで上の nvm 手順をそのまま辿れば構いません。

WSL が初めてなら、PowerShell を管理者として開いて:

WSL2 + Ubuntu のインストール

wsl --install

その後 Ubuntu ターミナルを開いて nvm 手順を進めます。VS Code には Remote - WSL 拡張機能を入れると、Windows 側で立ち上げたエディタから WSL 内のファイルを直接編集できます。

選択 2. Windows ネイティブインストール

WSL が重荷であれば、nodejs.org から .msi インストーラを取得してインストールする道もあります。ただし一部の道具(特に node_modules の中の OS 固有バイナリ)が Windows ネイティブのパスで遅かったりぎこちなかったりする場合があります。WSL の方が結局のところ摩擦が少ないです。

インストール確認 #

インストールが終わったら、ターミナルを新しく開いてバージョンを確認します。

バージョン確認

node -v
# v22.x.x

npm -v
# 10.x.x

npm は Node.js と一緒に自動的にインストールされる既定のパッケージマネージャです。ただし本書は次の節で扱う pnpm を 1 次として使います。

pnpm の有効化 #

本書はパッケージマネージャとして pnpm を使います。npm / yarn もほぼ同じコマンド体系で、上で自動インストールされた npm でもすべての例が動作しますが、pnpm を推奨する理由は次のとおりです。

高速なインストール — グローバル store からハードリンクで依存関係を共有するため、ディスク容量も節約できます
monorepo フレンドリー — 本書の 6 部キャップストーンで workspaces 機能を少し活用します
厳密な依存関係解決 — package.json に宣言していないパッケージを誤って import してしまう事故を減らせます

pnpm は Node.js 16.13 以上に内蔵された Corepack で簡単に有効化できます。

Corepack で pnpm を有効化

corepack enable
corepack prepare pnpm@latest --activate
pnpm -v
# 10.x.x

これ以降、本書のすべてのコマンドは pnpm を基準に書きます。npm/yarn ユーザも次の対応表を覚えておけば、ほぼそのまま辿れます。

pnpm	npm	yarn
`pnpm install`	`npm install`	`yarn`
`pnpm add <pkg>`	`npm install <pkg>`	`yarn add <pkg>`
`pnpm add -D <pkg>`	`npm install -D <pkg>`	`yarn add -D <pkg>`
`pnpm dev`	`npm run dev`	`yarn dev`

Vite で新しいプロジェクトを作る #

それでは最初の React プロジェクトを作ります。ビルド道具として Vite(「ヴィート」と発音、フランス語で「速い」)を使います。

Vite は React を含む複数のフロントエンドフレームワーク向けのビルド道具です。新規プロジェクトの初期設定を自動で作ってくれて、開発中はとても高速な dev server を立ち上げます。以前の標準だった create-react-app は公式に deprecated になりました。いまは Vite が事実上の標準です。

希望の場所(例: ~/projects)に移動してから、ターミナルで:

Vite プロジェクトの作成

pnpm create vite@latest

コマンドを実行するといくつかの質問が出ます。

Project name — プロジェクトフォルダの名前。好きな名前を入力します(例: my-first-react)
Select a framework — React を選びます
Select a variant — JavaScript を選びます。TypeScript は本書の 3 部で本格的に扱います

選び終わると Vite がプロジェクトフォルダを作ってくれます。最後に次のような案内が出ます。

実行結果

Done. Now run:

  cd my-first-react
  pnpm install
  pnpm dev

案内のとおりに進めます。

依存関係のインストール

cd my-first-react
pnpm install

pnpm install は package.json に宣言された依存関係(React 本体、Vite、その他の道具)をグローバル store にダウンロードし、node_modules フォルダにハードリンクでつなぎます。最初は少し時間がかかりますが、2 つ目のプロジェクトからは store にすでに取得済みのパッケージを再利用するため、はるかに速くなります。

Dev server の実行 #

それでは dev server を立ち上げてみます。

dev server の実行

pnpm dev

次のような出力が出れば成功です。

実行結果

  VITE v6.x.x  ready in 250 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

ブラウザを開いて http://localhost:5173 にアクセスします。Vite + React のロゴが回転する既定の画面が見えれば、すべて正常です。

プロジェクト構造を眺める #

開いてあるプロジェクトフォルダの構造は次のとおりです。

my-first-react/

my-first-react/
├── node_modules/        ← インストールされたライブラリ(直接触る必要はない)
├── public/              ← 静的ファイル(画像、favicon など)
├── src/                 ← 私たちが書くコードが入る場所
│   ├── App.jsx          ← 最初のコンポーネント
│   ├── main.jsx         ← アプリのエントリポイント
│   ├── App.css
│   └── index.css
├── index.html           ← アプリが注入される HTML
├── package.json         ← プロジェクト情報と依存関係の一覧
└── vite.config.js       ← Vite の設定

いまの段階で最も重要なファイルは src/App.jsx です。画面に表示する内容を書く場所です。

最初の修正 — Hot Module Replacement を体験する #

VS Code(推奨エディタ)でプロジェクトフォルダを開きます。src/App.jsx を開くと次のようなコードが見えます。

src/App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        {/* ... */}
      </div>
      <h1>Vite + React</h1>
      {/* ... */}
    </>
  )
}

export default App

<h1>Vite + React</h1> の部分を次のように変えます。

src/App.jsx

<h1>こんにちは、React!</h1>

保存すると、dev server を止めたりリロードしたりしなくてもブラウザ画面が即座に更新されます。この機能が HMR(Hot Module Replacement) です。変更されたモジュールだけをリアルタイムで差し替えて画面に反映します。開発速度を大きく押し上げてくれるので、これから頻繁に見ることになります。

ヒント

dev server が立ち上がっている間、コードを修正するとブラウザが自動で更新されます。dev server を終了するにはターミナルで Ctrl + C を押します。再開するときは同じフォルダで pnpm dev を実行します。

練習問題 #

本章の手順どおりに my-first-react プロジェクトを作って dev server を立ち上げ、src/App.jsx の <h1> テキストを自分の名前が入った挨拶に変えてみてください。保存と同時にブラウザが更新されるのを確認すれば十分です。
src/App.jsx の中で <h1> の 1 行下に、新しい <p>今日は React 初日です。</p> を 1 行追加してみてください。保存後に画面に 2 行とも見えるか確認します。
pnpm で dayjs ライブラリを追加(pnpm add dayjs)してから、App.jsx の中で import dayjs from 'dayjs' で読み込み、<p>今日は {dayjs().format('YYYY-MM-DD')} です。</p> の 1 行で今日の日付を画面に表示してみてください。package.json の dependencies に dayjs が追加されていることも一緒に確認します。

一行まとめ: 本書は Node.js 22 LTS + pnpm + Vite を標準として敷く。pnpm create vite@latest でプロジェクトを作り、pnpm install で依存関係を取得し、pnpm dev で dev server を立ち上げる、この 3 段階が日常のすべてだ。HMR のおかげでコードを保存するとブラウザが即座に更新される。

次の章 #

次の第 3 章 JSX の本質では、本章でちらりと見た <h1>こんにちは、React!</h1> のようなコードが正確には何で、どのように JavaScript に変換されるかを見ていきます。式 / 属性 / 子のルールまで一気に扱います。