SPFxハンズオン開発シリーズ 第1回：開発環境の構築

はじめに

1.はじめに

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

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

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

2.連載の目次

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

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
の説明を行います。

スクリーンショット 2025-03-25 154246.png

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

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

SharePointバージョンサポートされている
SPFxバージョン		サポートされている機能
SharePoint Onlineすべてのバージョンすべての機能
SharePoint Server
Subscription Edition		v1.4.1 以前クラシック & モダンのWebパーツ
モダンページの拡張機能
SharePoint Server 2019v1.4.1 以前クラシック & モダンのWebパーツ
モダンページの拡張機能
SharePoint 2016
Feature Pack 2		v1.1クラシックでホストされる
Webパーツ
  1. 開発環境のシステム要件
    SPFx開発環境を開発するには、以下のツールが必要となります。
ツール意味
VS CodeVisual Studio Codeの略称
SPFxのアプリ開発に用いるコードエディター
Node.jsJavaScript実行環境
サーバー上でJavaScriptを動かすために必要
SPFxでは16系（LTS版）を推奨
GulpSPFxアプリの開発、テスト、ビルド、パッケージ化を行うツール
YeomanSPFxのプロジェクト生成ツール
Yeoman SharePoint GeneratorSPFxプロジェクトのテンプレートを作成するためのツール
必要なファイルや設定を自動で実行

詳細な手順や設定方法については、Qiitaの記事をご覧ください。

記事の続きを読む