nvmとnpmとnpxの後悔しない使い方　～小学６年娘に聞かれたので説明した～

2024年12月10日 00:24

こんにちは。
いつもお読みいただき、ありがとうございます。

我が家には小学校６年の娘がおりますが、習慣化するということを楽しんでもらいたいと思っておりまして。

家庭内で毎日やろう！といっていること。
娘がやってみたいこと。
そして、頑張ったことの証を私や妻に見せつけて、より良いプレゼントをもらうネタとするため。。。

Webアプリを作成しています。

そんなWebアプリ作成ときに、使い勝手を娘に聞いてみたくて開発PCで操作してもらっていたのですが、

娘からの「黒い画面に入力しているnpm とか npxとかってなに？」と質問があったので、私の理解棚卸と伝え方強化のために、説明した内容を記録として残しておこうと思います。

何を説明したのか？

我が家で利用する、習慣化を楽しむWebアプリ「グットデイ☆スター」はReactという言語で開発しています。

このReactの開発をするときに、よく利用するコマンドにnpmやnpxというコマンドがありまして、、、、
このコマンドのことをプログラミング未経験の小学生に説明してみました。

React開発でよく使うツールですが、それぞれ役割があります。

nvm（Node Version Manager）
- Node.js のバージョンを管理する道具です。
- 古いプロジェクトでは古いNode.js、新しいプロジェクトでは最新のNode.jsを使いたいときに便利！
- 例：nvm install --lts で最新のLTS版（安定版）をインストール。
npm（Node Package Manager）
- Node.jsに付属している道具で、ライブラリ（パッケージ）の管理をする。
- 例：npm install react でReactライブラリをインストール。
npx
- npmに含まれる道具で、一時的にコマンドを実行する。
- 例：npx create-react-app myapp は、Reactアプリを作るときのコマンド。

npmでパッケージをインストールするときに「-g」をつけるかどうかで、インストールする場所が変わります。

-g（グローバル）をつける場合：
- PC全体で使いたいツールをインストールするとき。
- 例：npm install -g create-react-app
  → どのプロジェクトでも create-react-app コマンドが使える。
-g をつけない場合：
- プロジェクトごとに特化したライブラリをインストールするとき。
- 例：npm install react
  → そのプロジェクト専用でReactが使える。

PCを借りてReact開発をしているとき、「PCを汚したくない！」という気持ち、すごく大事だね！
以下の方法で、環境を綺麗に保ちながら開発できるよ。

nvmを使う
- Node.jsのバージョン管理ができるので、PCに無駄なものを残さず、複数のバージョンを切り替えられる。
- 例：nvm use 18 で特定のバージョンだけを使う。
ローカル（プロジェクトフォルダ内）で管理
- グローバルインストール（-g）を控え、必要なライブラリはプロジェクトフォルダ内にインストールする。
- こうすることで、PC全体に影響を与えずに開発できる。
環境変数や設定ファイルも分離
- Firebaseのキーや秘密情報は .env ファイルに保存し、プロジェクトフォルダ外に漏れないようにする。

新しいPCをもらったとき、今借りているPCと同じ環境でReact開発を続ける方法は以下の通り！

プロジェクトをコピーする
- src/, public/, package.json など、必要なファイルだけコピー。
- node_modules は容量が大きいのでコピーしない！
新しいPCでセットアップ
- nvmをインストールしてNode.jsを準備。
- コピーしたプロジェクトフォルダで以下を実行

npm install
npm start

将来、自分専用のPCを買ってもらったときには以下をやっておこう！

こんな感じの内容を、表現的には「家」や「棚」などの身近にある言葉で説明してみました。

娘の感想は、、、、

ふ～～ん。そうなんだ～～。
私、好きな色はブラウンとオレンジとブルーだから。
あと、TWICE推しだから。
今度のプレゼントよろしく～～

小学生も高学年になると、もう女性ですね。
つい甘くなってしまいそうです。

よろしければサポートお願いします！いただいたサポートはクリエイターとしての活動費に使わせていただきます！