【SPFx】開発環境の準備

f:id:tecchan365:20190728211031p:plain SharePoint Frameworkの開発環境の準備方法についてご紹介します。

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

ソースコードを編集するためのエディターをインストールします。
特定のエディターを使用する必要はないのですが、やはりVIsual Studio Codeが使いやすくておすすめです。

f:id:tecchan365:20190728211523p:plain

code.visualstudio.com

VIsual Studio Codeを利用すれば、拡張機能も豊富にあるので、開発がしやすいと思われます。

mynote365.hatenadiary.com

mynote365.hatenadiary.com

2.Node.js と npmのインストール

以下のサイトにアクセスし、NodeJS LTS バージョン 10をインストールします。
NodeJSをインストールすると、npm(Node Package Manager)もインストールされます。

※2019/07/28時点、SharePoint Framework 用の NodeJS の現在サポートされている LTS バージョンは、8.x と 10.x です。 9.x または 11.x バージョンは、現在 SharePoint Framework の開発ではサポートされていないので注意してください。

nodejs.org

f:id:tecchan365:20190728195917p:plain

画面内容に従い、Node.jsをインストールします。

f:id:tecchan365:20190728200128p:plain

インストール完了後、コマンドプロンプトで以下のコマンドを実行します。
バージョンが表示されれば正常にインストールされています。

node --version  
npm --version

f:id:tecchan365:20190728201031p:plain

3.Yeoman と gulp のインストール

Yeomanとgulpを”グローバル"インストールします。

Yeoman(ヨーマン)とは、コマンドライン実行で、簡単にWEBサイト等に必要なひな形を作成してくれるツールです。
SharePoint Frameworkのテンプレートファイルも、こちらのYeomanを使用して作成します。
f:id:tecchan365:20190728212121p:plain

gulp(ガルプ)とは、JavaScriptやCSSをバンドルして最小化する処理等、様々な処理をタスクとして自動化できるシステムです。

f:id:tecchan365:20190728205210p:plain

Yeomanとgulpのインストールは、以下のコマンドを、コマンドプロンプトで実行します。

npm install -g yo gulp

f:id:tecchan365:20190728205549p:plain

Node.jsと同様、バージョン確認コマンドを実行し、インストールされているか確認します。

yo --version
gulp --version

f:id:tecchan365:20190728205746p:plain

4.Yeoman の SharePoint ジェネレーターをインストール

SharePoint Framework Yeoman ジェネレーターを"グローバル"インストールします。
以下のコマンドを、コマンドプロンプトで実行します。

npm install -g @microsoft/generator-sharepoint

f:id:tecchan365:20190728210412p:plain

以上、SharePoint Frameworkの開発環境の準備でした。

道のり長いですね(´・ω・`)