SharePoint Framework 開発環境の設定

任意のテキスト エディターを使用して、SharePoint Framework ソリューションを構築することができます。 Mac、PC、または Linux 環境も同様に使用できます。

注意

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

また、SharePoint PnP YouTube チャンネルのビデオを見てこれらの手順に従うこともできます。

重要

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

Node.js. のインストール

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

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

重要

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

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

ヒント

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

  • Windows のユーザーは、Windows のインストールに応じて、x86 または x64 用の *.msi インストーラーを使用できます。 通常、node-v{バージョン番号}-x[86|64].msi に類似した名前の 2 つの *.msi ファイルのみ使用できます。
  • macOS を使用している場合は、*.pkg インストーラーを使用できます。通常、node-v{バージョン番号}.pkg と呼ばれます。

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

node --version

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

  • Node.js v12.13.0+ (Erbium)
  • Node.js v14.15.0+ (Fermium)

注意事項

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 バージョン 4.x には、SharePoint Framework 1.13 以降が必要です。

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

npm install yo --global

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

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

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

npm install @microsoft/generator-sharepoint --global

Yeoman SharePoint ジェネレーターの詳細については、「Yeoman の SharePoint ジェネレーターを使用したスキャフォールディングのプロジェクト」を参照してください。

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

開発ブラウザーとして、Microsoft EdgeGoogle 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)

トラブルシューティング

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

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

npm list --global --depth=0️

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

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

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

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

開発環境が会社のプロキシの背後にある場合は、そのプロキシを使用するよう NPM を構成する必要があります。 会社のプロキシの背後に開発環境を構成する方法については、「npm-config」ドキュメントの、特に proxy & http-proxy 設定の箇所を参照してください。 詳細な情報については、「How to setup Node.js and Npm behind a corporate web proxy」を参照してください。

関連項目