先生と生徒の会話形式で理解しよう

生徒

「Reactでアプリを作ったんですが、動かし方がよくわかりません…」

先生

「Reactでは『npmコマンド』という命令文を使って、アプリを動かしたりビルドしたりするんですよ。」

生徒

「npmってなんですか？どうやって使うんですか？」

先生

「それではReact開発でよく使うnpmコマンドについて、やさしく解説していきましょう！」

1. npmとは？React開発に欠かせない道具

npm（エヌピーエム）とは「Node Package Manager（ノードパッケージマネージャー）」の略で、ReactをはじめとしたJavaScriptのアプリでよく使われる道具です。パッケージとは便利な部品のことです。

Reactではこのnpmを使って「アプリの起動」や「本番用のファイル作成」など、さまざまな操作ができるようになっています。

パソコンにNode.jsをインストールすると、npmも一緒に使えるようになります。

2. npm start｜Reactアプリを起動する

npm startは、Reactアプリをパソコンのブラウザで動かすときに使うコマンドです。


npm start

このコマンドを実行すると、開発用サーバーが立ち上がり、自動でブラウザが開いてReactの画面が表示されます。

（画面にReactアプリのトップページが表示され、編集すると自動で更新されます）

npm run buildは、Reactアプリをインターネットで公開するためのファイルをまとめて作るコマンドです。


npm run build

これを実行すると、buildというフォルダが作られ、そこに本番用の軽くて速いHTMLやJavaScriptのファイルが生成されます。GitHub PagesやNetlifyでの公開に使えます。

npm install（略してnpm i）は、Reactアプリを動かすのに必要な部品（パッケージ）をダウンロードしてくれるコマンドです。


npm install

例えば、GitHubからReactのプロジェクトをダウンロードした場合、まずこのコマンドを実行してパッケージをそろえないと、アプリが動きません。

npm run ejectは、create-react-appで隠されている設定ファイルをすべて外に出すコマンドです。


npm run eject

ただし、一度ejectすると元に戻せません。設定を細かくいじりたい上級者向けのコマンドなので、初心者は使わなくても問題ありません。

npm audit fixは、使っているパッケージに危ない問題（セキュリティホール）がある場合、自動で修正してくれるコマンドです。


npm audit fix

Reactアプリを長く使っていると古いパッケージが問題になることがあります。そのときはこのコマンドでチェック＆修正できます。

npm outdatedは、今使っているパッケージが最新かどうかを調べるコマンドです。


npm outdated

古いパッケージをそのまま使い続けると、不具合の原因になることがあります。最新の状態に保つようにしましょう。

npm updateは、古くなったパッケージを最新バージョンにアップデートするためのコマンドです。


npm update

これでReactアプリに使われている部品を最新の状態に保つことができます。ただし、大きくバージョンが変わると動作に影響がある場合もあるので注意が必要です。