考えてみよう

環境はできました。最後の仕上げは「実際に作って、そして消す」こと。なぜ"消す"ところまでやるのだと思いますか？

次にまた、まっさらな状態から練習できるようにするためです。作って終わりではなく、消してゼロに戻すまでが1周。この記事で、練習してリセットする"ループ"を完成させます。

Linux（Lightsail / Ubuntu）版

プロジェクトを作って動かす（`spfxlab` の中で）

前記事の続きで、使い捨てユーザー spfxlab に入ったまま進めます。

mkdir spfx-list-viewer && cd spfx-list-viewer

# プロジェクト用の空フォルダを作り、その中へ移動。&& は「前が成功したら次」。

yo @microsoft/sharepoint

# ジェネレーターを起動。ここは対話式なので、本編STAGE 02のとおり WebPart → React などを選んで答える。

npm run build

# 本番ビルドを実行し、.sppkg を生成する。これが通れば、環境が正しく動いている証拠。

ls sharepoint/solution

# .sppkg ができているか確認。ファイル名が表示されれば成功。

ゆみ

ここまで来たら、環境構築の練習は大成功！　実データのワークベンチ確認やアプリカタログ配置は、ブラウザと実テナントが要るから手元PCで——という切り分けは本編どおり。この練習場では「作ってビルドが通る」までを繰り返し体に入れよう。

練習が終わったら、使い捨てユーザーを消して初期化します。まず、そのユーザーから出ます。

exit

# spfxlab から抜けて、管理ユーザー ubuntu に戻る。プロンプトが ubuntu@... に戻ればOK。

sudo deluser --remove-home spfxlab

# spfxlab を、ホームディレクトリごと完全に削除。nvm も入れたツールもプロジェクトも、これで一掃される。

これで環境はゼロに戻りました。インスタンス（サーバー）はそのままなので、月額はムダになりません。また練習したくなったら、前記事の手順（または spfx-lab-setup.sh）で、まっさらな状態からやり直せます。

やってみよう

「作って → ビルド → 削除」を1周してみましょう。慣れてきたら、spfx/lab/ のスクリプトで一気に回すのもおすすめです。

``bash # 構築（管理ユーザーで） sudo bash spfx-lab-setup.sh # 練習（spfxlab に入って yo → build） sudo su - spfxlab # …練習… exit # 初期化 sudo bash spfx-lab-reset.sh``

確認ポイント

これで、何度でもゼロから練習できるループが完成しました。手が覚えるまで繰り返せば、本番の環境構築で迷うことはもうありません。

Windowsで同じ「練習して初期化」をやる場合です。プロジェクト作成〜ビルドのコマンドはLinuxと同じ。違うのは初期化の考え方だけです。

mkdir spfx-list-viewer; cd spfx-list-viewer

# フォルダ作成＆移動。PowerShell 5.1 は && が使えないので ; で区切る。

yo @microsoft/sharepoint

# 対話式。WebPart → React などを選ぶ。（Linuxと同じ）

npm run build

# 本番ビルドで .sppkg を生成。（Linuxと同じ）

Windowsには「ユーザーごと削除」の仕組みがありません。次のどちらかで初期化します。

npm uninstall -g @rushstack/heft yo @microsoft/generator-sharepoint
nvm uninstall 22

これで本編（STAGE 01〜06）と、練習編（STAGE 07）がそろいました。「読んで分かる」から「手が覚えている」へ——この付録を使って、環境構築を自分のものにしてください。

用語メモ