🐗

npm&npxと一緒に覚えたい！Web開発で使うターミナルコマンドの基本

に公開
Node.js
npm
npx
idea

はじめに

フロントエンド開発を始めたばかりの頃、「npmって何？」「npxと何が違うの？」「インストールってどこにされてるの？」と混乱した方も多いのではないでしょうか。

実は、npmやnpxのコマンドは、一度理解してしまえばシンプルですが、体系的に学ぶ機会が少ないのも事実。

この記事では、初心者がつまずきやすいポイントを丁寧に解説しつつ、実用Tipsまでカバーします。

ターミナル操作の基本

npmやnpxのコマンドは、「ターミナル」や「コマンドプロンプト」という黒い画面で実行します。
でも、いざ開いてみると「ここに何を打てばいいの？」と戸惑う方も多いのではないでしょうか。

まずは、npmコマンドを使う前提となるターミナル操作の基本を確認しましょう。
ここで紹介するコマンドは、OS（macOS、Windows、Linux）を問わず、どの環境でもほぼ共通して使えるので安心です。

コマンド 用途
pwd（macOS/Linux）
cd（Windows）		 今、どのディレクトリにいるかを確認します。
pwdはprint working directoryの略です。
cd <dir> <dir>で指定した名前のディレクトリに移動します。
cdはchange directoryの略です。
TABキーを押すとディレクトリ名を補完できます。

使用例
cd .. ひとつ上の階層に戻る
cd ~ ホームディレクトリに戻る
cd - 直前にいたディレクトリに戻る
ls 現在いるディレクトリの中にあるファイルやディレクトリの一覧を表示します。
lsはlistの略です。

オプション
-l: 詳細な情報（パーミッション、サイズ、更新日時など）を表示します。
-a: 隠しファイル（.で始まるファイル）も含めて表示します。
例: ls -la
mkdir <dir> 新しいディレクトリを作成します。
mkdirはmake directoryの略です。
rm <file> ファイルを削除します。
rm -rf <dir> ディレクトリごと強制的に削除します。
code . VS Codeを現在のディレクトリで開きます。（VS CodeのCLIが必要）
clear
Ctrl + L 		ターミナルのログをキレイにします。
Ctrl + C 実行中のプロセスを強制終了（無限ループやサーバー停止など）。

プロジェクトの準備

npmを使った開発では、まず「プロジェクトの土台」を整える作業から始まります。
それがnpm initであり、package.jsonです。

では実際に、どうやってプロジェクトを準備していくのか、順を追って見ていきましょう。

1. プロジェクトの初期化

プロジェクトのメタデータ（名前、バージョン、依存関係など）を定義するpackage.jsonファイルを対話式に作成します。Node.jsやnpmを使った開発をする場合は、特別な理由がない限り、プロジェクトの最初にnpm initを実行しておくのが一般的かつ推奨される方法です。

CLI
npm init

対話式の質問をスキップして、デフォルト値で一気に作成したい場合は、--yesまたは-yオプションをつけて、npm init -yと入力します。プロジェクトを素早くセットアップしたい場合や、一時的なプロジェクトで細かな設定が不要な場合に非常に便利です。

2. パッケージのインストール

プロジェクトに必要なライブラリやツールをインストールするコマンドです。指定したパッケージをプロジェクトにインストールします。package.jsonファイルの dependenciesに記録されます。

CLI
npm install <パッケージ名>

一度に複数のパッケージをインストールしたい場合は、スペースで区切って指定します。

CLI
npm install react react-dom

プロジェクトの全依存関係を一括インストールしたい場合は、パッケージ名を省略します。

CLI
npm install

npm installには、インストールするパッケージの種類を指定するための重要なオプションがあります。実務では、依存関係の管理を効率化し、開発環境を安定させることが重要です。ここでは、そのために特に役立つオプションを3つピックアップしました。

オプション ショートハンド 用途
--save -S 本番環境でも使用するパッケージをインストールします。
デフォルトでこの設定になります。
package.jsonのdependenciesに記録されます。
--save-dev -D 開発環境でのみ使用するパッケージをインストールします。
ESLintやWebpackなどビルドツールが該当します。
package.jsonのdevDependenciesに記録されます。
--global -g 特定のプロジェクトではなく、システム全体で使えるようにパッケージをインストールする際に使います。
パッケージはnode_modulesディレクトリではなく、OSのユーザーディレクトリなどにインストールされます。
create-react-appやts-nodeのように、一度インストールすれば複数のプロジェクトで使えるツールは、グローバルにインストールしておくと便利です。

パッケージの管理

1. パッケージのアンインストール

不要になったパッケージを削除するコマンドです。指定したパッケージをnode_modulesディレクトリから削除し、package.jsonファイルからもその依存関係を削除します。

CLI
npm uninstall <パッケージ名>

開発依存パッケージを削除したい場合は、-Dオプションを使います。

CLI
npm uninstall eslint -D

2. パッケージの更新

インストール済みのパッケージを最新バージョンに更新するコマンドです。

CLI
npm update <パッケージ名>

すべてのパッケージを更新したい場合は、パッケージ名を省略します。

CLI
npm update

3. npxコマンドの活用

node_modulesにインストールされているパッケージの実行ファイルを探して実行したり、一時的にパッケージをダウンロードして実行したりします。create-react-appのように、一度だけ使いたいコマンドを実行するのに最適です。

CLI
npx create-react-app my-app

このコマンドを実行すると、ローカルにcreate-react-appがインストールされていなくても、一時的にダウンロードしてmy-appというプロジェクトを作成してくれます。

よく使うnpm&npxコマンド早見表

ここまで、npmやnpxを使ったプロジェクトの初期化、パッケージの追加・削除・実行方法について解説してきました。

最後に、今回登場したコマンドを一覧表として整理しておきます。
実務中に「このコマンドなんだっけ？」と迷ったときに、ぜひ活用してください！

コマンド ショートハンド 用途
npm init プロジェクトを初期化します。
npm install npm i 依存関係を一括インストールします。
npm install <pkg> npm i <pkg> パッケージをインストールします。
npm install <pkg> --save-dev npm i <pkg> -D 開発用パッケージをインストールします。
npm uninstall <pkg> パッケージをアンインストールします。
npm update <pkg> パッケージを更新します。
npm run <script> package.jsonのscriptsに定義したコマンドを実行します。
例：npm run dev
npm run build 本番ビルド（ReactやVueなどで利用）。
npm start npm run startのエイリアス。開発開始用コマンドに使われることが多い。
npm test npm run testのエイリアス。テストを実行。
npm list 現在インストールされているパッケージの一覧を表示。
npx <pkg> パッケージを実行します。

おわりに

npmやnpxは、最初は複雑に見えても、使えば使うほど便利さを実感できるツールです。
特にチーム開発や本番環境を意識した開発では、依存関係の理解やスクリプト定義の理解が大きな差になります。

この記事が、あなたのフロントエンド開発の第一歩を支える道しるべになれば嬉しいです。

Discussion