Reactを使うために触れているNode.jsとnpm。
「なんとなく使えてるけど、何者なのかはよく分かってない」という状態だったので、
改めて整理してみます。
Node.jsとは？
「JavaScriptをブラウザ以外（サーバーやローカル）でも実行できるようにした実行環境」 です。
JavaScriptはもともとブラウザ専用の言語でしたが、
Node.jsによってサーバーやローカルPCでもJSを動かせるようになりました。
Reactの開発環境（Webpack/Vite、Next.jsなど）も全部 Node 上で動いています。
npmとは？
「Node.js に付属しているパッケージ管理ツール」です。
役割はとてもシンプル：
・ライブラリをインストールする（npm install）
・バージョンを管理する（package.json）
・スクリプトを実行する（npm run build / npm run devなど）
Reactを使うとき、
npm create vite@latest
npm install react
などを実行しますが、これはぜんぶ npm が必要なファイルを自動で集めて、依存関係を整えてくれています。
Node.jsとnpmはなぜReactの開発に必要なのか？
理由はシンプルで、
Reactはブラウザだけでは動かず、
Node.js と npm を使って「事前に準備」した上で動くライブラリだから。
Reactは「ビルド」や「変換」（JSX→JavaScript）が必要なため、
それを担当するツールが全部 Node で動き、その管理を npm が行います。
補足：npm周りの重要用語
npx
Node Package eXecute（実行）の略。
npm（バージョン5.2以上）をインストールすると自動で付いてくる。
- npm：パッケージの管理ツール
- npx：パッケージの実行を行うツール
npxの利用用途としては、「このライブラリ、どんな動きするのかな？」と試す時など、
わざわざ npm install してゴミを残したくない場合に使うケース等が想定されているようです。
私は今のところReactでアプリ開発する際にnpmしか使用したことがなくて、npxを使った記憶がないです。
package.json
npm が扱う「プロジェクトの設計図」です。
- 依存パッケージ一覧
- プロジェクト名、バージョン
-
npm runで実行できるコマンド - 開発時だけの依存（devDependencies）
Reactプロジェクトを作ると自動生成されます。
一言でまとめると
Node.js：JavaScriptがサーバーやローカルPCでも動くようになった実行環境。
npm：Nodeプロジェクトの依存を管理・実行するツール。
Reactが動くのはこの2つがあるから。
おわりに
Reactのソースを書くことはあっても、土台となるNode.jsやnpmについては実はよくわかってなかったな〜と思い、学び直しました。 同じような疑問を持つ方の参考になれば幸いです。
※WebpackやViteなどの周辺用語については、また別の記事で整理しようと思います。
🍌NanoBanana君による解説漫画
