SharePoint Framework 開発環境の設定

任意のテキスト エディターを使用して、SharePoint Framework (SPFx) ソリューションをビルドできます。 Mac、PC、または Linux 環境も同様に使用できます。

Microsoft 365 プラットフォーム コミュニティ (PnP) YouTube チャンネルのこのビデオを見て、これらの手順に従うこともできます。

Node.js. のインストール

Node.js v16 の最新の LTS バージョンをインストールします。

このバージョンは、現在 SharePoint Framework に使用する Node.js で推奨されているバージョンです (以下に示す特別な場合を除きます)。

次のコマンドを実行して、インストールされているバージョンを含め、Node.js がすでにインストールされているかどうかを確認できます。

node --version

SharePoint Framework v1.16.0 は、次のNode.js バージョンでサポートされています。

• Node.js v16 LTS (v16.13.x - v16.18.x, aka: Gallium)

コード エディターのインストール

以下のような Web パーツを構築するのにクライアント側の開発をサポートしている任意のコード エディター、または IDE を使用することができます。

• Visual Studio Code
• Webstorm

このドキュメンテーションの手順と例では Visual Studio コードを使用しますが、任意のエディターを使用することができます。

開発ツールチェーンの前提条件をインストールする

SharePoint Framework 開発およびビルド ツールチェーンは、さまざまな人気のオープンソース ツールを活用します。 各プロジェクトにはほとんどの依存関係が含まれていますが、ワークステーションにそのいくつかをグローバルにインストールする必要があります。

npm install gulp-cli yo @microsoft/generator-sharepoint --global

Gulp のインストール

Gulp は、繰り返しのタスクを自動化するために使用される、JavaScript ベースのタスクランナーです。 SharePoint Framework ビルド ツールチェーンは、プロジェクトの構築、JavaScript バンドルの作成、ソリューションの展開に使用された結果として生じるパッケージに Gulp タスクを使用します。

Gulp をインストールするには、以下のコマンドを入力します。

npm install gulp-cli --global

Yeoman のインストール

Yeoman は新規プロジェクトの開始に役立ち、ベスト プラクティスとツールが規定され生産性を維持するのに役立ちます。 SharePoint のクライアント側開発ツールには、新しい Web パーツを作成するための Yeoman ジェネレーターが含まれています。 ジェネレーターは、共通ビルド ツール、共通定型コード、および共通プレイグラウンドを提供し、テスト用の Web パーツをホストします。

Yeoman をインストールするには、次のコマンドを入力します。

npm install yo --global

Yeoman の SharePoint ジェネレーターをインストールします。

Yeoman SharePoint Web パーツ ジェネレーターを使用すると、適切なツールチェーンとプロジェクト構造を持つ SharePoint のクライアント側のソリューション プロジェクトをすばやく作成できます。

SharePoint Framework Yeoman ジェネレーターをグローバルにインストールするには、次のコマンドを入力します。

npm install @microsoft/generator-sharepoint --global

Yeoman SharePoint ジェネレーターの詳細については、「SharePoint Framework 用の Yeoman ジェネレーター」を参照してください。

最新の Web ブラウザーをインストールする

開発ブラウザーとして、Microsoft Edge、Google Chrome、または Firefox のような最新の Web ブラウザーを使用してください。

開発者用自己署名証明書の信頼

開発環境からカスタム ソリューションをテストするときに使用する SharePoint Framework のローカル Web サーバーでは、HTTPS が既定で使用されます。 これは、開発用自己署名 SSL 証明書を使用して実装されます。 開発環境では、自己署名 SSL 証明書は信頼されていません。 まず、証明書を信頼するよう、開発環境を構成する必要があります。

すべての SharePoint Framework プロジェクトに、ユーティリティ タスクが gulp タスクのフォームで含まれています。 今すぐ実行することもできますが、「SharePoint のクライアント側の最初の Web パーツを作成する (Hello World パート 1)」チュートリアルで説明されているように、最初のプロジェクトを作成するまで実行を待機することもできます。

SharePoint Framework Yeoman ジェネレーターでプロジェクトが作成された後、プロジェクトのルート フォルダー内で次のコマンドを実行します。

gulp trust-dev-cert

オプション ツール

役に立つかもしれないツールをいくつか以下に示します。

• Fiddler
• Postman
• Windows ターミナル
• Windows 用 Cmder
• Mac 用 Oh My Zsh
• Git ソース管理ツール

次の手順

最初のクライアント側の Web パーツを構築する準備が整いました!

SPFx & SharePoint Server (オンプレミス)

SPFx は、SharePoint Online (SPO)、SharePoint Server 2019、 & SharePoint Server 2016 で使用できます。 このページの構成手順は、最新版の SPFx for SharePoint Online を使用してソリューションを作成することを想定しています。

SharePoint Online には、SPFx の旧バージョンと最新バージョンのすべてのバージョンが含まれます。 各 SPFx ソリューションには、どの SPFx ランタイムに依存しているかを SPO に伝えるための情報が含まれます。

SharePoint Server をオンプレミスで展開するためのソリューションを構築している場合は、特定の SharePoint バージョンの詳細について [関連項目] セクションを参照してください。 オンプレミスの各 SharePoint は、特定のバージョンの SPFx にしか対応していません。 このため、さまざまな SharePoint の展開に合わせて異なるソリューションを作成する場合、開発環境の構成が複雑になります。

• SharePoint Server 2016 では、SharePoint Framework (SPFx) v1.1 が使用されています。
• SharePoint Server 2019 では、SharePoint Framework (SPFx) v1.4.1 が使用されています。

ユーザーのシナリオによっては、異なる開発環境を維持する必要があります。 これらの課題に対して、開発者は以下のようなアプローチをとっています。

• 仮想コンピューター
• DOCKER
• ノード バージョン マネージャー (NVM)

トラブルシューティング

グローバルにインストールされたパッケージのバージョンを確認する

グローバルにインストールされているすべてのパッケージのリストを取得するには、次のコマンドを実行します。

npm list --global --depth=0️

開発用自己署名証明書を信頼できない

gulp trust-dev-cert& を実行するときに自己署名証明書の信頼に問題がある場合は、すべての依存関係の正しいバージョンがインストールされていることを確認しました。通常、問題が解決する解決策の 1 つは、グローバルにインストールされているすべてのパッケージをアンインストールし、Node.jsアンインストールし、再起動&し直す方法です。

場合によっては、gulp trust-dev-cert コマンドを実行しても、マシン上の自己署名開発証明書を信頼するという望ましい効果が得られないことがあります。 このようなケースはまれですが、発生した場合、プロファイル フォルダーに生成された非表示のフォルダーの削除が必要となることがあります。

& v1.12.1 より前の SPFx バージョンのフォルダー {{homedir}}/.gcb-serve-data を検索して削除します。 それ以降のバージョンでは、フォルダー {{homedir}}/.rushstack を削除してから、自己署名開発証明書の信頼を再試行してください。 それ以外の場合、gulp untrust-dev-cert を実行すると、プロファイル フォルダーから証明書ファイルを削除するのと同じ効果があります。

一部のポリシーがアクションをブロックしているために gulp trust-dev-cert を実行しているにもかかわらず、証明書が信頼されたルート証明機関に追加されない場合は、{{homedir}}/.rushstack フォルダーの rushstack-serve.pem ファイルを手動でインポートできます。 ローカル管理者アカウントを使用して、信頼されたルート証明機関の下の証明書マネージャーに接続します。

NPM を使用してパッケージをインストールできない- 会社のプロキシ

開発環境が会社のプロキシの背後にある場合は、そのプロキシを使用するよう NPM を構成する必要があります。 会社のプロキシの背後に開発環境を構成する方法については、「npm-config」ドキュメントの、特に proxy&http-proxy 設定の箇所を参照してください。 詳細: coporate Web プロキシの NPM の構成

関連項目

• SharePoint Framework の開発ツールとライブラリの互換性
• SharePoint 2016 Feature Pack 2 を使用した SharePoint Framework 開発
• SharePoint Server 2019 を使用した SharePoint Framework 開発