📝

SharePoint Framework の概要と HelloWorld までのメモ

2025/04/09に公開

SharePoint Online で構成できるサイトは、以前のクラシックサイトでは “スクリプトエディタ” というものが存在していて、それを利用する事で HTML/CSS/JavaScript を用いたサイトの構成が可能でした。　ただ現時点で利用できる モダンサイト では “スクリプトエディタ” が存在せず、より柔軟にカスタマイズを行うには SharePoint Framework の利用が推奨されています。
ここでは SharePoint Framework を利用するための触りの部分だけ試してみます。
!モダンサイトから消えた理由はメンテされないスクリプトの存在とか、カオスになったからかな・・・と思いつつ、結局 PowerPlatform 系でも同じ事になっている気がしなくもなく…
!有志が作成した、モダンサイトにスクリプトエディタを追加する方法もありますが、当然ですが管理者権限が必要ですし、結果的にメンテナンスされない状態になるコードが反乱しても困ると思うので利用には注意がいると思います。

https://www.isoroot.jp/blog/4319/

 開発環境の準備SharePoint Framework を利用して開発するための環境を整えます。 Microsoft 365 のテナントは必要なので、評価版含めてなにかしらの手段で用意しましょう。
開発環境の対応プラットフォームは Windows, Linux, Mac などがあるようですが、今回は Windows 11 の環境で試してみたいと思います。
!以降の手順では Node.js、npm、Gulp、Yeoman、TypeScript、React などの知識が必要になります。 最低限各ツール等がどういう役割をするのかぐらいは、Copilot などで概要を確認しておくと良いでしょう。

 必要なツール群のインストール!以下、公式ドキュメントのリンク先は英語です。英語の方が情報が新しいため、英語のサイトをブラウザ翻訳で見る事を推奨します
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
公式ドキュメントに準じると、必要なものは以下の通りです。 WSL2/Ubuntu で環境を整えても良いのですが、今回は Windows 11 上で試してみます。
Node.js (v18 LTS, 日本語サイトの情報は古いので英語の方を見ましょう)
Visual Studio Code
Gulp, Yeoman, Yeoman SharePoint Generator
最新のブラウザ (Edge, Chrome, Firefox 等)

 Node.js のインストール公式サイトのダウンロードでバージョンを選択すれば手順が提示されるのでそれに従います。 ただそのままだと PATH が通らないので少し工夫します。
https://nodejs.org/ja/download
# fnmをダウンロードしてインストールする：
winget install Schniz.fnm

# Node.jsをダウンロードしてインストールする：
fnm install 18

# (追記) Notepad で PROFILE を開きます
notepad.exe $PROFILE

# (追記) 新しく "Microsoft.PowerShell_profile.ps1" というファイルを作成します。 ファイルの中に以下の内容を入力します。
fnm env --use-on-cd --shell powershell | Out-String | Invoke-Expression

# PowerShell を再起動し、Node.jsのバージョンを確認する：
node -v # "v18.20.8"が表示される。

# npmのバージョンを確認する：
npm -v # "10.8.2"が表示される。

 Gulp, Yeoman, Yeoman SharePoint Generator のインストールNode.js を入れる事ができたので、関連するツールチェーンもインストールします。
npm install gulp-cli yo @microsoft/generator-sharepoint --global

 Visual Studio Code と最新のブラウザ適宜ダウンロード/インストールをしてください。
https://code.visualstudio.com/download

 オプション公式サイトでは開発には必要ないが、便利なものとして以下のツール群が提示されているので必要に応じてリンク先を参照してみてください。


ツール名
説明
主な用途・特徴


Fiddler
HTTP/HTTPS のトラフィックをキャプチャし、通信内容を解析できるプロキシーツール。
通信のデバッグ、パフォーマンス測定、リクエスト・レスポンスの検証。

Postman
REST API や GraphQL などの API をテスト、デバッグできるツール。
APIリクエスト作成、テスト、ドキュメンテーション生成。

Windows Terminal
複数のタブやカスタマイズ機能を持つ、最新の Windows 向けターミナルエミュレーター。
CLI作業の効率化、PowerShell、Cmd、WSLなど複数シェルの統合。

Cmder for Windows
Windows 向けの高機能ターミナルエミュレーター。Unix系の環境に近い操作感を提供。
コンソール作業の快適化、カスタマイズ性に優れたCLI環境。

Oh My Zsh
Zsh シェル向けのカスタマイズフレームワークで、豊富なテーマ・プラグインが利用可能。
ターミナルの見た目や操作性の向上、効率的なコマンド補完。

Git source control tools
Git を利用したバージョン管理ツール。リポジトリの管理や履歴追跡をサポート。
分散型バージョン管理、ブランチ操作、マージ、リモート連携など。

Teams Toolkit VS Code extension
Microsoft Teams アプリ開発をサポートする VS Code 拡張ツール。
Teamsアプリの作成、ローカルデバッグ、パッケージ作成、デプロイ。

SharePoint Framework Toolkit VS Code extension
SharePoint Framework (SPFx) 開発を支援する VS Code の拡張ツール。
SPFx ソリューションの作成、デバッグ、ビルド、パッケージングの効率化。


 最初のサンプル (HelloWorld)まずは公式のチュートリアルに合わせて試してみます。
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

 Web パーツプロジェクトの作成Yeoman, Yeoman SharePoint Generator を利用して最初のテンプレートを作成してみます。
PowerShell を起動
新規にディレクトリの作成し、Webパーツの作成を実施mkdir helloworld
cd helloworld
yo @microsoft/sharepoint

# ウィザードに従いプロジェクトを作成する
# 1. What is your solution name? **HelloWorld**
# 2. Which type of client-side component to create? **WebPart**
# 3. What is your Web part name? **HelloWorld**
# 4. Which template would you like to use? **No framework**
以下、実行例
展開されたフォルダ構成は以下のような形でした (ここはGPTさんに問い合わせ)


フォルダ/ファイル
説明


.vscode
Visual Studio Code のワークスペース設定や拡張機能に関する構成ファイルなどが入るディレクトリ。

config
Gulp タスクや TypeScript、lint、その他のビルド設定ファイルが格納される。SPFx 用の各種コンフィグ（serve.json、package-solution.json など）も入る。

dist
ビルドやバンドルされたファイルの最終出力先。※ 開発中には一時的に生成物を格納し、本番用には release ディレクトリを用いる場合もある。

lib
TypeScript がコンパイルされた結果（JavaScript）の中間生成物が格納されるディレクトリ。SPFx で gulp build や gulp bundle を実行すると生成される。

node_modules
npm でインストールした依存パッケージが格納される。

release

gulp bundle --ship や gulp package-solution --ship など、本番配布用ビルドを行う場合に生成される成果物を置くためのディレクトリ。

sharepoint
SharePoint 関連のアーティファクトを格納するフォルダ。ここに生成される solution フォルダには .sppkg など最終的にデプロイするパッケージが入る。

src
ソースコードを置くメインディレクトリ。TypeScript/JavaScript、React コンポーネント、scss/css ファイルなどが含まれる。

teams
Microsoft Teams 向けのソリューション（Teams タブなど）を構成する場合に生成される場合がある。Teams Toolkit 連携機能などが含まれることも。

temp
一時ファイルなどを保管するフォルダ。開発時の一時ビルドファイルやキャッシュが含まれることが多い。

gulpfile.js
Gulp タスクを定義するメインの設定ファイル。SPFx 特有のタスク（build, serve, bundle など）が定義されている。

package.json
プロジェクトで使用する npm パッケージやスクリプト、プロジェクトのメタ情報が定義されている。

tsconfig.json
TypeScript のコンパイル設定ファイル。ターゲットの ECMAScript バージョンやコンパイルオプションが記述されている。

.npmignore / .gitignore
npm / Git で無視するファイルやディレクトリを指定する。


 ローカルでの実行Gulp を利用して、作成したプロジェクトをレビューしてみます。
# 開発用のオレオレ証明書を信用する (ポップアップウインドウがでるので信頼しましょう)
gulp trust-dev-cert

# ローカルWebサーバ起動に必要な SharePoint のドメイン名を指定
# (ここで指定するドメインは自身が持っている Microsoft 365 環境のドメインです)
Set-Item -Path Env:SPFX_SERVE_TENANT_DOMAIN -Value "XXXX.sharepoing.com"

# 環境変数の確認
$env:SPFX_SERVE_TENANT_DOMAIN

# ローカルWebサーバの起動
gulp serve
サーバ起動後しばらくするとブラウザが起動され、実際のプレビュー/テスト画面になります。

この際起動直後に下記のメッセージが表示される事が(多々)ありますが、Gulp がちゃんと起動し終わっていないと出てくるメッセージですので、暫く待ってからブラウザを更新して確認しましょう。
Web パーツはツールボックスで表示されません。"gulp serve" が Web パーツ プロジェクトで実行されていることをご確認ください。"gulp serve" が実行されたら、ページを更新してください。
正しく動作すると下記のように表示されます。 これが HelloWorld にあたります。

 パッケージの作成とデプロイ
 ソリューションのパッケージ化https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn
次にパッケージ化とデプロイを試してみます (公式ドキュメントには Microsoft 365 CDN ～とありますが、今回はそこはスルーしています)
# ソリューションのバンドル化
gulp bundle --ship

# ソリューションのパッケージ化
gulp package-solution --ship
パッケージ化が完了すると、プロジェクトディレクトリ内の "sharepoint/solution" フォルダ内にパッケージ (拡張子: .sppkg) が作成されます。 これを SharePoint Online にアップロードします。

 SharePoint Online へのアプリアップロードSharePoint 管理センターを開く。 Microsoft 管理センター -> 左下のリンクから SharePoint を選択

https://admin.microsoft.com/

SharePoint 管理センター -> その他の機能 -> アプリ を選択
アプリの管理画面が開くので、作成したファイル (.sppkg) をアップロードします。 この際に個々のサイトが全体に展開するのか選択できます (今回は既定値で対応)


結果として各SharePoint のサイトから新しいアプリとしてサイトに追加できるようになります。ここまでが基本的な動きになります。

 Visual Studio Code 拡張機能についてここまで公式の手順に従いコマンドベースで実施してきましたが、Microsoft 365 のコミュニティベースながら Visual Studio Code の拡張機能も提供されています。
開発環境を整理するための開発ツールチェーンの導入や、最初のテンプレート作成など、コマンドではなく GUI ベースで出来るようになるので、GUI の方が良い方は試してみると良いと思います。
SharePoint Framework Toolkit VS Code extension

 まとめ取り急ぎ最初の HelloWorld の部分まで試してみました。 実際には Webパーツで何が出来るのか。コードの中身は～など深堀りをしていく必要はあるのですが、とりあえず試してみたい方の参考になれば幸いです。

 参考情報
 アップデート情報ほか、ISV情報など (なにが作れるのかのイメージ)https://techcommunity.microsoft.com/blog/spblog/most-widely-used-sharepoint-framework-isvs-from-the-store---march-2025/4401537

 環境変数 : SPFX_SERVE_TENANT_DOMAIN の話https://www.voitanos.io/blog/set-spfx-hosted-workbench-test-site/

 公式のチュートリアル (コードの説明とかはこちらを参照)https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn

フォルダ/ファイル	説明
.vscode	Visual Studio Code のワークスペース設定や拡張機能に関する構成ファイルなどが入るディレクトリ。
config	Gulp タスクや TypeScript、lint、その他のビルド設定ファイルが格納される。SPFx 用の各種コンフィグ（`serve.json`、`package-solution.json` など）も入る。
dist	ビルドやバンドルされたファイルの最終出力先。※ 開発中には一時的に生成物を格納し、本番用には `release` ディレクトリを用いる場合もある。
lib	TypeScript がコンパイルされた結果（JavaScript）の中間生成物が格納されるディレクトリ。SPFx で `gulp build` や `gulp bundle` を実行すると生成される。
node_modules	npm でインストールした依存パッケージが格納される。
release	`gulp bundle --ship` や `gulp package-solution --ship` など、本番配布用ビルドを行う場合に生成される成果物を置くためのディレクトリ。
sharepoint	SharePoint 関連のアーティファクトを格納するフォルダ。ここに生成される `solution` フォルダには `.sppkg` など最終的にデプロイするパッケージが入る。
src	ソースコードを置くメインディレクトリ。TypeScript/JavaScript、React コンポーネント、scss/css ファイルなどが含まれる。
teams	Microsoft Teams 向けのソリューション（Teams タブなど）を構成する場合に生成される場合がある。Teams Toolkit 連携機能などが含まれることも。
temp	一時ファイルなどを保管するフォルダ。開発時の一時ビルドファイルやキャッシュが含まれることが多い。
gulpfile.js	Gulp タスクを定義するメインの設定ファイル。SPFx 特有のタスク（build, serve, bundle など）が定義されている。
package.json	プロジェクトで使用する npm パッケージやスクリプト、プロジェクトのメタ情報が定義されている。
tsconfig.json	TypeScript のコンパイル設定ファイル。ターゲットの ECMAScript バージョンやコンパイルオプションが記述されている。
.npmignore / .gitignore	npm / Git で無視するファイルやディレクトリを指定する。

ツール名	説明	主な用途・特徴
Fiddler	HTTP/HTTPS のトラフィックをキャプチャし、通信内容を解析できるプロキシーツール。	通信のデバッグ、パフォーマンス測定、リクエスト・レスポンスの検証。
Postman	REST API や GraphQL などの API をテスト、デバッグできるツール。	APIリクエスト作成、テスト、ドキュメンテーション生成。
Windows Terminal	複数のタブやカスタマイズ機能を持つ、最新の Windows 向けターミナルエミュレーター。	CLI作業の効率化、PowerShell、Cmd、WSLなど複数シェルの統合。
Cmder for Windows	Windows 向けの高機能ターミナルエミュレーター。Unix系の環境に近い操作感を提供。	コンソール作業の快適化、カスタマイズ性に優れたCLI環境。
Oh My Zsh	Zsh シェル向けのカスタマイズフレームワークで、豊富なテーマ・プラグインが利用可能。	ターミナルの見た目や操作性の向上、効率的なコマンド補完。
Git source control tools	Git を利用したバージョン管理ツール。リポジトリの管理や履歴追跡をサポート。	分散型バージョン管理、ブランチ操作、マージ、リモート連携など。
Teams Toolkit VS Code extension	Microsoft Teams アプリ開発をサポートする VS Code 拡張ツール。	Teamsアプリの作成、ローカルデバッグ、パッケージ作成、デプロイ。
SharePoint Framework Toolkit VS Code extension	SharePoint Framework (SPFx) 開発を支援する VS Code の拡張ツール。	SPFx ソリューションの作成、デバッグ、ビルド、パッケージングの効率化。

開発環境の準備

必要なツール群のインストール

Node.js のインストール

Gulp, Yeoman, Yeoman SharePoint Generator のインストール

Visual Studio Code と最新のブラウザ

オプション

最初のサンプル (HelloWorld)

Web パーツプロジェクトの作成

ローカルでの実行

パッケージの作成とデプロイ

ソリューションのパッケージ化

SharePoint Online へのアプリアップロード

Visual Studio Code 拡張機能について

まとめ

参考情報

アップデート情報ほか、ISV情報など (なにが作れるのかのイメージ)

環境変数 : SPFX_SERVE_TENANT_DOMAIN の話

公式のチュートリアル (コードの説明とかはこちらを参照)

Discussion