はじめに
SPFx(SharePoint Framework)は、SharePointのカスタマイズおよび拡張モデルです。
フレームワークに依存せず、人気のJavaScriptフレームワーク(React、Handlebars、Knockout、Angular、Vue.js、その他) を使用できます。
本記事は、SPFx開発環境構築の備忘録です。
目次
事前準備
- NodeJSがインストールされていることを確認する
下記のコマンドを実行して確認できます。(v14.19.2みたいにバージョンが出てくればOK)
node -v
- SharePoint内にサイトを作成する権限があることを確認する
SharePoint のサイト作成を管理する マイクロソフト公式
Sheapoint内に任意のサイトを作成
サイトの作成ボタンから任意のサイトを作成します。
yaoman、gulpをインストール
下記のコマンドを使用してインストールできます。
npm install -g yo gulp
こんな感じでインストールされます。↓
yaomanとは
yaomanはGoogleが開発したツール群で、プロジェクトひな型作成ツールである「Yo」、依存性管理、パッケージマネジメントを行う「Bower」、ビルドツール、タスクランナーである「Grunt」の三つのツールを統合して提供しています。
今回使用するのは「Yo」のみです。
Yoは、Node.jsで動作し、npmを使用してインストールを行います。公式や、各コミュニティから提供されているジェネレータ、または自作したジェネレータを使用して様々なプロジェクトのひな型を生成できます。
gulpとは
gulpはフロントエンド開発に必要なタスクのランナーです。HTML/CSS/JavaScript の圧縮・最適化、Sassのコンパイルなどを自動で行うことが出来ます。
yaomanジェネレータをインストール
npm install -g @microsoft/generator-sharepoint
Microsoftが提供するSharePoint Framework 用のyaomanジェネレータをインストールします。
最初のプロジェクトを作ってみる
プロジェクト用のディレクトリを作成
mkdir HelloWorld
作ったディレクトリに移動し、yaomanジェネレータでプロジェクトを作成
yo @microsoft/sharepoint
オプションを入力するよう求められます。エンターを押すと規定値が入力されるので、まずは規定値で作成してセットアップがうまくいっているかを確認しましょう。
↓の画像のように正常終了したらセットアップがうまくいっています。お疲れ様でした！
画像のように脆弱性の報告があった場合は、脆弱性を自動修正してくれる「npm audit fix」を実行しておきましょう。
npm audit fix