SharePoint Framework 開発環境の設定Set up your SharePoint Framework development environment

Visual Studio または独自のカスタム開発環境を使用して、SharePoint Framework ソリューションを構築できます。You can use Visual Studio or your own custom development environment to build SharePoint Framework solutions. Mac、PC、または Linux を使用することができます。You can use a Mac, PC, or Linux.

注意

この記事の手順を実行する前に、必ず Office 365 テナントを設定しますBefore following the steps in this article, be sure to Set up your Office 365 tenant.

また、SharePoint PnP YouTube チャンネルのビデオを見てこれらの手順に従うこともできます。You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:



開発者ツールのインストールInstall developer tools

NodeJS のインストールInstall NodeJS

NodeJS LTS バージョン 10 をインストールします。Install NodeJS LTS version 10.

  • Windows の場合、このリンクの msi インストーラーを使用すると、NodeJS を簡単にセットアップできます。If you are in Windows, you can use the msi installers in this link for the easiest way to set up NodeJS.
  • 既に NodeJS がインストールされている場合は、node -v を使用して最新版かどうか確認します。If you have NodeJS already installed, check that you have the latest version by using node -v. 現在の LTS 版を返すはずです。It should return the current LTS version.
  • Mac を使用する場合は、homebrew を使用して NodeJS をインストールし管理することをお勧めします。If you are using a Mac, we recommend that you use homebrew to install and manage NodeJS.

注意

SharePoint Framework 用の NodeJS の現在サポートされている LTS バージョンは、8.x と 10.x です。The current supported LTS version of NodeJS for the SharePoint Framework is both 8.x and 10.x. 9.x または 11.x バージョンは、現在 SharePoint Framework の開発ではサポートされていないことに注意してください。Notice that 9.x or 11.x versions are currently not supported with SharePoint Framework development.

コード エディターのインストールInstall a code editor

以下のような Web パーツを構築するのにクライアント側の開発をサポートしている任意のコード エディター、または IDE を使用することができます。You can use any code editor or IDE that supports client-side development to build your web part, such as:

このドキュメンテーションの手順と例では Visual Studio コードを使用しますが、任意のエディターを使用することができます。The steps and examples in this documentation use Visual Studio Code, but you can use any editor of your choice.

Yeoman と gulp のインストールInstall Yeoman and gulp

Yeoman は新規プロジェクトの開始に役立ち、ベスト プラクティスとツールが規定され生産性を維持するのに役立ちます。Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint のクライアント側開発ツールには、新しい Web パーツを作成するための Yeoman ジェネレーターが含まれています。SharePoint client-side development tools include a Yeoman generator for creating new web parts. ジェネレーターは、共通ビルド ツール、共通定型コード、および共通プレイグラウンドを提供し、テスト用の Web パーツをホストします。The generator provides common build tools, common boilerplate code, and a common playground website to host web parts for testing.

次のコマンドを入力し、Yeoman と gulp をインストールします。Enter the following command to install Yeoman and gulp:

npm install -g yo gulp

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

Yeoman SharePoint Web パーツ ジェネレーターを使用すると、適切なツールチェーンとプロジェクト構造を持つ SharePoint のクライアント側のソリューション プロジェクトをすばやく作成できます。The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

SharePoint Framework Yeoman ジェネレーターをグローバルにインストールするには、次のコマンドを入力します。To install the SharePoint Framework Yeoman generator globally, enter the following command:

npm install -g @microsoft/generator-sharepoint

Yeoman SharePoint ジェネレーターの詳細については、「Yeoman の SharePoint ジェネレーターを使用したスキャフォールディングのプロジェクト」を参照してください。For more information about the Yeoman SharePoint generator, see Scaffold projects by using Yeoman SharePoint generator.

開発者用自己署名証明書の信頼Trusting the self-signed developer certificate

開発環境からカスタム ソリューションをテストするときに使用する SharePoint Framework のローカル Web サーバーでは、HTTPS が既定で使用されます。The SharePoint Framework's local webserver, used when testing your custom solutions from your development environment, uses HTTPS by default. これは、開発用自己署名 SSL 証明書を使用して実装されます。This is implemented using a development self-signed SSL certificate. 開発環境では、自己署名 SSL 証明書は信頼されていません。Self-signed SSL certificates are not trusted by your developer environment. まず、証明書を信頼するよう、開発環境を構成する必要があります。You must first configure your development environment to trust the certificate.

すべての SharePoint Framework プロジェクトに、ユーティリティ タスクが gulp タスクのフォームで含まれています。A utility task is included in every SharePoint Framework project in the form of a gulp task. 今すぐ実行することもできますが、「SharePoint のクライアント側の最初の Web パーツを作成する (Hello World パート 1): Web パーツのプレビュー」チュートリアルで説明されているように最初のプロジェクトを作成するまで実行を待機することもできます。You can elect to do this now, or wait until you create your first project as covered in the Build your first SharePoint client-side web part (Hello World part 1): Preview the web part tutorial.

SharePoint Framework Yeoman ジェネレーターでプロジェクトが作成された後、プロジェクトのルート フォルダー内で次のコマンドを実行します。Once a project has been created with the Yeoman generator for the SharePoint Framework, execute the following command from within the root folder of the project.

gulp trust-dev-cert

注意

プロジェクトの作成後に npm install を使用してすべての依存関係がインストール済みであることを前提としています。This assumes you have installed all dependencies with npm install after creating the project. この手順では、すべての gulp タスクがプロジェクトの一部としてインストールされます。This step will install all gulp tasks as part of a project.

オプション ツールOptional tools

役に立つかもしれないツールをいくつか以下に示します。Following are some tools that might come in handy as well:

次の手順Next steps

最初のクライアント側の Web パーツを構築する準備が整いました!You are now ready to build your first client-side web part!

トラブルシューティングTroubleshooting

SharePoint Server 2016 向けの SPFx 開発SPFx Development for SharePoint Server 2016

SharePoint Server 2016 では、SharePoint Framework (SPFx) v1.1 が使用されています。SharePoint Server 2016 uses the SharePoint Framework (SPFx) v1.1. v1.1 がリリースされた時期に、NodeJS は NodeJS v6.x から v8.x に移行しました。Around this the time of the v1.1 release, NodeJS was transitioning from NodeJS v6.x to v8.x. 今回の更新プログラムでは、NodeJS が変更され、既定値が HTTP1 から HTTP2 に変わりました。In this update, NodeJS introduced a change where the default changed from HTTP1 to HTTP2. このため、一部で SPFx の問題が発生しています。For some, this caused issues with SPFx. SPFx v1.1 より後のバージョンではこの問題は解決されていますが、SPFx v1.1 を現在も使用している場合 (SharePoint Server 2016 を使用している場合など) には問題が発生する可能性があります。A later version of SPFx resolved these issues, but those who are still working with SPFx v1.1 (such as those working with SharePoint Server 2016) may run into issues.

この問題を解決するには、NodeJS が既定の HTTP2 ではなく HTTP1 を使用するように、環境変数 NODE_NO_HTTP2=1 を設定します。To resolve this, set the following environment variable to instruct NodeJS to use HTTP1 instead of the default HTTP2: NODE_NO_HTTP2=1.

詳細については、「問題 #1002」を参照してください。For more information, refer to issue #1002.

開発用自己署名証明書を信頼できないUnable to Trust the Self-signed Development Certificate

gulp trust-dev-cert コマンドを実行しても、開発用コンピューター上で開発用自己署名証明書を期待通りに信頼できない場合があります。In some cases, executing the command gulp trust-dev-cert, does not have the desired effect of trusting the self-signed development certificate on your machine. このようなケースはまれですが、発生した場合、プロファイル フォルダーに生成された非表示のフォルダーの削除が必要となることがあります。In rare cases such as these, you may need to delete a hidden folder that's generated in your profile folder. <homedir>/.gcb-serve-data フォルダーを検索して削除し、開発用自己署名証明書の信頼を再度行ってください。Locate & delete the folder <homedir>/.gcb-serve-data and then try to trust the self-signed development certificate again.

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

開発環境が会社のプロキシの背後にある場合は、そのプロキシを使用するよう NPM を構成する必要があります。If your development environment is behind a corporate proxy, you need to configure NPM to use that proxy. 会社のプロキシの背後に開発環境を構成する方法については、「npm-config」ドキュメントの、特に proxy & http-proxy 設定の箇所を参照してください。Refer to the npm-config documents on how to configure your development environment behind a corporate proxy... specifically the proxy & http-proxy settings. 詳細な情報については、「How to setup Node.js and Npm behind a corporate web proxy」を参照してください。More information: How to setup Node.js and Npm behind a corporate web proxy

注意

ドキュメントまたは SharePoint Framework に問題が見つかった場合は、sp-dev-docs リポジトリの懸案事項リストを使用して SharePoint エンジニアリングに報告してください。If you find an issue in the documentation or in the SharePoint Framework, report that to SharePoint engineering by using the issue list at sp-dev-docs repository. よろしくお願いします。Thanks for your input in advance.