SharePoint Framework (略称:SPFx) の開発環境をWindows 10上に構築する手順を紹介します。SPFx初心者の方は先にこちらをどうぞ。
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やオープン ソースのフレームワークをあまり触ってこなかった方はその辺の前提知識を仕入れる必要があります。
[お勧めキーワード]
環境構築手順
1.NodeJSインストール
NodeJSの公式サイトから、LTSバージョンをダウンロードします。
ダウンロードしたインストーラを実行して、NodeJSをインストールします。
全て既定の設定で構いません。
さて、ここまででNodeJSがインストールされ、PATHが通ってnpmコマンドが利用できるようになっています。動作確認がてら、コマンドプロンプトを起動してNodeJSのバージョンを確認します。コマンドは以下です。
node -v
2.Yeoman と gulp をインストール
npmコマンドを実行して、Yeoman と gulpをインストールします。
npm install -g yo gulp
3.SPFx用のYeoman ジェネレーターをインストール
YeomanのジェネレーターはMicorsoftから提供されています。以下のコマンドでインストールします。
npm install -g @microsoft/generator-sharepoint