エディタと開発証明書

エディタは Visual Studio Code が定番

SPFxのコードは、どんなテキストエディタでも書けます。ただ、実質的な定番は無料の Visual Studio Code（VS Code） です。TypeScriptとの相性がよく、SharePoint向けの便利な拡張機能も揃っています。

• 入手先：https://code.visualstudio.com/
• インストールは基本「次へ」で進めてOK
• 余裕があれば拡張機能「SharePoint Framework Toolkit」を入れると、プロジェクト操作が少し楽になります（必須ではありません）

エディタは好みで構いません。この講座のスクリーンショットや説明は、VS Code を前提に進めます。

開発証明書を信頼する — なぜ必要？

SPFxのローカルサーバー（次のステージで使う heft start）は、HTTPS で動きます。HTTPSには「サーバーの身元を証明する証明書」が必要ですが、開発時に使うのは自分で発行した 自己署名証明書。ブラウザは初期状態でこれを「信頼できない」と警告します。

そこで、自分のPCに「この開発証明書は信頼してよい」と一度だけ教えておくわけです。これをやっておかないと、ローカル動作確認のたびに証明書エラーで部品が表示されない——という定番のつまずきに陥ります。

証明書を信頼するコマンド

信頼設定は、次のコマンドで行います。

heft trust-dev-cert

ここで1つ注意があります。trust-dev-cert は、SPFxプロジェクトの中で実行するコマンドです。というのも、この機能はプロジェクトに含まれるHeftの一部として提供されるため、npm install 済みのプロジェクトフォルダの中でないと動きません。

つまり、正確な順番はこうなります。

1. （次のステージで）yo @microsoft/sharepoint でプロジェクトを作る
2. そのフォルダで npm install が済んでいることを確認する
3. そのフォルダの中で heft trust-dev-cert を実行する

ですので、この設定は「今すぐ」ではなく、最初のプロジェクトを作った直後に行うのが自然です。ここでは「環境構築の最後に、この一手が必要」という流れを覚えておけば十分です。実行するとPCの警告が出ることがありますが、信頼を許可すればOKです。

モダンなブラウザも用意

動作確認には、Microsoft Edge / Google Chrome / Firefox など、モダンなブラウザを使います。多くの場合すでに入っているはずなので、新たに用意する必要はほぼありません。開発中は、ブラウザの「開発者ツール」も使うことになります（STAGE 05で扱います）。

STAGE 01 のまとめ — 環境構築、完了

おつかれさまでした。ここまでで、SPFx開発の土台がすべて整いました。振り返っておきましょう。

1. SPFxとは何かを理解した（ブラウザで動く、SharePoint拡張の公式フレームワーク）
2. バージョンの噛み合わせが命だと知った（gulp世代とHeft世代の違いも）
3. 対象バージョンを調べた（SPFx 1.23 → Node.js v22）
4. Node.js v22 を入れた（nvmでの切り替えも）
5. グローバルツール（Heft・Yeoman・ジェネレーター）を入れた
6. エディタと開発証明書の準備を押さえた

次のSTAGE 02では、いよいよ yo @microsoft/sharepoint を実行して、最初のプロジェクトを実際に生み出します。ここで学んだ「証明書の信頼」も、その流れの中で実践します。