SharePoint Framework 開発環境の設定

  • [アーティクル]

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

注:

この記事の手順を実行する前に、必ず Microsoft 365 テナントを設定します。

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

重要

以下の手順は、最新版の SharePoint Framework を使用して SharePoint Online 向けのソリューションを構築することを想定しています。 SharePoint Server 2019 または SharePoint Server 2016 のソリューションを構築中である場合は、以下の [関連項目] セクションの参照元である追加ドキュメントを参照してください。

Node.js. のインストール

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

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

重要

Node.js は多くの場合、macOS、Windows、および Linux を含む複数のプラットフォームで使用できます。 正確なダウンロードリンクは頻繁に変更されるため、このページからはリンクされていません。 代わりに、以下の詳細を使用して、プラットフォームにダウンロードするインストーラーを決定してください。

Node.jsには、LTS & Current version という 2 つの異なるリリースが常に保持されていることに注意してください。 SharePoint Framework は、LTS バージョンでのみサポートされています。 Node.jsの長期サポート (LTS) リリースの詳細については、「 Node.js > リリース」を参照してください。

ヒント

Node.js Web サイトでは、常に LTS & Current リリースの両方に対して最新のインストーラーが推奨されます。 特定のバージョンのNode.jsバージョンをダウンロードするには、[以前のリリースのダウンロード>] ページNode.js>使用します。

  • Windows ユーザーは、Windows のインストールに応じて、x86 または x64 用の *.msi インストーラーを使用できます。 通常、使用可能な *.msi ファイルは 、node-v{version-number}-x[86|64].msiに似た名前の 2 つだけです。
  • macOS ユーザーは、通常 node-v{version-number}.pkg という名前の *.pkg インストーラーを使用できます。

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

node --version

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

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

注意

SharePoint をオンプレミスで展開するために SharePoint Framework コンポーネントを構築する場合の詳細については、[関連項目] セクションに記載されている追加ページを参照してください。

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

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

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

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

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

ヒント

1 つの行に、次の 3 つのツールのすべてをインストールできます。

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 v4.x は SPFx v1.13 フォワードで必要です。

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

注:

プロジェクトの作成後に npm install を使用してすべての依存関係がインストール済みであることを前提としています。 この手順では、すべての gulp タスクがプロジェクトの一部としてインストールされます。

オプション ツール

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

次の手順

最初のクライアント側の 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)

ヒント

NVM の詳細については、「 ノード バージョン マネージャーを使用したインストール管理Node.js改善」を参照してください。

トラブルシューティング

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

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

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 の構成

関連項目