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.

YouTube の SharePoint PnP チャンネルのビデオの手順に従って進めることもできます。You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel.



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

NodeJS のインストールInstall NodeJS

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

  • 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.

注意

NodeJS の 現在の LTS バージョンは、8.12.0 です。9.x または 10.x バージョンは、現在 SharePoint Framework の開発ではサポートされていないことに注意してください。Current LTS version of NodeJS is 8.11.4. Notice that 9.x or 10.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.

Ubuntu を使用している場合If you are using Ubuntu

次のコマンドを使用してコンパイラ ツールをインストールする必要があります。You need to install compiler tools by using the following command:

sudo apt-get install build-essential

fedora を使用している場合If you are using fedora

次のコマンドを使用してコンパイラ ツールをインストールする必要があります。You need to install compiler tools by using the following command:

sudo yum install make automake gcc gcc-c++ kernel-devel

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

異なるバージョンの SharePoint Framework Yeoman ジェネレーターを使用して作成した異なるプロジェクト間で切り替える必要がある場合は、次のコマンドを実行して、プロジェクト フォルダーの開発依存関係としてローカルにジェネレーターをインストールできます。If you need to switch between the different projects created by using different versions of the SharePoint Framework Yeoman generator, you can install the generator locally as a development dependency in the project folder by executing the following command:

npm install @microsoft/generator-sharepoint --save-dev

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

オプション ツール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!

注意

ドキュメントまたは 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.