React npmコマンド一覧｜開発で使える便利なコマンド集
React開発で必要なnpmコマンドを網羅的に解説。プロジェクト作成、パッケージ管理、ビルド、テストまで実際の使用例とともに詳しく説明します。
みなさん、Reactの開発でnpmコマンドを効率的に使えていますか？
「npm installとnpm ciの違いがわからない」「パッケージの更新はどうやればいいの？」「開発効率を上げるコマンドを知りたい」
そんな疑問を持っていませんか？
npmコマンドは、React開発には欠かせないツールです。 でも種類が多くて、どのコマンドをいつ使えばいいのか迷ってしまいますよね。
この記事では、React開発で必要なnpmコマンドを厳選してご紹介します。 基礎から応用まで、実際の使用例とともに詳しく解説しますよ。
npmって何？React開発での役割を知ろう
npmは「Node Package Manager」の略です。 JavaScriptライブラリの管理やビルドプロセスの実行に使います。
React開発では、npmが必須のツールになります。
npmとyarnの違いって何？
React開発では、npmとyarnどちらも使用できます。
# npm使用の場合
npm install react
npm run start
# yarn使用の場合
yarn add react
yarn start
この記事では、npmコマンドに絞って解説していきます。 最近はpnpmという高速なパッケージマネージャーも人気ですが、まずはnpmを覚えましょう。
package.jsonってなに？
{
"name": "my-react-app",
"version": "1.0.0",
"description": "React application with npm commands",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"react-scripts": "5.0.1"
}
}
package.jsonファイルは、プロジェクトの設定情報を管理します。 依存関係やスクリプトコマンドも、ここに記録されているんです。
このファイルがあることで、チーム全体で同じ環境を作れるんですね。
プロジェクト作成コマンドをマスターしよう
Reactプロジェクトを作成する基本的なコマンドから始めましょう。
「どのコマンドでプロジェクトを作ればいいの？」と迷ったことありませんか？
Create React Appでサクッと作成
# 基本的なReactアプリの作成
npx create-react-app my-react-app
# TypeScriptテンプレートでの作成
npx create-react-app my-typescript-app --template typescript
# 特定のディレクトリにプロジェクト作成
npx create-react-app . --template typescript
# Create React Appの最新版を使用
npx create-react-app@latest my-app
npx create-react-appコマンドで、Reactアプリがすぐに作れます。
--template typescriptオプションで、TypeScript環境も簡単に設定できますよ。
Create React Appは、初心者にとても優しいツールです。 複雑な設定をしなくても、すぐにReact開発を始められるんです。
Viteで高速開発環境を作ろう
# Viteを使ったReactプロジェクト作成
npm create vite@latest my-react-app -- --template react
# TypeScript + Reactテンプレート
npm create vite@latest my-react-app -- --template react-ts
# プロジェクトディレクトリに移動して依存関係をインストール
cd my-react-app
npm install
# 開発サーバー起動
npm run dev
Viteは、Create React Appよりも高速な開発環境です。 起動やビルドがとても速いので、最近人気が高まっています。
プロジェクト作成後は、npm installで依存関係をインストール。
npm run devで開発サーバーを起動します。
Next.jsプロジェクトも作れる
# Next.jsプロジェクト作成
npx create-next-app@latest my-nextjs-app
# TypeScriptとTailwind CSSを含む設定
npx create-next-app@latest my-nextjs-app --typescript --tailwind --eslint
# App Routerを使用（Next.js 13+）
npx create-next-app@latest my-nextjs-app --app
Next.jsは、Reactベースのフルスタックフレームワークです。 SSRやSSGも簡単に実装できるので、本格的なアプリ開発に向いています。
既存プロジェクトの初期化
# 新しいpackage.jsonを作成
npm init
# デフォルト設定で作成（対話式スキップ）
npm init -y
# 特定の設定で初期化
npm init --name "my-project" --version "1.0.0" --description "My React project"
npm initコマンドで、新しいプロジェクトを初期化できます。
-yオプションを使えば、対話式の質問をスキップできますよ。
パッケージ管理の基本をマスターしよう
Reactライブラリの管理コマンドを覚えましょう。
これが分かれば、必要なライブラリを自由に追加できます。
パッケージのインストール方法
# すべての依存関係をインストール
npm install
# または
npm i
# 特定のパッケージをインストール
npm install react-router-dom
# 複数のパッケージを同時にインストール
npm install axios react-query @mui/material
# 特定のバージョンを指定してインストール
npm install react@18.2.0
# 最新のベータ版をインストール
npm install react@beta
# グローバルにインストール
npm install -g create-react-app
npm installまたはnpm iで、パッケージをインストールできます。
複数パッケージも、スペース区切りで一度にインストール可能です。
バージョンを指定したい場合は、@の後にバージョン番号を付けます。
@betaで最新のベータ版も試せますよ。
開発用ライブラリのインストール
# 開発時のみ必要なパッケージ（devDependencies）
npm install --save-dev eslint
# 短縮形
npm install -D prettier eslint-config-prettier
# TypeScript関連の開発依存関係
npm install -D typescript @types/react @types/react-dom
# テスト関連ライブラリ
npm install -D jest @testing-library/react @testing-library/jest-dom
--save-devまたは-Dオプションで、開発時のみ必要なパッケージをインストールします。
これらは本番環境では不要なパッケージです。
ESLintやPrettierなどのツール、TypeScriptの型定義ファイル。 テスト関連のライブラリも、開発依存関係として追加しましょう。
本番用ライブラリのインストール
# 本番依存関係（dependencies）に追加
npm install --save react-helmet
# 短縮形（デフォルトでdependenciesに追加される）
npm install -S lodash
# peerDependenciesとして指定されたパッケージの自動インストール
npm install --legacy-peer-deps
--saveまたは-Sオプションで、本番環境でも必要なパッケージをインストールします。
デフォルトでは、dependenciesに追加されるので、通常は省略できます。
--legacy-peer-depsは、パッケージの依存関係に問題がある場合に使用します。
「あれ、インストールできない」という時に試してみてください。
パッケージを更新しよう
# すべてのパッケージを最新バージョンに更新
npm update
# 特定のパッケージを更新
npm update react react-dom
# パッケージの更新可能なバージョンを確認
npm outdated
# 詳細な更新情報を表示
npm outdated --long
# メジャーバージョンを含む更新確認
npx npm-check-updates
# または
npx ncu
# 実際に更新を適用
npx ncu -u && npm install
npm updateで、パッケージを最新バージョンに更新できます。
npm outdatedで、更新可能なパッケージを事前にチェックしましょう。
npm-check-updatesを使えば、メジャーバージョンアップも確認できます。
ただし、メジャーバージョンアップは破壊的変更があるので注意が必要です。
パッケージの削除方法
# パッケージを削除
npm uninstall lodash
# 短縮形
npm remove lodash
npm rm lodash
# 開発依存関係から削除
npm uninstall -D eslint
# グローバルパッケージの削除
npm uninstall -g create-react-app
# 複数パッケージの一括削除
npm uninstall axios react-query lodash
npm uninstall、npm remove、npm rmで、パッケージを削除できます。
どれも同じ機能なので、好みで選んでくださいね。
開発依存関係から削除する場合は、-Dオプションを付けます。
複数パッケージも、一度に削除可能です。
パッケージ情報を確認しよう
# インストール済みパッケージ一覧
npm list
# トップレベルのパッケージのみ表示
npm list --depth=0
# グローバルパッケージ一覧
npm list -g --depth=0
# 特定パッケージの情報を表示
npm info react
# パッケージの利用可能バージョンを表示
npm view react versions --json
# パッケージのダウンロード統計
npm view react
# ライセンス情報を確認
npx license-checker
npm listで、インストール済みパッケージの一覧を表示できます。
--depth=0オプションで、直接依存のパッケージのみ表示します。
npm infoやnpm viewで、パッケージの詳細情報を確認できますよ。
ライセンス情報の確認も、商用プロジェクトでは重要です。
開発・ビルドコマンドの使い方
Reactアプリの開発とビルドに関するコマンドを学びましょう。
毎日使うコマンドなので、しっかり覚えておきたいですね。
開発サーバーを起動しよう
# Create React Appの開発サーバー起動
npm start
# 特定のポートで起動
PORT=3001 npm start
# ホストを指定して起動
HOST=0.0.0.0 npm start
# HTTPSで起動
HTTPS=true npm start
# ブラウザを自動で開かない
BROWSER=none npm start
# Viteプロジェクトの場合
npm run dev
# Next.jsプロジェクトの場合
npm run dev
npm startで、React開発サーバーを起動できます。
デフォルトでは、http://localhost:3000でアプリが立ち上がります。
環境変数を指定することで、ポートやホスト、HTTPSの設定も変更可能です。
BROWSER=noneで、自動でブラウザが開かないようにもできますよ。
本番用ビルドを作成しよう
# 本番用ビルドを作成
npm run build
# ビルド結果の分析
npm run build -- --analyze
# 環境変数を指定してビルド
NODE_ENV=production npm run build
# 特定の出力ディレクトリを指定
BUILD_PATH=dist npm run build
# Viteでのビルド
npm run build
# Next.jsでの静的エクスポート
npm run build
npm run export
npm run buildで、本番用のビルドファイルを作成できます。
ビルドファイルは、buildディレクトリに生成されます。
--analyzeオプションで、バンドルサイズの分析も可能です。
環境変数を指定することで、ビルド設定をカスタマイズできますよ。
ビルド結果をプレビューしよう
# ビルド結果をローカルでプレビュー（Vite）
npm run preview
# 本番ビルドを静的サーバーで確認
npx serve -s build
# 特定のポートでサーブ
npx serve -s build -l 5000
# Next.jsの本番サーバー起動
npm run start
# Expressサーバーでのカスタムサーブ
node server.js
ビルド後のファイルを確認したい場合は、npx serveが便利です。
-sオプションで、SPAモードで静的ファイルをサーブできます。
Viteならnpm run preview、Next.jsならnpm run startで確認できますね。
開発効率を上げるコマンド
# ファイル変更の監視とホットリロード
npm run dev -- --hot
# デバッグモードでの起動
DEBUG=* npm start
# パフォーマンス分析
npm run build -- --profile
# バンドルサイズの分析
npx webpack-bundle-analyzer build/static/js/*.js
# Create React Appのソース分析
npx source-map-explorer 'build/static/js/*.js'
--hotオプションで、ホットリロード機能を有効にできます。
デバッグ情報を詳しく表示したい場合は、DEBUG=*を使いましょう。
バンドルサイズの分析ツールも、パフォーマンス改善に役立ちます。 どのライブラリがファイルサイズを大きくしているかが分かりますよ。
テスト・品質管理コマンドを覚えよう
コードの品質を保つためのコマンドを学びましょう。
「テストって難しそう」と思うかもしれませんが、基本的なコマンドは簡単です。
テスト実行の基本
# すべてのテストを実行
npm test
# 特定のテストファイルを実行
npm test -- Button.test.js
# テストをカバレッジ付きで実行
npm test -- --coverage
# 変更されたファイルのテストのみ実行
npm test -- --watch
# すべてのテストをウォッチモードで実行
npm test -- --watchAll
# CI環境でのテスト実行
CI=true npm test
# Jest設定を指定してテスト実行
npm test -- --config=jest.config.js
npm testで、プロジェクト内のテストを実行できます。
--coverageオプションで、コードカバレッジも確認可能です。
--watchモードなら、ファイル変更時に自動でテストが実行されます。
開発中は、このモードが便利ですよ。
E2Eテストを実行しよう
# Cypressのインストールと初期化
npm install -D cypress
npx cypress open
# Cypressテストの実行
npx cypress run
# 特定のテストファイルを実行
npx cypress run --spec "cypress/integration/app.spec.js"
# Playwrightでのテスト
npm install -D @playwright/test
npx playwright test
# ヘッドレスモードでテスト
npx playwright test --headed
E2Eテストでは、実際のブラウザでアプリの動作をテストします。 Cypressは初心者にも使いやすいE2Eテストツールです。
Playwrightも最近人気のツールで、複数ブラウザでのテストが可能です。
コード品質をチェックしよう
# ESLintでコードチェック
npm run lint
# ESLintで自動修正
npm run lint -- --fix
# 特定のファイルをチェック
npx eslint src/components/Button.js
# 特定のディレクトリをチェック
npx eslint src/
# Prettierでコードフォーマット
npx prettier --write src/
# Prettierのチェックのみ
npx prettier --check src/
# TypeScriptの型チェック
npx tsc --noEmit
# TypeScriptのウォッチモード
npx tsc --noEmit --watch
ESLintは、コードの問題を自動で検出してくれるツールです。
--fixオプションで、自動修正も可能です。
Prettierは、コードの見た目を統一してくれるフォーマッターです。
TypeScriptの型チェックも、tsc --noEmitで実行できますよ。
セキュリティ監査を行おう
# セキュリティ脆弱性の監査
npm audit
# 自動修正可能な脆弱性を修正
npm audit fix
# 強制的な修正（破壊的変更を含む可能性）
npm audit fix --force
# 監査レポートの詳細表示
npm audit --json
# 特定の脆弱性レベル以上のみ表示
npm audit --audit-level high
# Snykを使用したセキュリティチェック
npx snyk test
npx snyk monitor
npm auditで、セキュリティ脆弱性をチェックできます。
定期的に実行して、安全なアプリを保ちましょう。
npm audit fixで、自動修正可能な脆弱性を修正してくれます。
Snykは、より詳細なセキュリティチェックができるツールです。
パフォーマンス・最適化コマンド
アプリのパフォーマンスを分析・改善するコマンドを学びましょう。
「なんかアプリが重い」と感じた時に役立ちますよ。
バンドルサイズを分析しよう
# webpack-bundle-analyzerでバンドル分析
npm install -D webpack-bundle-analyzer
npx webpack-bundle-analyzer build/static/js/*.js
# Create React Appでのバンドル分析
npm run build
npx source-map-explorer 'build/static/js/*.js'
# Viteでのバンドル分析
npm run build -- --analyze
# rollup-plugin-visualizerを使用
npm install -D rollup-plugin-visualizer
バンドル分析ツールで、ファイルサイズの内訳を視覚的に確認できます。 「どのライブラリが重いのか」がすぐに分かりますよ。
Create React Appならsource-map-explorerが手軽です。
Viteなら--analyzeオプションで分析できます。
依存関係を分析しよう
# 依存関係ツリーの表示
npm ls
# 特定パッケージの依存関係
npm ls react
# 重複パッケージの確認
npm ls --duplicates
# パッケージサイズの分析
npx size-limit
# 依存関係の可視化
npx madge --image graph.svg src/
# 未使用依存関係の検出
npx depcheck
# パッケージの影響範囲分析
npm explain react-dom
npm lsで、依存関係ツリーを確認できます。
重複パッケージがないかチェックすることも大切です。
depcheckで、使用していないパッケージを検出できます。
不要なパッケージは削除して、バンドルサイズを小さくしましょう。
キャッシュを管理しよう
# npmキャッシュの確認
npm cache verify
# キャッシュのクリア
npm cache clean --force
# キャッシュの場所を確認
npm config get cache
# node_modulesとpackage-lock.jsonを削除して再インストール
rm -rf node_modules package-lock.json
npm install
# 高速な再インストール
npm ci
「インストールがおかしい」と感じた時は、キャッシュをクリアしてみましょう。
npm cache clean --forceで、npmキャッシュを削除できます。
npm ciは、package-lock.jsonから高速にインストールするコマンドです。
CI環境や、クリーンなインストールをしたい時に使います。
環境・設定管理コマンド
プロジェクト環境の設定と管理コマンドを覚えましょう。
チーム開発では、環境を統一することが重要です。
Node.jsバージョンを管理しよう
# 現在のNode.jsバージョンを確認
node --version
npm --version
# プロジェクトに必要なNode.jsバージョンを指定
echo "16.18.0" > .nvmrc
# nvmでNode.jsバージョンを切り替え
nvm use
nvm install 18.17.0
nvm use 18.17.0
# プロジェクトのエンジン指定
# package.jsonに追加
{
"engines": {
"node": ">=16.18.0",
"npm": ">=8.0.0"
}
}
Node.jsのバージョン管理は、プロジェクトの安定性に重要です。
.nvmrcファイルで、プロジェクトで使用するバージョンを指定できます。
package.jsonのenginesフィールドで、必要なバージョンを明記しましょう。
チームメンバーが同じ環境で開発できますよ。
環境変数を管理しよう
# 環境変数を指定して実行
NODE_ENV=production npm run build
REACT_APP_API_URL=https://api.example.com npm start
# dotenvファイルの使用
npm install -D dotenv
# 複数環境の管理
npm install -D env-cmd
# 環境別でのスクリプト実行
npx env-cmd -f .env.production npm run build
npx env-cmd -f .env.staging npm start
環境変数を使うことで、開発・ステージング・本番環境を切り替えられます。
Reactでは、REACT_APP_で始まる環境変数がクライアントサイドで使用可能です。
env-cmdを使えば、環境別の設定ファイルを管理できます。
npm設定をカスタマイズしよう
# npm設定の確認
npm config list
# 特定の設定値を確認
npm config get registry
# レジストリの変更
npm config set registry https://registry.npmjs.org/
# プライベートレジストリの設定
npm config set @mycompany:registry https://npm.mycompany.com/
# 認証情報の設定
npm login
npm whoami
# 設定の削除
npm config delete registry
# プロジェクト固有の設定
# .npmrc ファイルに記述
registry=https://registry.npmjs.org/
save-exact=true
npmの設定は、npm configコマンドで管理できます。
プライベートレジストリを使用する場合は、設定が必要です。
.npmrcファイルで、プロジェクト固有の設定も可能です。
チーム全体で同じ設定を共有できますね。
デプロイ・公開コマンドを学ぼう
Reactアプリのデプロイと、npmパッケージの公開コマンドです。
「作ったアプリを公開したい」という時に使います。
静的サイトにデプロイしよう
# Vercelへのデプロイ
npm install -g vercel
vercel --prod
# Netlifyへのデプロイ
npm install -g netlify-cli
netlify deploy --prod --dir=build
# GitHub Pagesへのデプロイ
npm install -D gh-pages
# package.jsonにスクリプト追加
{
"scripts": {
"deploy": "gh-pages -d build"
},
"homepage": "https://username.github.io/repository-name"
}
npm run deploy
# Firebaseへのデプロイ
npm install -g firebase-tools
firebase login
firebase init
firebase deploy
静的サイトのデプロイは、各プラットフォームのCLIツールを使います。 Vercel、Netlify、GitHub Pages、Firebaseなど、選択肢が豊富です。
GitHub Pagesなら、gh-pagesパッケージで簡単にデプロイできますよ。
Dockerでアプリを動かそう
# Dockerfileの例とビルド
# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
# Dockerイメージのビルド
docker build -t my-react-app .
# コンテナの実行
docker run -p 3000:3000 my-react-app
Dockerを使えば、どの環境でも同じようにアプリを動かせます。
npm ci --only=productionで、本番用の依存関係のみインストールします。
コンテナ化することで、デプロイの一貫性が保てますよ。
npmパッケージを公開しよう
# パッケージの公開準備
npm init
npm login
# バージョンの更新
npm version patch # 1.0.0 -> 1.0.1
npm version minor # 1.0.0 -> 1.1.0
npm version major # 1.0.0 -> 2.0.0
# パッケージの公開
npm publish
# スコープ付きパッケージの公開
npm publish --access=public
# ベータ版の公開
npm publish --tag beta
# 公開の取り下げ（24時間以内）
npm unpublish my-package@1.0.0
# パッケージの非推奨化
npm deprecate my-package@1.0.0 "This version has a critical bug"
自作のライブラリをnpmに公開することも可能です。
npm versionでバージョンを更新してから、npm publishで公開します。
セマンティックバージョニングに従って、適切にバージョンを管理しましょう。
トラブルシューティング・メンテナンス
開発中によく遭遇する問題の解決方法です。
「エラーが出て動かない」という時に役立ちますよ。
よくある問題を解決しよう
# 依存関係の競合解決
npm install --legacy-peer-deps
# パッケージロックファイルの再生成
rm package-lock.json
npm install
# node_modulesの完全なクリーンアップ
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
# 権限エラーの解決（macOS/Linux）
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules
# Windows環境での権限問題
npm config set prefix %APPDATA%\
pm
「インストールエラーが出る」「依存関係がおかしい」という時の対処法です。 まずは、node_modulesとpackage-lock.jsonを削除して再インストールしてみましょう。
権限エラーが出る場合は、ファイルの所有者を変更します。 Windowsの場合は、prefixの設定を変更してみてください。
パフォーマンス問題を診断しよう
# インストール時間の計測
time npm install
# 詳細なログ出力
npm install --loglevel verbose
# デバッグ情報の出力
npm install --loglevel silly
# インストール進行状況の表示
npm install --progress
# ネットワーク問題の診断
npm config set registry https://registry.npmjs.org/
npm ping
「インストールが遅い」という時は、ログレベルを上げて詳細を確認しましょう。 ネットワークの問題なら、レジストリの設定を確認してみてください。
セキュリティ問題に対応しよう
# 脆弱性のあるパッケージを特定
npm audit
# 自動修正の実行
npm audit fix
# 手動での修正確認
npm audit fix --dry-run
# 特定の脆弱性を無視（一時的）
npm audit --audit-level moderate
# package-lock.jsonのセキュリティ更新
npm update --depth 9999
セキュリティ脆弱性は、定期的にチェックして対応しましょう。
npm audit fixで自動修正できるものは、積極的に修正してください。
開発環境の健全性をチェックしよう
# システム環境の確認
npm doctor
# npmとNode.jsのバージョン確認
npm version
# グローバルパッケージの一覧と場所
npm list -g --depth=0
npm root -g
# プロジェクトの依存関係の整合性確認
npm ls --depth=0
# 設定の確認
npm config list -l
npm doctorで、npm環境の健全性をチェックできます。
定期的に実行して、環境に問題がないか確認しましょう。
実践的なワークフロー例
実際の開発現場でよく使われるコマンドの組み合わせです。
「どの順番でコマンドを実行すればいいの？」という疑問にお答えします。
新規プロジェクトを始める流れ
# 1. プロジェクト作成
npx create-react-app my-project --template typescript
cd my-project
# 2. 必要なライブラリのインストール
npm install react-router-dom @mui/material @emotion/react @emotion/styled
# 3. 開発用ツールのインストール
npm install -D prettier eslint-config-prettier husky lint-staged
# 4. Git hooksの設定
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
# 5. 開発サーバーの起動
npm start
新規プロジェクトを始める時の基本的な流れです。 プロジェクト作成後、必要なライブラリを追加していきます。
Git hooksの設定で、コミット前に自動でコード品質チェックが実行されます。 チーム開発では、最初に設定しておくと便利ですよ。
日常的な開発作業の流れ
# 朝の作業開始
git pull origin main
npm install # 新しい依存関係がある場合
npm start
# コード品質チェック
npm run lint
npm test -- --coverage
# 新しいライブラリの追加
npm install axios
npm install -D @types/axios # TypeScriptの場合
# ビルドテスト
npm run build
毎日の開発作業で使うコマンドの流れです。 朝一番に、最新のコードと依存関係を更新しましょう。
定期的にテストとビルドを実行して、問題がないか確認します。 新しいライブラリを追加した時は、TypeScriptの型定義も忘れずに。
プロダクション準備の流れ
# 1. 依存関係の最新化
npm outdated
npx ncu -u
npm install
# 2. テストの実行
npm test -- --coverage --watchAll=false
# 3. セキュリティチェック
npm audit
npm audit fix
# 4. ビルドとデプロイ準備
npm run build
npm run test:e2e # E2Eテストがある場合
# 5. デプロイ
npm run deploy
本番リリース前の準備作業です。 依存関係の更新、テスト、セキュリティチェックを順番に実行します。
すべてのチェックが通ったら、ビルドしてデプロイしましょう。
チーム開発での同期方法
# 依存関係の同期（package-lock.jsonを使用）
npm ci
# ローカル環境のクリーンアップ
npm run clean # カスタムスクリプト
rm -rf node_modules package-lock.json
npm install
# 設定ファイルの同期確認
npm run lint:config
npm run test:config
チーム開発では、メンバー全員が同じ環境で作業することが重要です。
npm ciで、package-lock.jsonから確実にインストールしましょう。
環境がおかしくなった時は、クリーンアップして再インストールします。
package.jsonスクリプトをカスタマイズしよう
効率的な開発のためのカスタムスクリプト例です。
「よく使うコマンドを短縮したい」という時に活用してください。
基本的なスクリプト設定
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"lint": "eslint src/ --ext .js,.jsx,.ts,.tsx",
"lint:fix": "eslint src/ --ext .js,.jsx,.ts,.tsx --fix",
"format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
"format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
"type-check": "tsc --noEmit",
"analyze": "npm run build && npx source-map-explorer 'build/static/js/*.js'"
}
}
よく使うコマンドをscriptsに登録しておくと便利です。
npm run lint:fixで、ESLintの自動修正を実行できます。
npm run analyzeで、ビルド後にバンドル分析も自動実行されます。
高度なワークフロースクリプト
{
"scripts": {
"clean": "rm -rf build dist node_modules",
"fresh-install": "npm run clean && npm install",
"pre-commit": "lint-staged",
"pre-push": "npm run type-check && npm run test:coverage && npm run build",
"deploy:staging": "npm run build && firebase deploy --only hosting:staging",
"deploy:production": "npm run build && firebase deploy --only hosting:production",
"docker:build": "docker build -t my-react-app .",
"docker:run": "docker run -p 3000:3000 my-react-app",
"storybook": "start-storybook -p 6006",
"storybook:build": "build-storybook",
"bundle-analyze": "npm run build && npx webpack-bundle-analyzer build/static/js/*.js"
}
}
複数のコマンドを組み合わせたワークフロースクリプトです。
npm run fresh-installで、クリーンアップから再インストールまで一気に実行できます。
環境別のデプロイコマンドも定義しておくと、ミスが減りますよ。
環境別スクリプト設定
{
"scripts": {
"start:dev": "NODE_ENV=development npm start",
"start:staging": "NODE_ENV=staging npm start",
"build:dev": "NODE_ENV=development npm run build",
"build:staging": "NODE_ENV=staging npm run build",
"build:production": "NODE_ENV=production npm run build",
"test:unit": "jest --testPathPattern=unit",
"test:integration": "jest --testPathPattern=integration",
"test:e2e": "cypress run",
"test:e2e:open": "cypress open"
}
}
環境別にスクリプトを分けることで、設定を間違える心配がありません。 テストも種類別に分けて、必要なテストだけ実行できます。
まとめ：npmコマンドで効率的なReact開発を！
お疲れ様でした！ Reactの開発で使用するnpmコマンドについて、詳しく解説してきました。
覚えておきたい基本コマンド
毎日使う重要なコマンドです。
- プロジェクト作成:
npx create-react-app、npm create vite - パッケージ管理:
npm install、npm uninstall、npm update - 開発・ビルド:
npm start、npm run build、npm test - 品質管理:
npm run lint、npm audit、npm outdated
実践のコツ
効率的な開発のためのポイントです。
- package.jsonのscriptsを活用してコマンドを短縮する
- 定期的にセキュリティ監査と依存関係の更新を行う
- 環境変数でビルド設定を管理する
- トラブル時はキャッシュクリアと再インストールを試す
重要なこと
npmコマンドは、React開発の効率と品質を大きく左右します。 基本的なコマンドを覚えることで、開発効率が劇的に向上しますよ。
また、チーム開発では、package.jsonのスクリプト設定を統一することが重要です。 全員が同じコマンドで同じ作業を行えるようにしましょう。
定期的なメンテナンス（依存関係の更新、セキュリティ監査）を習慣化することで、高品質なReactアプリケーションを維持できます。
ぜひ、これらのコマンドを実際のプロジェクトで活用してみてくださいね！