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

node.jsを使用して開発する際になくてはならないのが「npm」です。パッケージ管理を担ってくれるのですが、ターミナル(CUI)を今まで使ったことのない人がいきなりnpmを使ってパッケージを管理するというのはハードルが高いかもしれません。
そうでない人からしても、今インストールしているパッケージとそのバージョンがGUIで一覧になって見れたら非常に管理しやすいですよね。今回はそんな願いを実現するnpmのGUI管理アプリ「ndm – npm desktop manager」をご紹介します。
下の画像がndmのメイン画面です。グローバルにインストールされているパッケージが一覧になっていますし、どんなパッケージが入っているのかひと目で分かる上にバージョンもそれぞれ表示されていて非常に見やすいですよね。

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

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

きちんとgulpが認識されていますね。ちなみにパッケージ名の隣に書いてある列ですが、それぞれ下記のような意味があります。
| Current | 現在インストールされているバージョン |
|---|---|
| Wanted | package.jsonに記載された最新バージョン |
| Latest | パッケージの最新バージョン |
更に詳細な情報に関してはパッケージ一覧の下に表示されます。
ndmでパッケージの追加
パッケージの追加をndmから行う事も可能です。画面上にある「Add package」からパッケージ名を入力すると、候補が表示され「Install」をクリックするとインストールされます。
今回はgulpでsassをコンパイルするための「gulp-sass」をインストールします。

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

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


Gmailでよく使う文章をテンプレートとして保存・使用する方法
Karabiner-Elementsでcaps lockで修飾キー全押し、caps lock + 修飾キーで押したキー以外の修飾キーを押す方法(reverseキー)
iTerm2終了時に表示される確認ダイアログを非表示にする
ATOKで言葉の意味を確かめる「電子辞典検索」タブの設定項目
拡張機能を使わずにサイト全体のスクリーンショットを撮影する方法
ランチャーアプリのAlfred3が便利だったのでPowerPackを購入しました!!これで快適なランチャー生活を
ATOKで登録した単語の品詞を、あとから一括で変更する方法
1Passwordのアカウントを持っていない人にもログイン情報を共有する方法
FontExplorer X Proのアプリケーションセット機能で、アプリを起動したタイミングで自動的にフォントの有効化を行う方法
Path Finderで選択したファイルを特定アプリケーションで開く方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOSのシステム環境設定「一般(General)」の設定見直し
PS Auto Sitemapを使って自分のブログのサイトマップを作成する
Visual Studio CodeでMovable TypeのMTMLファイルを開く拡張機能「Movable Type Markup Language Syntax」
zshのMacターミナルの「%」記号前表示をカスタマイズする方法
Hazelで「ゴミ箱」の中身を空にする作業を自動化してしまう
スクロールしてもテーブルヘッダーが追尾するテーブルの作り方
Figmaの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
Macでアプリごとに音量を調節できるアプリ「Background Music」