もう10年以上サイトを作り続けてきたので、HTML, CSSはアクセシビリティ以外はある程度の自信を持ってコーディングできますが、フロントエンド周りはよくわからないことだらけで迷いながら動かしている毎日です。

ちゃんと理解していないから、いくらUdemyやYoutubeのチュートリアルを一緒にやったとしても、数ヶ月後にはすっぱり記憶から消え去ってしまっている始末。

そこで、今年ことはどんなに小さな疑問点でもわからないまま先送りせず、アウトプットしていくことにしました。ここに残しておけば自分の備忘録にもなるし。

今回は、チュートリアルで出てくるnpmとnpxコマンドについてです。

目次（読みたいところへジャンプ！）

npmはわかると思っていたらnpxが出てきて困惑

nodeをインストールすると必ずセットで入っているnpm。
省略しない正式名称は「node package manager」その名の通りnode専用パッケージマネージャーだということは日々このコマンドをたたき続けてきたことでふわっと理解はしてました。

npm（node package manager）

• 開発するプロジェクトで必要なモジュールをインストールしたり、実行したりできる
• インストールされたモジュールはpackage.jsonファイルに記録されている

npm i – D モジュール名	モジュールのインストール
npm uninstall モジュール名	モジュールのアンインストール （-g指定でグローバルでアンインストールする）
npm run モジュール名	モジュールの実行

npx（node package executer）

• プロジェクトで一時的に必要なモジュールがインストールされていなくても実行できる
• 一時的にインストールして実行するため実行後は削除され、開発環境を汚染しない
• グローバルインストールしていないモジュールもパスを通す必要なく使用できる

npm, npxの使い分け

仕事で主に使用するのはnpmの方ですよね。チームで開発環境を統一するために、package.jsonファイルで指定されているモジュールとそのバージョンを共有するために。

一方、チュートリアルやプログラミングの学習時などちょっと試しに使ってみたい時に役立つのがnpxということでした。例えば、

ちょっとReact触ってみたい時（https://ja.react.dev/learn/start-a-new-react-project）

npx create-react-app プロジェクト名

ちょっとNext触ってみたい時（https://nextjs.org/docs/getting-started/installation）

npx create-next-app@latest

npxで実行することで、実行後は自動でアンインストールされるのでゴミがPC内に残らないですし、パスを通す手間も省けるので、お手軽に新しいフレームワークを試せる便利な機能なのですね。やっと理解できました。

では、引き続きReact入門してきます。今見ている動画はこちら。

Shinさんの話し方がすごくわかりやすくてUdemy講座もいくつも購入済です。初心者の方におすすめの講師ですよ。

＞＞＞Udemy Shin Codeさんの講座一覧