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. You can use a Mac, PC, or Linux. Mac、PC、または Linux を使用することができます。You can use a Mac, PC, or Linux.


この記事の手順を実行する前に、必ず Office 365 テナントを設定しますNote: 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 the video on the SharePoint PnP YouTube Channel.

Screenshot of the YouTube video player for this tutorial

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

NodeJS のインストールInstall Node.js.

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

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


SharePoint Framework ビルド パイプラインでは、現在 Node.js の LTS バージョンはサポートされていません。Note: The SharePoint Framework build pipeline doesn't currently support the LTS version of Node.js. その代わりに、Node.js バージョン 6.11.5 をダウンロードしてください。Instead, download Node.js version 6.11.5. それは npm 3.10.10 をインストールします。This installs npm 3.10.10. v5.x バージョンの npm を使用している場合、次のコマンドを使用して古い npm バージョンにダウングレードする必要があることに注意してください: npm install -g npm@3Note that if you have a v5.x version of npm, you will need to downgrade to an older npm version by using the following command: npm install -g npm@3.

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

以下のような Web パーツを構築するのにクライアント側の開発をサポートしている任意のコード エディター、または IDE を使用することができます。Install a code editor. 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 using the following command:

sudo apt-get install build-essential

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

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

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

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

Yeoman は新規プロジェクトの開始に役立ち、ベスト プラクティスとツールが規定され生産性を維持するのに役立ちます。Yeoman helps you to kickstart new projects, prescribing 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, boilerplate code, and a common playground web site 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 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

オプション ツールOptional tools

役に立つかもしれないツールをいくつか以下に示します。Here 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, please report that to SharePoint engineering using the issue list at sp-dev-docs repository. よろしくお願いします。Thanks for your input advance.