はじめに

SPFx(SharePoint Framework)は、SharePointのカスタマイズおよび拡張モデルです。

フレームワークに依存せず、人気のJavaScriptフレームワーク(React、Handlebars、Knockout、Angular、Vue.js、その他) を使用できます。

本記事は、SPFx開発環境構築の備忘録です。

目次

node -v

サイトの作成ボタンから任意のサイトを作成します。

下記のコマンドを使用してインストールできます。

npm install -g yo gulp

こんな感じでインストールされます。↓

yaomanはGoogleが開発したツール群で、プロジェクトひな型作成ツールである「Yo」、依存性管理、パッケージマネジメントを行う「Bower」、ビルドツール、タスクランナーである「Grunt」の三つのツールを統合して提供しています。

今回使用するのは「Yo」のみです。
Yoは、Node.jsで動作し、npmを使用してインストールを行います。公式や、各コミュニティから提供されているジェネレータ、または自作したジェネレータを使用して様々なプロジェクトのひな型を生成できます。

gulpはフロントエンド開発に必要なタスクのランナーです。HTML/CSS/JavaScript の圧縮・最適化、Sassのコンパイルなどを自動で行うことが出来ます。

npm install -g @microsoft/generator-sharepoint

Microsoftが提供するSharePoint Framework 用のyaomanジェネレータをインストールします。

プロジェクト用のディレクトリを作成

mkdir HelloWorld

作ったディレクトリに移動し、yaomanジェネレータでプロジェクトを作成

yo @microsoft/sharepoint

オプションを入力するよう求められます。エンターを押すと規定値が入力されるので、まずは規定値で作成してセットアップがうまくいっているかを確認しましょう。

↓の画像のように正常終了したらセットアップがうまくいっています。お疲れ様でした！

画像のように脆弱性の報告があった場合は、脆弱性を自動修正してくれる「npm audit fix」を実行しておきましょう。

npm audit fix