【Intellij IDEA(Ultimate)】npmなどのパッケージマネージャーをインストール/アップデートする

## 前書き
`Intellij IDEA(Ultimate)`では、`npm`のようなパッケージマネージャーをIDEから個別にインストールすることが可能です。
`IDEA`経由でパッケージマネージャーをインストールする場合、以下のようなメリットを得ることができます。

- ローカルの開発環境とは別に、各種パッケージマネージャー（バージョン違い含む）を、プロジェクトや`Run/Debug Configurations`で個別適用することができる
  - 切り替えも容易にできる
- `Windows`や`mac`、`Ubuntu`といった各種プラットフォームを跨いでも、同じような操作感で環境構築できる

この記事では、`IDEA`でパッケージマネージャのインストール、`Run/Debug Configurations`での設定、及びアップデートする方法についてまとめます。
使用している`IDEA`のバージョンは`2021.1.3`で、`Windows`環境です（環境ごとの差異はそれ程無いと思います）。

### 補足: この記事の前提
この記事では、ローカルで`Node`が実行できる状態（`PATH`は通ってなくてもOK）を前提に書きます。
理由は、自分の環境の`IDEA`から`Node`をインストールする方法を見つけられなかったためです。

ドキュメントを見る限りインストールできそうに見え、また実際に自分の環境でも`IDEA`経由でインストールした形跡が有るのですが、少なくとも自分の環境ではドキュメント通りに進んでも`Node`のインストールメニューにはたどり着けないようでした。

https://pleiades.io/help/idea/developing-node-js-applications.html#ws_node_configure_local_node_interpreter

## やり方
### パッケージマネージャのインストール
パッケージマネージャーのインストール手順はざっくり以下の通りです。

1. `Settings`から`npm`で探して、`Node.js and NPM`を選ぶ
2. `Node interpreter`を設定する
3. `Package manager`を設定する

以下、それぞれの項目について説明します。

#### 1. Settingsからnpmで探して、Node.js and NPMを選ぶ
まず、`Settings`を開き、左上の検索欄に`npm`と入力します。
すると以下のように、`Languages & Frameworks` > `Node.js and NPM`が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/7d16de95-afa6-3d4f-22eb-8460771fb927.png)

自分の環境では`Node`に`PATH`を通していないため`Node interpreter`が`No executable found in...`となっていますが、適切に`PATH`が通っていればこの設定の必要は有りません。

#### 2. Node interpreterを設定する
前項にて`PATH`が通っており、そこから変更が不要な場合、この項は飛ばして大丈夫です。

`Node interpreter`の右に有る`...`をクリックすると、`Node.js Interpreters`というウィンドウが開きます。
このウィンドウには、インストールされている`Node`の内`IDEA`が捕捉している内容が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/f5ee8837-b936-d7b2-28b3-302d2ac5b2c6.png)

ここに表示されていないものを使いたい場合、左上の`+`ボタンから追加できます。
既にインストールされているものが有る場合、`Local`から追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/aa3e0b17-e643-ef14-91f4-c6d445b94a60.png)

この選択肢の詳細はドキュメントにまとまっています。

https://pleiades.io/help/idea/developing-node-js-applications.html#ws_node_configure_local_node_interpreter

#### 3. Package managerを設定する
`Package manager`には、選択した`Node`に合わせたバージョンの`npm`がデフォルトで設定されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/a30f50cf-32a5-4bd3-e781-0cf48b16ec2a.png)

`Package manager`は、ローカルにインストールされているものや、プロジェクトに個別で導入されたものの中から選択することができます。
画像の通り、`yarn`や`pnpm`といった内容も選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/cff5f805-9d13-3edd-ab36-5df53d4a21bf.png)

`Package manager`の文言の下の`+`ボタンを押すと`Available Packages`というウィンドウが開き、そこから`Package`を追加することもできます。
ここでは、バージョンやオプションの指定が可能です。

画像では`yarn`を検索・選択しています。
ここで`Install Package`を実行すればインストールが完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/a5ce6bd7-4835-da5f-0fad-33f1ad97e05a.png)

ここでインストールしたパッケージマネージャーは、前述した通り、`Package manager`として利用できるようになります。

### Run/Debug Configurationsの設定
ここまでで確認した内容はプロジェクトのデフォルト設定に関する内容です。
個別に変えたい部分が有る場合、`Run/Debug Configurations`から設定することができます。

具体的には、以下の画像の`Node interpreter`/`Package manager`の項目がそれです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/2d95bb7a-805e-c171-5aa9-934e8fdd7084.png)

`Run/Debug Configurations`での`npm`の具体的な設定方法は以下の記事で紹介しているため、ここでは触れません。

https://qiita.com/wrongwrong/items/a9b3d564e76c7f425159

### パッケージマネージャのアップデート
先ほど紹介した`Available Packages`からは、バージョンの変更（= アップデート）を行うことも可能です。
具体的には、アップデートしたい`Package manager`を選択して`Available Packages`を開き、右下の`Specify version`にチェックを付け、インストールしたいバージョンを選んだ上で、左下の`Install Package`を実行すればできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/da955d9f-c26e-3597-6186-22848b8bdb5d.png)