Linux（Lightsail / Ubuntu）版

下準備：システムの道具をそろえる（管理ユーザー ubuntu で）

まずは、このあと必要になる基本ツールを入れます。ここだけは、管理ユーザー ubuntu で sudo を使います。

sudo apt update

# パッケージの一覧を最新に更新する。何かを入れる前の"おまじない"。

sudo apt install -y curl git build-essential

# ダウンロード用の curl、git、そしてビルドに使う build-essential を導入。-y は「全部はい」で確認を省略。

使い捨てユーザーを作る

ここからが本題。練習用の"部屋"となるユーザーを作ります。

sudo adduser --disabled-password --gecos "" spfxlab

# spfxlab という使い捨てユーザーを作成。--disabled-password でパスワード入力を省き、--gecos "" で氏名などの質問もスキップ。

sudo su - spfxlab

# 作った spfxlab に切り替える。-（ハイフン）が大事で、そのユーザーの環境を丸ごと読み込んで入る。これ以降のプロンプトが spfxlab@... に変われば成功。

nvm（Linux版）を入れる

Node.js を、バージョン切り替えできる nvm 経由で入れます。Linux用の nvm-sh を使います。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# nvm-sh の導入スクリプトをダウンロードして、その場で実行。spfxlab のホーム（~/.nvm）に入る。

exec bash

# シェルを読み込み直して、いま入れた nvm コマンドを使える状態にする。（. ~/.nvm/nvm.sh でも可）

nvm --version

# nvm が使えるか確認。番号が出ればOK。

Node.js v22 を入れて使う

本編STAGE 01で確定した、SPFx 1.23系の対象バージョン v22 を入れます。

nvm install 22

# v22系の最新LTSをダウンロードして導入。

nvm use 22

# いま入れた v22 を「使う」状態にする。

node --version

# v22.x.x と表示されれば、対象と一致。土台のNodeが整った。

SPFx のツールを入れる

最後に、SPFx開発の3つの道具をグローバル（このユーザー内）に入れます。

npm install @rushstack/heft yo @microsoft/generator-sharepoint --global

# ビルドの司令塔 heft、雛形ツール yo、SharePoint用ジェネレーターを一括導入。spfxlab のホーム内に入るので、システムは汚れない。

yo --version

# yo が入ったか確認。番号が出ればOK。

heft --version

# heft も確認。これで、SPFxプロジェクトを作る準備が完全に整った。

Linux版：打ったコマンドの全体像

# --- 管理ユーザー ubuntu で ---
sudo apt update
sudo apt install -y curl git build-essential
sudo adduser --disabled-password --gecos "" spfxlab
sudo su - spfxlab

# --- ここから spfxlab の中で ---
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
exec bash
nvm install 22
nvm use 22
npm install @rushstack/heft yo @microsoft/generator-sharepoint --global

この一連の流れは spfx/lab/spfx-lab-setup.sh にもまとめてあります。慣れたらスクリプト一発でも同じことができます。

---

Windows（PowerShell）版

ここからは、同じことを手元のWindows PCでやる場合です。うれしいことに、SPFxの中心コマンド（nvm install / node / npm / yo / heft）はLinuxとまったく同じ。違うのは、次の3点だけです。

• sudo や apt は不要（Windowsはインストーラ方式）
• 「使い捨てユーザー」は作らない（Windowsにその仕組みはない）
• nvm は nvm-windows を使う（入れ方だけが違う）

事前準備：nvm-windows を入れる（1回だけ）

• 配布元：GitHub の coreybutler/nvm-windows → Releases の nvm-setup.exe
• インストーラを実行して導入
• PowerShellを開き直す（nvm を認識させるため。Linuxの exec bash に当たる操作）

Node.js v22 を入れて使う

nvm install 22

# v22系の最新を導入。（Linuxと同じコマンド）

nvm use 22

# v22 を使う状態にする。

node --version

# v22.x.x と表示されれば一致。

SPFx のツールを入れる

npm install @rushstack/heft yo @microsoft/generator-sharepoint --global

# heft・yo・ジェネレーターを一括導入。（Linuxと同じコマンド）

yo --version

# 確認。番号が出ればOK。heft --version も同様に確認できる。

Windowsで「使い捨て」にしたいとき

Windowsには使い捨てユーザーの仕組みがありません。何度もゼロからやり直すなら、次のどちらかで代用します。

• Windows サンドボックス（Win11 Pro標準）… 起動するたびに真っさらなWindows。閉じれば全部消える
• 練習用フォルダを作ってその中で進め、終わったらフォルダごと削除。入れたツールも消すなら npm uninstall -g <名前>、Nodeは nvm uninstall <版>

Windows版：打ったコマンドの全体像

# 事前に nvm-windows を nvm-setup.exe で導入し、PowerShellを開き直しておく
nvm install 22
nvm use 22
npm install @rushstack/heft yo @microsoft/generator-sharepoint --global

早見表：Linux ⇄ Windows

ステップ	Linux（Lightsail）	Windows（PowerShell）
下準備の道具	sudo apt install …	基本不要（git は git-scm.com から）
使い捨ての隔離	使い捨てユーザー（adduser／deluser）	Windows Sandbox／空フォルダで代用
nvm	nvm-sh スクリプト	nvm-windows（nvm-setup.exe）
ツールの反映	exec bash	PowerShellを開き直す
Node導入	nvm install 22 → nvm use 22	同じ
SPFxツール	npm install … --global	同じ

---

環境はどちらのOSでも整いました。次は、作った環境でプロジェクトを動かし、最後にまっさらへ戻します。