対象バージョンを調べる

まず、状況は2つのどちらか

「対象バージョンを決める」と言っても、あなたの状況によって進め方が変わります。

• A. 既存プロジェクトに参加する（例：チームが以前作ったプロジェクトを引き継ぐ） → プロジェクトがすでに使っているSPFxバージョンに合わせる
• B. 新しくプロジェクトを始める → 原則として最新の安定版を選ぶ

この講座は、新規に始めるBを主な想定にしつつ、既存プロジェクトに合わせるAでも困らないよう、両方の調べ方を見ていきます。まずは応用の効く「既存プロジェクトのバージョンの調べ方」から。

A. 既存プロジェクトのSPFxバージョンを調べる

プロジェクトのバージョンは、フォルダ内の package.json を開けば分かります。@microsoft/sp- で始まるパッケージの番号が、そのプロジェクトのSPFxバージョンです。

"dependencies": {
    "@microsoft/sp-core-library": "1.23.0",
    "@microsoft/sp-webpart-base": "1.23.0",
    ...
}

この場合、SPFxバージョンは 1.23.0 だと分かります。あわせて、package.json の先頭近くにある engines も見ておきましょう。ここに「使うべきNode.jsの範囲」が書かれていることがあります。

"engines": {
    "node": ">=22.14.0 < 23.0.0"
}

これは「Node.js は 22.14.0 以上・23未満（＝v22系）を使ってね」という意味。プロジェクト自身が、必要なNode.jsを教えてくれているわけです。もう1つ、.yo-rc.json というファイルにも生成時のSPFxバージョン（@microsoft/generator-sharepoint の version）が記録されています。

B. 公式の互換表で調べる（●●＝Microsoft Learn）

新規に始める場合や、「1.23にはどのNodeが対応？」を正確に確認したい場合は、Microsoftの公式互換表を見るのが確実です。これがいわば"正解表"です。

> 調べ先（●●）： Microsoft Learn ＞ SharePoint Framework
> compatibility（Platform & Toolchain Compatibility Reference）のページ
> https://learn.microsoft.com/sharepoint/dev/spfx/compatibility

このページには、SPFxバージョンごとの対応表が載っています。主要な行を抜き出すと、次のようになっています（2026年時点）。

SPFx	Node.js (LTS)	TypeScript	React
1.23.0	v22	〜v5.8	17.0.1
1.22.x	v22	〜v5.8	17.0.1
1.21.x	v22	v5.3	17.0.1
1.20.0	v18	v4.5, v4.7	17.0.1
1.19.0	v18	v4.5, v4.7	17.0.1
1.18.x	v16, v18	v4.5, v4.7	17.0.1

表の見方はシンプルです。まず左端で自分のSPFxバージョンの行を見つけ、その行の「Node.js (LTS)」列を読む。それが入れるべきNode.jsです。この講座は最新安定版の 1.23.0 の行を見るので、Node.js は v22 ——これで確定です。

いまのPCの状態も確認しておく

「入れるべきもの」が分かったら、いま自分のPCに何が入っているかも確認しておきましょう。すでにNode.jsが入っているかもしれません。ターミナル（PowerShell）で次を実行します。

node --version

• v22.x.x と表示されれば、対象（v22）と一致 → そのまま使えます
• v18.x.x や v24.x.x など、ズレていれば → 次の記事で入れ替え（切り替え）が必要
• 'node' は認識されていません と出れば → まだ未インストール。次の記事で導入します

この記事のまとめ

• 環境構築の第一歩はインストールではなく「調べる」
• 既存プロジェクトなら package.json の @microsoft/sp-* と engines を見る
• 正確に確認するなら 公式のcompatibilityページ（●●）で対応Nodeを読む
• この講座の対象：SPFx 1.23.0 → Node.js v22

「入れるべきNode.jsのバージョン」が確定しました。いよいよ次で、実際にNode.jsを入れます。