React

Reactインストール方法｜npm・yarn・pnpmどれを選ぶべき？

Reactのインストール方法を詳しく解説。npm、yarn、pnpmの違いと選び方、それぞれの特徴とメリット・デメリットを初心者にもわかりやすく紹介

Learning Next 運営
約 20 分で読めます
Reactnpmyarnpnpmインストールパッケージマネージャー

みなさん、Reactを始めたいと思っていませんか？

「どのパッケージマネージャーを使えばいいの？」「npm、yarn、pnpmって何が違うの？」と悩んだことはありませんか？

この記事では、Reactのインストール方法を分かりやすく解説します。 npm、yarn、pnpmの違いも詳しく説明しますよ。

初心者の方でも大丈夫です。 一緒に最適な選択を見つけていきましょう！

パッケージマネージャーって何だろう？

簡単に言うと、ライブラリを管理するツールのことです。

どんな役割があるの？

パッケージマネージャーがしてくれることを見てみましょう。

# パッケージのインストール
npm install react react-dom
yarn add react react-dom
pnpm add react react-dom

これで、Reactライブラリが使えるようになります。 とても便利ですよね。

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

package.jsonというファイルで、どのライブラリを使っているかを記録します。 チーム開発でも同じ環境を作れるんです。

なぜ選択が重要なの？

パッケージマネージャーによって、速度や使いやすさが違います。

インストール速度の違い

  • npm: 30秒
  • yarn: 20秒
  • pnpm: 15秒

ディスク使用量の違い

  • npm: 500MB
  • yarn: 450MB
  • pnpm: 200MB

pnpmが一番早くて軽いんです。 驚きですよね！

主要な3つのツール

現在よく使われているのは、この3つです。

npm（Node Package Manager） Node.jsに最初から入っています。 一番普及していて安定しています。

yarn（Yet Another Resource Negotiator） Facebookが作りました。 高速で機能が豊富です。

pnpm（Performant npm） 最も新しくて高性能です。 ディスク容量を節約できます。

それぞれに特徴があるんですね。

npmでReactをインストールしよう

npmは一番基本的なツールです。

npmの特徴

npmの良いところを見てみましょう。

標準搭載で安心 Node.jsをインストールするだけで使えます。 追加の設定は必要ありません。

安定性が高い 長い間使われているので、とても安定しています。 エラーが起きにくいんです。

情報が豊富 困った時の情報がたくさんあります。 初心者には心強いですね。

# npmが使えるか確認
node --version    # Node.jsのバージョン
npm --version     # npmのバージョン

この2つのコマンドで確認できます。

Reactプロジェクトを作ってみよう

npmを使って、実際にReactプロジェクトを作ってみましょう。

# 1. Node.jsの確認
node --version
# v18.0.0以上がおすすめです

# 2. Reactプロジェクトの作成
npx create-react-app my-react-app
cd my-react-app

# 3. 開発サーバーの起動
npm start

npx create-react-appでプロジェクトが作られます。 npm startで開発サーバーが起動します。

ブラウザで http://localhost:3000 を開くと、Reactアプリが表示されますよ。

手動で環境を作る方法

Create React Appを使わずに、自分で環境を作ることもできます。

# 1. プロジェクトフォルダを作成
mkdir my-custom-react-app
cd my-custom-react-app

# 2. package.jsonを作成
npm init -y

# 3. Reactをインストール
npm install react react-dom

npm init -yで初期設定ファイルが作られます。 npm install react react-domでReactライブラリをインストールします。

次に、開発ツールもインストールしましょう。

# 開発用ツールのインストール
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-react
npm install --save-dev html-webpack-plugin

これらのツールで、Reactアプリをビルドできるようになります。

npmの便利なコマンド

npmには、たくさんの便利なコマンドがあります。

# パッケージの検索
npm search react-router

# パッケージの情報確認
npm info react

# インストール済みパッケージの確認
npm list

# パッケージの更新
npm update react

# セキュリティチェック
npm audit
npm audit fix

npm auditでセキュリティの問題をチェックできます。 npm audit fixで自動修正もできるんです。

yarnでReactをインストールしよう

yarnは高速で機能豊富なツールです。

yarnの特徴

yarnの良いところを詳しく見てみましょう。

高速インストール 並列処理で、npmより速くインストールできます。 待ち時間が短くて済みますね。

確実な依存関係管理 yarn.lockファイルで、正確にバージョンを管理します。 チーム全員が同じ環境を作れます。

オフライン機能 一度ダウンロードしたパッケージは、オフラインでも使えます。 ネット環境が悪い時も安心です。

# yarnのインストール
npm install -g yarn

# バージョン確認
yarn --version

最初に一度だけ、yarnをインストールする必要があります。

Reactプロジェクトを作ってみよう

yarnを使って、Reactプロジェクトを作ってみましょう。

# 1. Reactプロジェクトの作成
yarn create react-app my-react-app

# 2. フォルダに移動
cd my-react-app

# 3. 開発サーバーの起動
yarn start

yarn create react-appでプロジェクトが作られます。 npmと似ていますね。

# 依存関係の確認
yarn list

# パッケージが必要な理由を確認
yarn why react

yarn whyで、なぜそのパッケージが必要なのかが分かります。 とても便利な機能ですね。

手動で環境を作る方法

yarnでも手動環境構築ができます。

# 1. プロジェクトの初期化
mkdir my-yarn-react-app
cd my-yarn-react-app
yarn init -y

# 2. Reactのインストール
yarn add react react-dom

# 3. 開発ツールのインストール
yarn add -D webpack webpack-cli webpack-dev-server
yarn add -D babel-loader @babel/core @babel/preset-react

yarn addでパッケージを追加します。 yarn add -Dで開発用ツールを追加します。

yarnの便利なコマンド

yarnにも便利なコマンドがたくさんあります。

# パッケージの管理
yarn add package-name           # 追加
yarn add -D package-name        # 開発用として追加
yarn remove package-name        # 削除

# バージョン指定
yarn add react@^18.0.0
yarn add react@latest

# アップグレード
yarn upgrade                    # すべて更新
yarn upgrade-interactive        # 対話式更新

yarn upgrade-interactiveでは、どのパッケージを更新するか選べます。 とても使いやすいですよ。

pnpmでReactをインストールしよう

pnpmは最新世代の高性能ツールです。

pnpmの特徴

pnpmの革新的な特徴を見てみましょう。

超高速インストール 3つの中で一番速いです。 並列処理とハードリンクで高速化されています。

ディスク容量の大幅削減 グローバルストアで重複を排除します。 50-90%もディスク容量を節約できるんです。

厳密な依存関係管理 phantom dependenciesを防ぎます。 より安全なプロジェクト環境を作れます。

# pnpmのインストール
npm install -g pnpm

# バージョン確認
pnpm --version

最初に一度だけ、pnpmをインストールします。

Reactプロジェクトを作ってみよう

pnpmを使って、Reactプロジェクトを作ってみましょう。

# 1. Reactプロジェクトの作成
pnpm create react-app my-react-app

# 2. フォルダに移動
cd my-react-app

# 3. 既存ファイルを削除してpnpm形式に変換
rm -rf node_modules package-lock.json yarn.lock
pnpm install

# 4. 開発サーバーの起動
pnpm start

既存のプロジェクトをpnpm形式に変換することもできます。 とても便利ですね。

手動で環境を作る方法

pnpmでも手動環境構築ができます。

# 1. プロジェクトの初期化
mkdir my-pnpm-react-app
cd my-pnpm-react-app
pnpm init

# 2. Reactのインストール
pnpm add react react-dom

# 3. 開発ツールのインストール
pnpm add -D webpack webpack-cli webpack-dev-server
pnpm add -D babel-loader @babel/core @babel/preset-react

コマンドは他のツールと似ています。 覚えやすいですね。

pnpmの便利なコマンド

pnpmにも高性能なコマンドがあります。

# パッケージの管理
pnpm add package-name           # 追加
pnpm add -D package-name        # 開発用として追加
pnpm remove package-name        # 削除

# 高速インストール
pnpm install                    # 通常インストール
pnpm install --frozen-lockfile  # ロックファイル使用
pnpm install --prefer-offline   # オフライン優先

# ストレージ管理
pnpm store status               # 状態確認
pnpm store prune                # 不要ファイル削除

pnpm storeコマンドで、ストレージの管理ができます。 ディスク容量を効率的に使えますよ。

3つのツールを比較してみよう

npm、yarn、pnpmの違いを詳しく比較してみましょう。

速度とディスク使用量

実際のパフォーマンスを比較します。

インストール速度（50個のパッケージ）

  • npm: 45秒
  • yarn: 25秒
  • pnpm: 15秒

再インストール速度（キャッシュあり）

  • npm: 25秒
  • yarn: 8秒
  • pnpm: 3秒

ディスク使用量（同じプロジェクト5回作成）

  • npm: 2.5GB
  • yarn: 2.0GB
  • pnpm: 600MB

pnpmが圧倒的に優秀ですね。

機能比較

各ツールの機能を比較してみましょう。

機能npmyarnpnpm
基本機能
インストール速度普通高速最高速
ディスク効率普通普通優秀
セキュリティ良い良い優秀
利便性
標準搭載✅❌❌
情報の豊富さ多い普通少ない
学習コスト低い普通普通

それぞれに良いところがありますね。

コマンド対応表

同じ作業を違うツールで行う方法です。

# プロジェクトの初期化
npm init
yarn init
pnpm init

# パッケージのインストール
npm install react
yarn add react
pnpm add react

# 開発用パッケージのインストール
npm install -D webpack
yarn add -D webpack
pnpm add -D webpack

# パッケージの削除
npm uninstall react
yarn remove react
pnpm remove react

# すべての依存関係をインストール
npm install
yarn install
pnpm install

基本的な操作は似ています。 覚えやすいですね。

どれを選べばいいの？

状況に応じた最適な選択を紹介します。

初心者におすすめ

プログラミング初心者の方にはnpmがおすすめです。

なぜnpmがおすすめなの？

  • Node.jsに最初から入っている
  • 情報がたくさんある
  • 追加インストールが不要
  • 安定していて安全
# npmを使った始め方
node --version     # Node.jsの確認
npm --version      # npmの確認
npx create-react-app my-first-app
cd my-first-app
npm start

シンプルで分かりやすいですね。

中級者におすすめ

ある程度経験がある方にはyarnまたはpnpmがおすすめです。

yarnがおすすめな人

  • チーム開発をしている
  • 安定性を重視する
  • 豊富な機能を使いたい

pnpmがおすすめな人

  • 速度を最重視する
  • ディスク容量を節約したい
  • 新しい技術が好き
# yarnを使った始め方
npm install -g yarn
yarn create react-app my-project
yarn start

# pnpmを使った始め方
npm install -g pnpm
pnpm create react-app my-project
pnpm start

どちらも高性能ですよ。

プロジェクト規模別の推奨

プロジェクトの大きさに応じた推奨です。

小規模プロジェクト（個人・学習） 推奨: npm

  • シンプルで分かりやすい
  • 追加ツール不要
  • 十分な機能

中規模プロジェクト（チーム開発） 推奨: yarn

  • チーム間での環境統一
  • 高速なインストール
  • 安定した実績

大規模プロジェクト（企業レベル） 推奨: pnpm

  • 最高のパフォーマンス
  • ディスク効率
  • 高度な依存関係管理

規模に合わせて選ぶと良いですね。

移行時の注意点

既存プロジェクトでツールを変更する時の注意点です。

# npmからyarnへの移行
rm -rf node_modules package-lock.json
yarn install

# npmからpnpmへの移行
rm -rf node_modules package-lock.json
pnpm install

古いファイルを削除してから、新しいツールでインストールします。 これで安全に移行できますよ。

よくある問題と解決方法

トラブルが起きた時の対処法を紹介します。

インストールエラーの対処

よくあるエラーと解決方法です。

権限エラー（EACCES）

# 解決方法
sudo chown -R $(whoami) ~/.npm
npm config set prefix ~/.npm-global

ファイルの権限を正しく設定します。

キャッシュの問題

# npmの場合
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# yarnの場合
yarn cache clean
rm -rf node_modules yarn.lock
yarn install

# pnpmの場合
pnpm store prune
rm -rf node_modules pnpm-lock.yaml
pnpm install

キャッシュをクリアしてから再インストールします。

パフォーマンス最適化

各ツールを速くする方法です。

npmの最適化

# .npmrcファイルの設定
registry=https://registry.npmjs.org/
progress=false
loglevel=warn

設定ファイルでパフォーマンスを向上できます。

CI環境での最適化

# npmの場合
npm ci  # package-lock.jsonから正確にインストール

# yarnの場合
yarn install --frozen-lockfile

# pnpmの場合
pnpm install --frozen-lockfile

CI環境では、ロックファイルを使うと安全です。

まとめ

それぞれのツールの特徴を理解して、最適な選択をしましょう。

最終的なおすすめ

状況別の最終推奨をまとめます。

初心者・学習目的 推奨: npm

  • 標準搭載で安心
  • 情報が豊富
  • 学習コストが低い

個人開発・小規模プロジェクト 推奨: npm または pnpm

  • シンプルさ（npm）
  • 高速さ（pnpm）

チーム開発・中規模プロジェクト 推奨: yarn

  • 安定性と実績
  • チーム機能が充実
  • バランスが良い

大規模・企業プロジェクト 推奨: pnpm

  • 最高のパフォーマンス
  • ディスク効率
  • 高度な管理機能

選択のポイント

パッケージマネージャーを選ぶ時のチェックポイントです。

プロジェクト要件

  • チーム規模は？
  • プロジェクト期間は？
  • パフォーマンス要件は？

チーム要件

  • メンバーの経験レベルは？
  • 学習コストは許容できる？
  • 統一ルールは作れる？

これらを考慮して選択すると良いですね。

今後の学習

各ツールの学習におすすめのリソースです。

公式ドキュメント

実践的なリソース

  • React公式チュートリアル
  • Node.js公式ガイド
  • GitHub Actions公式ドキュメント

どのツールを選んでも、継続的な学習が大切ですね。

適切なパッケージマネージャーの選択で、React開発がもっと楽しくなります。 ぜひこの記事を参考にして、自分に合ったツールを見つけてくださいね！

関連記事

Untitled

2025年7月18日
29分

Untitled

2025年7月18日
30分

Untitled

2025年7月18日
30分