Node.jsという土台はできました。でも、この状態ではまだ「SharePointの部品を作る」ことはできません。あと何が足りないのでしょう？
足りないのは、SPFx専用の道具です。プロジェクトの雛形を作る道具、それをビルドする道具——これらをPC全体で使えるように（＝グローバルに）入れます。この記事で3つ、まとめて導入します。
入れるのは3つ。それぞれの役割
SPFx開発では、次の3つのツールをPCに1回だけ入れておきます。プロジェクトごとではなく、PC全体で共有する道具なので "グローバル" にインストールします。
- Heft（
@rushstack/heft） — ビルドの司令塔。TypeScriptのコンパイルやパッケージ化などを実行する。旧世代のgulpにあたる役割 - Yeoman（
yo） — 雛形ジェネレーターの土台。対話形式で新規プロジェクトの骨組みを作る汎用ツール - SharePointジェネレーター（
@microsoft/generator-sharepoint） — Yeomanに「SharePoint用の雛形の作り方」を教える専用パーツ
たとえるなら、Yeomanが「たい焼き器」、SharePointジェネレーターが「SharePoint型の焼き型」、Heftが「焼き上がりを仕上げるオーブン」。3つ揃って、はじめてSPFxのプロジェクトを生み出せます。
前の記事で「gulpは古い世代」って話をしたよね。だからここでも gulp は入れないの。代わりに入れるのが @rushstack/heft。これが今の世代（1.22以降）の司令塔だよ。古い記事だと gulp-cli を入れろって書いてあるけど、私たちは入れなくてOK。
1行でまとめて入れる
3つは、1つのコマンドでまとめて導入できます。PowerShellで次を実行してください。--global（短く -g）が「PC全体に入れる」の意味です。
npm install @rushstack/heft yo @microsoft/generator-sharepoint --global数分かかることがあります。たくさんのメッセージが流れますが、赤い ERR! が出ずに終われば成功です。警告（warn）は出ることがありますが、多くは無視して問題ありません。
> うまくいかないときのヒント： 権限エラーが出たら、PowerShellを「管理者として実行」で開き直してから、もう一度同じコマンドを試してください。
インストールが終わったら、それぞれちゃんと入ったか確認しましょう。バージョン番号が返ってくれば成功です。
``
yo --version
heft --version
``
どちらも数字が表示されればOKです。generator-sharepoint は yo から呼び出して使う"焼き型"なので、単体でのバージョン確認コマンドはありません。次のステージで yo @microsoft/sharepoint を実行したとき、正しく一覧に出てくれば入っている証拠です。
グローバルに入れたものを一覧で見る
「今、PC全体にどんなツールを入れたっけ？」を確認したいときは、次のコマンドが便利です。
npm list --global --depth=0@microsoft/generator-sharepoint、@rushstack/heft、yo の3つが並んでいれば、道具立ては完成です。
この記事のまとめ
- グローバルに入れる道具は3つ：Heft・Yeoman・SharePointジェネレーター
- コマンドは1行：
npm install @rushstack/heft yo @microsoft/generator-sharepoint --global - gulpは入れない（Heft世代だから）
- 確認は
yo --version/heft --version、一覧はnpm list --global --depth=0
道具はほぼ揃いました。残るはエディタと、ローカル動作確認に必要な開発証明書の準備です。次で仕上げます。
- グローバルインストール
- --global（-g）で、プロジェクトではなくPC全体にツールを入れること
- Heft
- @rushstack/heft。ビルドの司令塔。gulpに代わる現行世代のツールチェーン
- Yeoman (yo)
- プロジェクトの雛形を対話式で生成する汎用ツール
- generator-sharepoint
- YeomanにSharePoint用の雛形を教える専用ジェネレーター