１．SharePoint Framework（SPFx）の概要
SPFxは、SharePoint Online モダンサイトに対してJavaScript / CSSでのカスタマイズを導入するための唯一の仕組みです。開発はJavaScriptで行います。
SPFxで開発できるものは以下です。
・Webパーツ
・ビューにカスタムのコマンドを追加
・ビューに表示する列の描画をカスタマイズ
・サイト全体のヘッダ開発
・サイト全体のフッタ開発
・サイト全体にJavaScript / CSSを埋め込む
２．開発環境設定手順
参考ページ：https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/set-up-your-development-environment
①Node.js. を以下のページからインストールする。（.msiファイル）
https://nodejs.org/dist/latest-v10.x/
※最新バージョンは14.X.Xとなりますが、現在SharePoint Frameworkに対応していないため、10.X.Xの最新バージョンをインストールしてください。
②Node.js.command promptを管理者として実行する。
③必要な開発ツールをインストールするために、以下のコマンドを入力する。
・npm install yo --global
・npm install gulp --global （Gulp のインストール）
・npm install yo --global （Yeoman のインストール）
・npm install @microsoft/generator-sharepoint --global （Yeoman の SharePoint ジェネレーターをインストール）
④SharePoint のクライアント側の最初の Web パーツを作成する。
参考ページ：https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
（例）以下のWebパーツを作成すると、「HelloWorld」と表示される。
Ⅰ．任意の場所に以下のコマンドを使用してディレクトリを作成する。
md helloworld-webpart
Ⅱ、Ⅰで作成したディレクトリに移動する。
cd helloworld-webpart
Ⅲ．YeomanのSharePointジェネレーターを実行して、新しいHelloWorldのWeb パーツを作成する。
yo @microsoft/sharepoint
Ⅳ．ダイアログ ボックスが表示されるので、今回は以下で対応する。
・What is your solution name?
→helloworld-webpart
・Which baseline packages do you want to target for your component(s)?
→SharePoint Online only (latest)
・Where do you want to place the files?
→Use the current folder
・Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?
→No
・Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant?
→No
・Which type of client-side component to create?
→WebPart
・What is your Web part name?
→HelloWorld
・What is your Web part description?
→HelloWorld description
・Which framework would you like to use?
→No JavaScript framework
⑤開発者用自己署名証明書を以下のコマンドで取得する。
・gulp trust-dev-cert
※SharePoint Framework Yeomanジェネレーターでプロジェクトが作成された後、プロジェクトのルート フォルダー内で行う。
⑥以下のコマンドを入力して、開発環境を開く
・gulp serve
