Node.jsバージョン管理入門 - nvm/fnmで複数バージョンを使い分ける

1
2
3
4
5
6
7
8

# wingetを使用したインストール
winget install Schniz.fnm

# または Scoopを使用
scoop install fnm

# または Chocolateyを使用
choco install fnm

1
2
3

# プロファイルファイルを開く（存在しない場合は作成）
if (-not (Test-Path $PROFILE)) { New-Item $PROFILE -Force }
notepad $PROFILE

1

fnm env --use-on-cd --shell powershell | Out-String | Invoke-Expression

1
2
3
4
5

# curlを使用したインストール
curl -fsSL https://fnm.vercel.app/install | bash

# または Homebrewを使用（macOS/Linux）
brew install fnm

1

eval "$(fnm env --use-on-cd --shell bash)"

1

eval "$(fnm env --use-on-cd --shell zsh)"

1

fnm env --use-on-cd --shell fish | source

1
2
3
4
5

# Bashの場合
source ~/.bashrc

# Zshの場合
source ~/.zshrc

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 利用可能なNode.jsバージョン一覧を表示
fnm list-remote

# 最新のLTSバージョンをインストール
fnm install --lts

# 特定のバージョンをインストール
fnm install 22
fnm install 20.18.0

# インストール済みバージョン一覧を表示
fnm list

# バージョンを切り替え
fnm use 22

# デフォルトバージョンを設定
fnm default 22

# 現在使用中のバージョンを確認
fnm current
node --version

1
2
3
4
5

# インストールスクリプトを実行
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# または wgetを使用
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

1
2

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

1

source ~/.bashrc  # または ~/.zshrc

1
2

command -v nvm
# nvm と表示されれば成功

1
2
3

# WSLターミナルで実行
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 利用可能なバージョン一覧を表示
nvm ls-remote

# LTSバージョン一覧のみ表示
nvm ls-remote --lts

# 最新のLTSバージョンをインストール
nvm install --lts

# 特定のバージョンをインストール
nvm install 22
nvm install 20.18.0

# インストール済みバージョン一覧を表示
nvm ls

# バージョンを切り替え
nvm use 22

# デフォルトバージョンを設定
nvm alias default 22

# 現在使用中のバージョンを確認
nvm current
node --version

# 特定バージョンでコマンドを実行
nvm exec 20 node --version

# Node.jsをアンインストール
nvm uninstall 18

1
2
3
4
5
6
7
8

# 現在使用中のバージョンを.nvmrcに書き込む
node --version > .nvmrc

# または直接バージョンを指定
echo "22" > .nvmrc

# LTSを指定することも可能
echo "lts/*" > .nvmrc

1

22.12.0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 完全なバージョン指定
22.12.0

# メジャーバージョンのみ（最新のマイナー/パッチを使用）
22

# メジャー.マイナーバージョン
22.12

# LTSの最新バージョン
lts/*

# 特定のLTSコードネーム
lts/jod

# 最新バージョン
node

1
2

# このプロジェクトはNode.js 22を使用します
22

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# place this after nvm initialization!
autoload -U add-zsh-hook

load-nvmrc() {
  local nvmrc_path
  nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version
    nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
      nvm use
    fi
  elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] && [ "$(nvm version)" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc

1
2
3
4

# .nvmrcがあるプロジェクトディレクトリに移動
cd my-project/
# Found '/path/to/my-project/.nvmrc' with version <22>
# Now using node v22.12.0 (npm v10.9.0)

1
2

# .node-versionファイルの作成
echo "22.12.0" > .node-version

1
2
3
4
5
6

# Corepackを有効化（yarn、pnpmのシムを作成）
corepack enable

# 特定のパッケージマネージャーのみ有効化
corepack enable yarn
corepack enable pnpm

1
2
3
4
5

# Yarnが自動的に利用可能になる
yarn --version

# pnpmも同様
pnpm --version

1
2
3
4
5

{
  "name": "my-project",
  "version": "1.0.0",
  "packageManager": "pnpm@9.15.0"
}

1
2
3
4
5

{
  "name": "my-project",
  "version": "1.0.0",
  "packageManager": "yarn@4.6.0"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# 現在のプロジェクトに対してパッケージマネージャーを設定
corepack use pnpm@9.15.0
# package.jsonのpackageManagerフィールドが更新される

# パッケージマネージャーを最新版に更新
corepack up

# 特定バージョンのパッケージマネージャーをグローバルにインストール
corepack install -g pnpm@9.15.0

# キャッシュをクリア
corepack cache clear

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

# プロジェクトディレクトリを作成
mkdir my-new-project
cd my-new-project

# package.jsonを初期化
npm init -y

# pnpmを使用するように設定
corepack use pnpm@latest

# package.jsonを確認
cat package.json
# "packageManager": "pnpm@9.15.0" が追加されている

# pnpmで依存関係をインストール
pnpm install

1
2
3

git clone <repository-url>
cd my-new-project
pnpm install  # 自動的にpackageManagerで指定されたpnpmバージョンが使用される

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

# 1. プロジェクトディレクトリを作成
mkdir my-awesome-project
cd my-awesome-project

# 2. Node.jsバージョンを指定
echo "22" > .nvmrc
fnm use  # または nvm use

# 3. package.jsonを初期化
npm init -y

# 4. パッケージマネージャーを設定（pnpmを使用する場合）
corepack enable
corepack use pnpm@latest

# 5. Gitに追加
git init
echo "node_modules/" >> .gitignore
git add .nvmrc package.json
git commit -m "Initial setup with Node.js 22 and pnpm"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# 1. リポジトリをクローン
git clone <repository-url>
cd <project-name>

# 2. .nvmrcがあれば自動的にバージョンが切り替わる（fnmの場合）
# 手動で切り替える場合
fnm use  # または nvm use

# 3. 指定されたNode.jsバージョンがインストールされていない場合
fnm install  # または nvm install

# 4. 依存関係をインストール
# package.jsonにpackageManagerが指定されていれば自動で適切なPMが使用される
pnpm install  # または yarn install / npm install

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

name: CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: '.nvmrc'
          cache: 'pnpm'

      - name: Enable Corepack
        run: corepack enable

      - name: Install dependencies
        run: pnpm install

      - name: Run tests
        run: pnpm test

1

source ~/.bashrc  # または ~/.zshrc

1

cat ~/.bashrc | grep NVM

1
2

# 正しい設定例
eval "$(fnm env --use-on-cd --shell bash)"

1
2

export HTTPS_PROXY=http://proxy.example.com:8080
corepack enable

1
2
3
4
5

# 正しい方法
npm install -g typescript

# 避けるべき方法
sudo npm install -g typescript