プロジェクトでの開発から手間を取り除きプロセスを加速させるために、さまざまなツールを使うことができます。そのようなツールの多くが、有志の開発者により開発の上、無料で使えるように公開されています。
CSSフレームワークの自作を想像してみてください。独自のデザインシステム、ユーティリティクラス、さまざまな色合い、何千行ものSass（これが最終的にはCSSにコンパイルされる）、多数のカスタムコンポーネント、バグのテスト、そして資金調達（もし他の開発者の力も借りる場合）など、たくさんの時間と費用がかかります。
しかし、開発者が作成・公開する無料のリソースが次から次へと現れ、こうした費用や労力のカットがこれまで以上に簡単になっています。
このページでは、オープンソースのNode.jsパッケージ用のJavaScriptオンラインリポジトリであるnpm（Node package manager）についてご説明します。npmとは何なのか、npmの使い方、パッケージの役割、ローカルやリモートでパッケージとやりとりする方法を扱います。
また、コマンドラインインターフェース（CLI）の使い方、依存関係、スクリプト、package.jsonファイルについても触れたいと思います。
npm（Node Package Manager）とは
npmは「Node package manager」の頭文字をとった名称です。
npmは、Node.jsプロジェクト用パッケージマネージャで、一般に無料で公開されています。npmレジストリで利用可能なプロジェクトが「パッケージ」と呼ばれます。
npmを利用することで、開発中にゼロから自分でコードを書くことなく、他の人が書いたコードを簡単に利用することができます。
npmレジストリには130万以上のパッケージがあり、世界中の1,100万人以上の開発者に利用されています（パッケージについては後半で詳しく説明します）。
なぜnpmが人気なのか
npmが多くの開発者に利用されている理由は以下の通りです。
- アプリストアからモバイルアプリケーションをインストールするのと同じように、ライブラリ、フレームワーク、その他の開発ツールをプロジェクトにインストールできる
- 開発用の安全なNode.jsプロジェクトが構築できる
- ビルド済みの依存関係を使用することで、開発フェーズをスピードアップできる
- npmには、無償で選択できるさまざまなツールがある
- npmコマンドの使用は理解しやすく手間がかからない
次に、npmコマンドラインインターフェースについてご説明します。
npmコマンドラインインターフェース（CLI）
npmのコマンドラインインターフェースは、パッケージのインストールやアンインストール、npmのバージョンの確認、パッケージスクリプトの実行、package.jsonファイルの作成など、様々なコマンドを実行するために使用できます。
この解説を進めながら、コマンドラインインターフェースの使用例をいくつか見ていきましょう。
Windowsコンピュータでは、通常コマンドラインインターフェースをコマンドプロンプトと呼びます。Macではターミナルと呼ばれます。
npmの必須コマンドとエイリアス
このセクションでは、よく使われるnpmコマンドとその機能についてご説明します。
npm install
パッケージをインストールするためのコマンドです。パッケージはグローバルにインストールすることも、ローカルにインストールすることもできます。パッケージをグローバルにインストールすると、コンピュータのどのディレクトリからでもパッケージの機能を利用できるようになります。
一方、パッケージをローカルにインストールした場合、そのパッケージがインストールされたディレクトリでしかその機能を利用することができません。そのため、コンピュータ内の他のフォルダやファイルからパッケージを利用することはできません。
npm uninstall
パッケージをアンインストールするコマンドです。
npm init
initコマンドはプロジェクトを初期化するのに使用します。このコマンドを実行すると、package.jsonファイルが作成されます。
npm initを実行すると、初期化するプロジェクトに関する特定の情報を求められます。この情報には、プロジェクト名、ライセンスタイプ、バージョンなどが含まれます。
自分で情報を提供するプロセスを省略するには、npm init -yコマンドを実行するだけです。
npm update
npmパッケージを最新バージョンに更新するのにこのコマンドを使います。
npm restart
パッケージを再起動します。このコマンドは、特定のプロジェクトを停止して再起動するときに使います。
npm start
必要な時にパッケージを起動するのに使います。
npm stop
パッケージの実行を停止します。
npm version
インストールされているnpmのバージョンを表示します。
npm publish
npmパッケージをnpmレジストリに公開します。主に、自分でパッケージを作成した場合に使用します。
npmのインストール方法
npmをインストールするには、まずコンピュータにNode.jsをインストールする必要があります。そのためには、Node.jsのウェブサイトにアクセスしてダウンロードします。Node.jsの最も安定したバージョンであるLTSバージョンをダウンロードすることをお勧めします。
Node.jsをインストールすると、npmが自動的にインストールされます。
PCにインストールされているnpmのバージョンを確認する方法
Node.jsをインストールしたら、以下のコマンドを実行してNode.jsとnpmのバージョンを確認することができます。
node -v次のコマンドでnpmのバージョンが表示されます。
npm -vnpmパッケージ
このセクションでは、npmパッケージをグローバルおよびローカルにインストール、アンインストールする方法、パッケージを更新する方法、パッケージを一覧表示する方法、パッケージの場所を変更する方法、インストールされているパッケージを検索する方法をご説明します。
まず、npmパッケージとは何か、開発者が使用するパッケージの例をいくつか見ていきます。
Npmパッケージとは
パッケージとは、npmディレクトリに公開されているビルド済みのプロジェクトのことです。パッケージで何ができるかは、パッケージの作成者と貢献者次第です。
npmを使えば、他の開発者が作成した数多くのプロジェクトをそのまま利用できます。自分でCSSフレームワークを作ることを想像してみてください。これにはかなりの時間がかかります。そんな特に便利なのがパッケージです。npmレジストリに公開されていることで、それを簡単に利用し開発プロセスを加速させることができます。
このようなnpmパッケージの一例として、ウェブページ構築のユーティリティファーストCSSフレームワークであるTailwind CSSがあります。その他にも、React、Chalk、Gulp、Bootstrap、Express、Vue.jsなど、数多くの定番npmパッケージが存在します。
npmパッケージをグローバルにインストールする方法
npmパッケージをグローバルにインストールすると、コンピュータのどのディレクトリからでもアクセスできるようになります。
このセクションでは、ターミナルでnpmコマンドを実行してパッケージをグローバルにインストールする実践的な方法をご紹介します。
パッケージをグローバルにインストールするには、次のコマンドを使用します。
npm install -g [package name]コマンドの-gにより、npm CLIでパッケージをグローバルにインストールしています。
以下に例を示します。
npm install -g typescript上のコマンドを実行すると、TypeScriptがグローバルにインストールされます。インストール後は、どのディレクトリでもTypeScriptを利用できます。
npmパッケージをローカルにインストールする方法
前のセクションでは、npmパッケージをグローバルにインストールする方法をご紹介しました。今度はローカルにインストールする方法について見てみましょう。
パッケージをローカルにインストールすると、そのパッケージの機能が特定のディレクトリでのみ使用可能になります。この方法を選択した場合は、パッケージをインストールしたいディレクトリに移動し、ターミナルで次のコマンドを実行してください。
npm install [package name]以下が具体的な例です。
npm install typescript上のコマンドによりTypeScriptがローカルにインストールされます。インストール後に、対象のカレントディレクトリでのみ機能します。
グローバルにインストールしたnpmパッケージをアンインストールする方法
npmパッケージが不要になったら、アンインストールすることでコンピュータから削除することができます。
グローバルにインストールしたパッケージをアンインストールするには、次のように操作を行います。
npm uninstall -g [package name]具体的な例は以下の通りです。
npm uninstall -g typescript上の例のコマンドを実行すると、TypeScriptパッケージがコンピュータから削除されます。
ローカルにインストールしたnpmパッケージをアンインストールする方法
ローカルにインストールしたnpmパッケージをアンインストールする方法は前の例と似ています。今回は-gを使わないことになります。
以下がコマンドです。
npm uninstall [package name]実際の例が以下の通りです。
npm uninstall typescriptnpmとパッケージのアップデート方法
npmとパッケージを最新の状態に保つことで、バグやセキュリティ上の欠陥をコードから取り除くことが可能です。
npmを最新のバージョンにするには、以下のコマンドを使います。
npm install npm@latest - gこれにより、コンピュータ上でグローバルにnpmが更新できます。
パッケージの作成者は、新機能を導入したりバグを修正したりすると、npmレジストリ上でパッケージの更新を行います。新しい機能を利用するためには、利用者が自分でパッケージを更新する必要があります。
そのためのコマンドが以下の通りです。
npm update [package name]そして具体的な例は、以下のようになります。
npm update typescript上のコマンドでTypeScriptが最新のバージョンになります。
さらに、これまでのセクションと同様に、-gを使用してグローバルを対象にしてパッケージを更新することもできます。
npm update -g typescriptnpmパッケージの保存場所を変更する方法
コンピュータの管理者権限を持っていないユーザーによっては、npmコマンドを実行するとエラーメッセージが返されることがあります。これの解決策として、新しい場所/ディレクトリを指定し、パッケージのデフォルトのインストール場所を変更することができます。
以下がそのコマンドです。
npm config set prefix [new directory path]パッケージのインストール先としてパスを設定すると、すべてのnpmパッケージがデフォルトでこの場所に保存されます。
グローバルにインストールされているnpmパッケージを一覧表示する方法
コンピュータにインストールされているパッケージの数を調べるにはどうすればいいかというと、npmにはパッケージの一覧を表示するコマンドがあります。
以下のコマンドを入力すると、対象のデバイスにおいてグローバルにインストールされているすべてのパッケージが一覧表示されます。
npm list -g上記のコマンドを実行すると、コンピュータ上にインストールされているパッケージの一覧が表示されます。
次のセクションでは、ローカルにインストールしたnpmパッケージを一覧表示する方法をご紹介します。
ローカルにインストールされているnpmパッケージを一覧表示する方法
前のセクションと同様に、ローカルにインストールしたnpmパッケージも一覧表示できます。
ローカルにインストールされているパッケージの一覧を表示するには、ターミナルで以下のコマンドを実行します。
npm list特定のプロジェクトにインストールされているパッケージをすべて表示するには、該当するプロジェクトのディレクトリで上記のコマンドを実行する必要があります。
npmパッケージの検索方法
npmレジストリには130万以上のパッケージがあり、その機能はさまざまです。そんな中から、個別の状況にあったパッケージを見つけ出す必要があります。
特定の開発スタックで作業するときに使う必要のあるパッケージもあります。例えば、Reactでよく使われるパッケージはReact Routerで、これがReactにおけるルーティングの処理に使われます。
同じように、技術スタック次第で有用なパッケージは異なります。
npmウェブサイトの検索バーを使って探すのが便利です。ほとんどのパッケージには、インストール手順と機能の詳細が付属しています。定期的にメンテナンスされているパッケージ、つまりコミュニティや開発者の活動が活発で、テスト、修正、改良されているパッケージを探しましょう。
その他のnpmファイルとフォルダ
npm パッケージがどのようなもので、どのように使われるかを理解したところで、npmベースのプロジェクトに関係するその他のファイルとフォルダについてもご紹介します。
package.jsonファイル
package.jsonファイルを使って、プロジェクトにインストールされているすべてのパッケージを効率的に管理することができます。新規プロジェクト開始の際には、まずこのファイルを作成することが肝要です。
このファイルには、プロジェクトの名前、バージョン、スクリプト、依存関係など、プロジェクトに関する情報が格納されます。
プロジェクトのターミナルで、npm initまたはnpm init -yコマンドを実行することで作成できます。それから、（-yを指定しない場合には）ファイル作成に際してシステムが尋ねる質問に答えてください。
package.jsonファイルが生成されると、インストールされているすべてのパッケージが、その名前とバージョンとともにファイルに格納されます。
package.jsonファイルのもうひとつの重要な使い道が、GitHubでのプロジェクトの複製です。開発者がプロジェクトをリポジトリにプッシュするとき、node_modulesフォルダ（パッケージとその依存関係が格納されている）を除外することがよくあります。
そのようなケースで、リポジトリを複製した後に自分自身のフォルダを生成するには、プロジェクトのターミナルでnpm installコマンドを実行します。これにより、npmがリポジトリのpackage.jsonファイルを調べ、そこで指定されているすべてのパッケージをインストールしてくれます。
インストールが完了したら、GitHubへのプッシュ前にそのプロジェクトにインストールされていたパッケージをすべて使うことができます。
npm依存関係とは
パッケージをインストールすると、node_modulesフォルダが作成され、そこに他のフォルダ、つまり各パッケージのフォルダやサブフォルダが表示されます。インストールしていないのに、なぜ他のフォルダがあるのか不思議に思うかもしれません。
package.jsonファイルでは、パッケージは「dependencies」下に位置します。
node_modulesフォルダに作成される他のフォルダは、インストールしたパッケージが機能するために依存するその他のパッケージです。インストールしたパッケージのpackage.jsonファイルを見れば依存関係を簡単に確認できます。
npm-scriptsとは
npm-scriptsは、特定のタスクを自動化するためにpackage.jsonファイルで定義する一種のカスタムスクリプトです。独自のスクリプトを定義して、CSSコードの圧縮、変更に際してのサーバーの再起動、本番用のプロジェクトのビルドなど、様々なタスクを自動化することができます。
package.jsonファイルを作成すると、通常、testスクリプトが一緒に生成されます。このスクリプトを使って、サーバーの起動、CSSの整理、本番用のコードのバンドルなど、さまざまな作業を実行可能です。
このようなスクリプトの例としてReactのnpm run startがあります。これを使うことで、localhost:3000で開発サーバーを起動できます。
上記スクリプトのように、次の構造で他のスクリプトを実行することもできます。
npm run [script-name]まとめ
何年もの間、npmはNode.jsベースのウェブアプリケーションを開発する上で必要不可欠なものとして重宝されてきました。npmを使えば、他の開発者がデプロイした何百万ものプロジェクトの中から選んで、すぐさま自分の用途に活用できます。
CSSフレームワーク、ファイルバンドラー、JavaScriptフレームワーク、バックエンドツールなど、多種多様なnpmパッケージがあります。これらプロジェクトは安全に利用でき、その多くは定期的にメンテナンス・更新されています。
npmのおかげで、ウェブアプリの開発は今まで以上に簡単になりました。他の開発者のパッケージをインストールするだけでコーディングの手間を省くことができます。
開発者として、独自のnpmパッケージを作成し、他の開発者が使えるようにnpmレジストリに公開することもできます。WordPressコミュニティのユーザーがプラットフォームの改善に貢献するのと同じように、Node.jsコミュニティのメンバーもお互いを助け合っています。
あなたのおすすめする開発を助けるツールはありますか？コメント欄でお聞かせください。
