WebDesigner's Memorandumウェブデザイナーの備忘録

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

ndm

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

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

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

ndmのインストール

ndm(npm desktop manager)のサイトからアプリのインストールが可能です。

npm desktop manager

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

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

プロジェクトの追加

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

Current現在インストールされているバージョン
Wantedpackage.jsonに記載された最新バージョン
Latestパッケージの最新バージョン

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

ndmでパッケージの追加

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

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

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

gulp-sassのインストール

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

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

ndmでアップデートを行う

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね