SPFxとは何か

SPFx＝SharePointを拡張するための公式の道具

SPFx（SharePoint Framework） とは、SharePoint Online や Microsoft Teams・Viva のページに、自分で作った部品や機能を追加するための、Microsoft公式の開発フレームワークです。

SharePointは、そのままでも「お知らせ」「ドキュメントライブラリ」など多くの部品を持っています。でも、「自分たちの業務に合わせた専用の一覧表がほしい」 のような要望は、標準機能だけでは叶いません。そこでSPFxの出番です。SPFxを使えば、自分でデザインした部品を、あたかも最初からあったかのようにSharePointのページへ埋め込めるのです。

作れるものは、大きく2種類あります。

• Webパーツ（Web Part） — ページに配置する「部品」。独自の一覧表、お知らせ、ダッシュボードなど、目に見えるUIのほとんどはこれ
• 拡張機能（Extension） — ページ全体に効く「仕掛け」。ヘッダー・フッターの追加、リスト項目への通知など、部品というより"環境"に近いもの

SharePointサイトに並ぶ独自の部品たちは、その多くがこのWebパーツとして作られています。

いちばん大事な特徴：ブラウザ側で動く

SPFxを理解するうえで、最初に押さえてほしい性質があります。それは、SPFxのコードは「サーバー」ではなく「ブラウザ」で動くということです。これを クライアントサイド開発 と呼びます。

昔のSharePoint拡張は、サーバーに直接プログラムを載せる方式が主流でした。しかしSharePoint Onlineでは、Microsoftが管理するサーバーに手を入れることはできません。そこでSPFxは、あなたの書いたコードを利用者のブラウザに届けて、そこで動かすという方式を採ります。

この「ブラウザで動く」という一点が、これから使う道具のすべてを決めます。ブラウザ向けのモダンなWeb開発の世界——つまり TypeScript（型のあるJavaScript）、React（画面を組み立てるライブラリ）、そして Node.js / npm（それらを動かす土台）——を、SPFxはそっくりそのまま使うのです。

どこで動く？——SharePointだけではない

SPFxで作った部品は、SharePointのモダンページはもちろん、Microsoft Teams のタブや、Viva Connections のダッシュボードカードとしても動かせます。一度作った部品を複数の場所で使い回せるのは、SPFxの大きな強みです。

とはいえ、最初の一歩は欲張らないこと。この講座ではまず、SharePoint Online上で動く、いちばん基本的なWebパーツを、0から作って配置できるところまでを目標にします。