鍋綿ブログ

C#・SharePoint・SharePoint Framework・Office365を中心に扱うブログです。

SharePoint Framework (SPFx) 開発環境構築 (Windows 10)

SharePoint Framework (略称:SPFx) の開発環境をWindows 10上に構築する手順を紹介します。SPFx初心者の方は先にこちらをどうぞ。

www.micknabewata.com

 

 

SPFxとは?

SPFxは、SharePoint Online の画面をカスタマイズする方法の一つです。Webパーツを開発したり、フィールドの描画処理を拡張したりすることができます。
SharePointのページ上にJavaScriptが直接読み込まれて実行されるというシンプルな仕組みで動作しており、SharePoint アドインとは仕組みが異なります。(SharePoint アドインは、「アプリ Web」という特別なSharePoint サイト上でJavaScriptが動作してIFrameでページに読み込まれます。)

SPFxはNodeJS環境で開発します。プロジェクトのテンプレートがYeomanのジェネレーターとして配布されている他、SharePointとやり取りしたりコントロールを作成したりするためのnpmパッケージが多く提供されています。
エディタは自由です。Visual Studio Codeなどが軽量でいい感じです。

また、SPFxは依存関係が少ないために、JavaScriptのフレームワークを自由に利用できます。(ビルド成果物としてJavaScriptがあれば何でもOK)
AngularやReactなどを普段から利用するフロントエンド エンジニアは参入しやすいかと思います。

SPFxの概要はここに記載されています。

SharePoint Framework の概要 (SPFx) | Microsoft Docs


SPFx以外も含めた、SharePoint上での開発全般については、過去の記事で取り上げました。他の方法との比較などはこちらを参照ください。

SharePoint Onlineのカスタマイズ方法 - 鍋綿ブログ


ここまでに見たことが無い単語があった場合は、とりあえずググってからこの記事を読み直すことをお勧めします。特にJavaScriptやオープン ソースのフレームワークをあまり触ってこなかった方はその辺の前提知識を仕入れる必要があります。

[お勧めキーワード]

 NodeJS - Google 検索

 TypeScript - Google 検索 

 Yeoman - Google 検索

環境構築手順

1.NodeJSインストール

NodeJSの公式サイトから、LTSバージョンをダウンロードします。
ダウンロードしたインストーラを実行して、NodeJSをインストールします。
全て既定の設定で構いません。

f:id:micknabewata:20180805104622j:plain

1.インストーラ起動

f:id:micknabewata:20180805104625j:plain

2.利用条件の許諾

f:id:micknabewata:20180805104629j:plain

3.インストールフォルダの選択

f:id:micknabewata:20180805104633j:plain

4.機能の選択

f:id:micknabewata:20180805104636j:plain

5.インストール実行

f:id:micknabewata:20180805104640j:plain

6.進捗確認画面

f:id:micknabewata:20180805104643j:plain

7.完了

さて、ここまででNodeJSがインストールされ、PATHが通ってnpmコマンドが利用できるようになっています。動作確認がてら、コマンドプロンプトを起動してNodeJSのバージョンを確認します。コマンドは以下です。

node -v

f:id:micknabewata:20180805104604j:plain

8.NodeJSバージョン確認

2.Yeoman と gulp をインストール

npmコマンドを実行して、Yeoman と gulpをインストールします。

npm install -g yo gulp

f:id:micknabewata:20180805104609j:plain

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

3.SPFx用のYeoman ジェネレーターをインストール

YeomanのジェネレーターはMicorsoftから提供されています。以下のコマンドでインストールします。

npm install -g @microsoft/generator-sharepoint

f:id:micknabewata:20180805104617j:plain

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

4.できた!

・・・かなあ?
HelloWorldを作って動作を確認してみてください。 

www.micknabewata.com