SharePoint Framework (SPFx) とは？— 最新のカスタム開発手法を解説！

teams クラウド サーバ

SharePoint Online のカスタマイズを考えたことはありますか？
従来の SharePoint では、JavaScript の埋め込みやカスタム Web パーツの開発が可能でしたが、現在は SharePoint Framework (SPFx) が標準的な開発手法となっています。

本記事では、SPFx とは何か、特徴、メリット、活用例、開発手順について解説します。

1. SharePoint Framework (SPFx) とは？

SharePoint Framework (SPFx) は、モダンな SharePoint サイトに適したカスタム開発フレームワークです。Microsoft が提供する開発環境であり、以下のような特徴があります。

🔹 SPFx の主な特徴

✅ クライアントサイド開発
SPFx は完全に クライアントサイド（フロントエンド）で動作するため、従来のサーバーサイド開発（例: .NET）よりも軽量で高速です。

✅ React、TypeScript などの最新技術を活用
React、TypeScript、Node.js などの最新の Web 技術と組み合わせて開発できます。

✅ クラウドネイティブ
SPFx は SharePoint Online 向けに最適化されており、オンプレミス環境（SharePoint Server 2016 以降）にも対応しています。

✅ 従来のスクリプト埋め込みと異なり、安全でメンテナブル
JavaScript の直接埋め込み（Content Editor Web Part など）はセキュリティリスクがあるため、SPFx を使うことで安全かつメンテナブルなカスタマイズが可能になります。

✅ SharePoint / Teams との統合が容易
作成した SPFx Web パーツは Microsoft Teams でも利用可能 です。

2. SPFx の活用例

SPFx を活用すると、以下のような機能を実装できます。

活用例 説明
カスタム Web パーツ SharePoint のページに独自の Web パーツを追加
動的なリストデータの表示 API を使い、SharePoint リストのデータをリアルタイム表示
Microsoft Graph API との連携 Outlook カレンダー、Teams のメッセージなどを表示
フォームのカスタマイズ ユーザー入力フォームを動的に作成
通知システムの構築 特定の条件で Teams や SharePoint に通知

3. SPFx 開発のための技術スタック

SPFx はモダンな Web 開発の技術を採用しています。

技術 役割
Node.js ビルドツールや開発環境の実行
TypeScript 型安全な JavaScript
React UI コンポーネント作成
Office UI Fabric (Fluent UI) Microsoft のデザインライブラリ
PnP JS SharePoint のデータ操作を簡単にするライブラリ

4. SPFx 開発手順

🛠 必要なツールの準備

SPFx の開発には、以下のツールをインストールする必要があります。

  1. Node.js（バージョン 18.x 推奨）

  2. Yeoman & SharePoint Generator（SPFx のひな形を作成）

  3. Gulp（ビルドタスク管理）

  4. Visual Studio Code（コードエディタ）

以下のコマンドを実行し、環境をセットアップします。

sh
 
# Node.js をインストール（事前に https://nodejs.org からダウンロード）
npm install -g yo gulp
 
# Yeoman SharePoint Generator をインストール
npm install -g @microsoft/generator-sharepoint

📝 SPFx プロジェクトの作成

プロジェクトフォルダを作成し、SPFx の Web パーツを作成します。

sh
 
# 新規プロジェクトフォルダを作成
mkdir spfx-sample cd spfx-sample
 
# SPFx プロジェクトを作成（対話形式で設定）
yo @microsoft/sharepoint

🔹 設定時のポイント

  • ソリューション名 → spfx-sample（自由に変更可）

  • デプロイ環境 → SharePoint Online のみ を選択

  • JavaScript フレームワーク → React を選択（または No framework）

🖥 開発用サーバーの起動

作成した Web パーツをローカル環境でテストするには、開発サーバーを起動します。

sh
gulp serve

開発用の Workbench（開発者向けプレビュー環境） が起動し、ブラウザでカスタム Web パーツを確認できます。

📌 Web パーツのカスタマイズ（React 使用例）

デフォルトの src/webparts/HelloWorld/HelloWorldWebPart.ts を編集し、カスタム UI を作成できます。

💡 React を使ってリストデータを取得するサンプル

import * as React from "react";
import { sp } from "@pnp/sp/presets/all";
 
const ListItems = () => {
　const [items, setItems] = React.useState([]);
 
　React.useEffect(() => {
　　sp.web.lists.getByTitle("タスク一覧").items.get().then(setItems);
　}, []);
 
　return (
　　<ul> {
　　　items.map((item: any) => (
　　　　<li key={item.Id}>{item.Title}</li>
　　　))}
　　</ul>
　);
};
 
export default ListItems;

5. SPFx のデプロイ方法

作成した SPFx Web パーツを SharePoint にデプロイする手順です。

📌 SharePoint App Catalog にアップロード

  1. gulp bundle --ship を実行（最適化バンドル）

  2. gulp package-solution --ship を実行（.sppkg パッケージ作成）

  3. SharePoint App Catalog に .sppkg ファイルをアップロード

  4. SharePoint Online のサイトで Web パーツを追加

6. まとめ：SPFx はモダンな SharePoint 開発の必須スキル！

💡 SPFx を活用すれば、SharePoint Online をより柔軟にカスタマイズ可能！

項目 説明
SPFx の特徴 クライアントサイド開発、React・TypeScript対応
主な活用例 カスタム Web パーツ、リストデータの動的表示、Teams 連携
技術スタック Node.js, React, TypeScript, Fluent UI
開発手順 Yeoman で雛形作成 → Gulp で開発 → App Catalog でデプロイ

Microsoft Teams との統合も容易なため、社内ポータルの強化にも最適です。
ぜひ SPFx を活用し、SharePoint をより便利にカスタマイズしましょう！ 🚀