はじめに

1.はじめに
モダンなSharePointサイトをカスタマイズしたい、独自のWebパーツを作成したい。
そんなニーズに応えるのがSharePoint Framework（以降、SPFx）です。
SPFxを活用すれば、企業のポータルサイトや業務アプリを柔軟に拡張し、より使いやすいSharePointサイトを構築できます。

しかし、SPFxの開発を始めるには、適切な環境を整えることが不可欠です。
本記事では、SPFxの基本的な概念から、必要な開発環境をゼロから構築する方法までをハンズオン形式で説明します。

Webパーツの開発方法や、デプロイの方は別記事で紹介しておりますので、下記の目次よりご参照ください。

2.連載の目次
・SPFxハンズオン開発シリーズ第1回：開発環境の構築（※本記事）
・SPFxハンズオン開発シリーズ第2回：Webパーツの開発
・SPFxハンズオン開発シリーズ第3回：Webパーツのデプロイ

目次

1. SPFxについて
2.SPFx開発環境の構築
3.まとめ
4.最後に

SPFxについて – SPFxとは

〇概要 SharePoint Framework（SPFx）は、SharePointのモダンUIのカスタマイズやWebパーツの開発を行うためのフレームワークです。

〇開発できる機能
SPFxを活用すると、SharePointのWebパーツ・拡張機能の開発やTeamsのUIのカスタマイズなどが可能です。
使用例は下記の通りです。
・Webパーツの開発
　- SharePointページに追加できるカスタムWebパーツ
・拡張機能の開発（SharePointのUIカスタマイズ）
　- ヘッダー・フッターの追加
　- リストの列の表示方法のカスタマイズ
　- リストのツールバーに独自のボタンを追加
　- リスト右クリックメニューに独自の処理を追加
・Teams機能の開発
　- Teamsタブアプリの開発
　- Teams個人アプリの開発

〇開発の流れ
SPFxを用いたアプリ開発は、大きく5つのステップに分かれます。
SPFxハンズオン開発シリーズでは
第1回にてSTEP 01
第2回にてSTEP 02.03
第3回にてSTEP 04.05
の説明を行います。

SPFxについて – システム要件

1.実行環境のシステム要件 SPFxは、SharePointのバージョンによって利用できる機能が異なります。
Microsoft公式ドキュメントも併せてご確認ください。
URL：SharePoint Framework の開発ツールとライブラリの互換性 | Microsoft Learn

SharePointバージョン	サポートされている SPFxバージョン	サポートされている機能
SharePoint Online	すべてのバージョン	すべての機能
SharePoint Server Subscription Edition	v1.4.1 以前	クラシック & モダンのWebパーツモダンページの拡張機能
SharePoint Server 2019	v1.4.1 以前	クラシック & モダンのWebパーツモダンページの拡張機能
SharePoint 2016 Feature Pack 2	v1.1	クラシックでホストされる Webパーツ

開発環境のシステム要件
SPFx開発環境を開発するには、以下のツールが必要となります。

ツール	意味
VS Code	Visual Studio Codeの略称 SPFxのアプリ開発に用いるコードエディター
Node.js	JavaScript実行環境サーバー上でJavaScriptを動かすために必要 SPFxでは16系（LTS版）を推奨
Gulp	SPFxアプリの開発、テスト、ビルド、パッケージ化を行うツール
Yeoman	SPFxのプロジェクト生成ツール
Yeoman SharePoint Generator	SPFxプロジェクトのテンプレートを作成するためのツール必要なファイルや設定を自動で実行

SPFx開発環境の構築

SharePoint Framework（SPFx）を使って開発を行うには、適切な環境を準備することが重要です。本記事では、SPFx開発環境の構築手順をハンズオン形式で説明します。
それぞれのツールの役割について理解しながら、開発環境の構築を進めてください。

〇開発環境の構築手順

STEP 01
SPFxの開発環境の構築に使用するエディタ、VS Code (Visual Studio Code)をインストールします。
サイトのインストーラから最新のVS Codeをインストールします。

URL:Visual Studio Code - Code Editing. Redefined

STEP 02
通常、ブラウザ内で動作するJavaScriptをサーバー上でも動作させるために、JavaScriptの実行環境をインストールします。
Node.jsをインストールします。
本記事作成時点では、SPFxに対応しているバージョンは16となります。

URL:Node.js — Download Node.js®

STEP 03-1
インストールしたVS Codeを起動します。

STEP 03-2
ターミナル>新しいターミナルの順にクリックします。

STEP 03-3
開発中のSPFxアプリのテストや、本番環境向けのビルドやパッケージ化に必要なツールをインストールします。
Gulpをインストールします。
起動したVS Codeのターミナルに以下のコマンドを入力し、Enterを押しコマンドを実行します。

npm install gulp-cli --global

STEP 04
SPFxの開発を始めるためのプロジェクト生成ツールをインストールします。
Yeomanをインストールします。
VS Codeのターミナルに以下のコマンドを入力し、Enterを押しコマンドを実行します。

npm install yo --global

STEP 05
SPFxプロジェクト生成時に必要なファイルや設定を自動で実行するためのツールをインストールします。
SharePoint Generatorをインストールします。
VS Codeのターミナルに以下のコマンドを入力し、Enterを押しコマンドを実行します。

npm install @microsoft/generator-sharepoint --global

以上でSPFxの開発環境の構築は完了となります。

まとめ

SPFxはSharePointのカスタマイズや拡張を行う上で、非常に強力なツールです。標準機能では実現できない柔軟なUIや機能を実装できます。
本記事で紹介した開発環境の構築手順を実践することで、今後SPFxでWebパーツの開発やCSS、JSを活用したカスタマイズを行うための基盤を整えることができます。
次回の記事では、開発環境を活用してSPFxプロジェクトの作成からWeb パーツの作成、動作確認までの流れをハンズオンで紹介します。
SPFx 開発についてより詳しく知りたい方は、ぜひ今後の記事もご確認ください。

最後に

テンダでは、「こんなプロジェクトに挑戦したい」「こんなチームで働きたい」「理想のチームを創りたい」と願う仲間を求めています。カジュアル面談も随時受付中です。ぜひ一度お話ししましょう！

・募集職種一覧
・カジュアル面談の申込
・テンダで働く人や社風について
・テンダのMicrosoftサービス