# npmをGUIで管理するアプリケーション「ndm – npm desktop manager」

URL: https://webrandum.net/ndm/
公開日: 2018-08-21
更新日: 2019-01-01
カテゴリー: 作業効率化
タグ: Macアプリ, ndm, npm
出典: Webrandum（著者: サイトウ マサカズ）

node.jsを使用して開発する際になくてはならないのが「npm」です。パッケージ管理を担ってくれるのですが、ターミナル（CUI）を今まで使ったことのない人がいきなりnpmを使ってパッケージを管理するというのはハードルが高いかもしれません。

そうでない人からしても、今インストールしているパッケージとそのバージョンがGUIで一覧になって見れたら非常に管理しやすいですよね。今回はそんな願いを実現するnpmのGUI管理アプリ「ndm – npm desktop manager」をご紹介します。

下の画像がndmのメイン画面です。グローバルにインストールされているパッケージが一覧になっていますし、どんなパッケージが入っているのかひと目で分かる上にバージョンもそれぞれ表示されていて非常に見やすいですよね。

![](https://webrandum.net/wp/wp-content/uploads/2018/08/ndm_main-1.png)

## ndmのインストール

[ndm（npm desktop manager）](https://720kb.github.io/ndm/)のサイトからアプリのインストールが可能です。

![npm desktop manager](https://webrandum.net/wp/wp-content/uploads/2018/08/ndm.jpg)

アプリのインストールが完了したら起ち上げてみましょう。

最初はグローバルにインストールされてあるパッケージのみ表示されていますが、「add project」からローカルのフォルダを選択（もしくはドラッグ&ドロップ）すると、そのフォルダにローカルでインストールされたパッケージが一覧として表示されます。

今回はgulpをインストールしたsampleフォルダを用意し、追加してみました。

![プロジェクトの追加](https://webrandum.net/wp/wp-content/uploads/2018/08/ndm_add.png)

きちんとgulpが認識されていますね。ちなみにパッケージ名の隣に書いてある列ですが、それぞれ下記のような意味があります。

| Current | 現在インストールされているバージョン |
| --- | --- |

| Wanted | package.jsonに記載された最新バージョン |
| --- | --- |

| Latest | パッケージの最新バージョン |
| --- | --- |

更に詳細な情報に関してはパッケージ一覧の下に表示されます。

## ndmでパッケージの追加

パッケージの追加をndmから行う事も可能です。画面上にある「Add package」からパッケージ名を入力すると、候補が表示され「Install」をクリックするとインストールされます。

今回はgulpでsassをコンパイルするための「gulp-sass」をインストールします。

![パッケージのインストール](https://webrandum.net/wp/wp-content/uploads/2018/08/ndm_package_install.png)

Terminalと比べると、インストールの進行具合が分かりにくいため少し不安になりますが、暫く待つとインストールが完了します。

![gulp-sassのインストール](https://webrandum.net/wp/wp-content/uploads/2018/08/ndm_gulp-sass.png)

## ndmでパッケージのアップデート

ndmでおそらく最も便利なのがパッケージのアップデートです。

アップデートしたいパッケージを選択して「Update」ボタンをクリックするだけでアップデート出来るのと、npm自体のアップデートに関しては左下の「Update npm」ボタンをクリックでアップデート出来ます（npmが最新版の場合は表示されません）。

![ndmでアップデートを行う](https://webrandum.net/wp/wp-content/uploads/2018/08/ndm_update.png)