SharePointのプログラミングにSPFx と PnP を使おう

皆様こんにちは。
ここ数か月、Sharepoint Online のカスタマイズをやっていました。
HTML5なんて知らないよー。TypeScriptなんて余計わからないよ!
という状態だったのですが、最近出たフレームワークをどうにかこうにか組み込んで、
昔ながらの方法よりはだいぶ楽に仕上げられたと思います。

SharePoint Framework(SPFx)を使おう

最初何のことか全然わからなかったのですが、SharePoint Framework を使うと、Webパーツや拡張機能と
いうものをTypeScriptだけで作成できるそうです。
古い情報だと、SharePointのWebパーツの開発にはオンプレのSharePointサーバーとVisual Studioが必須に
なってしまうところですが、これはもう時代遅れになるようです。

PnP PowerShellと PnPJsを使おう

PnP というのはPowerShell用の操作を色々簡略化できるモジュールです。
SharePoint管理シェルというのがSharePointに付属してきますが、こちらはサービスの管理向けで、コンテンツのアップロードとかフィールドの設定とかの作業の機能がありません。

PnP 以外の選択肢はというと、「CSOM (Client Side Object Model)」というものになります。リストに何か載せるだけでもたくさんコードが必要でした。PnPでカバーできないところが一部あって、こちらも使ったのですが正直煩雑です。(この程度でぼやいちゃだめですか?でもPowerShellって、欲しいものをコマンド一行で取れるものじゃないですか!?)
こちらのサンプルがわかりやすいでしょうか。
結構な行数を使っています。

PnP PowerShellですと

$siteurl='hogehoge.sharepoint.com'
Connect-PnPOnline -Url $siteUrl -Credentials (Get-Credential)
Import-Module Microsoft.Online.SharePoint.PowerShell -DisableNameChecking
Get-PnPListItem -List 'Tasks'
ここまで減ります。すごいですね。


PnPJs は、この機能をJavaScript/TypeScript で使えるようにしたものです。
今回、わたしの仕事では、これをSPFx のWebパーツに組み込んで使いました。


こちらも、コードが劇的に少なくなります。

正直、PnP については日本語の情報が少ないです。わたしもほとんど英語の情報だけで開発してました。
PnPJsについてはリファレンスマニュアルっぽいものがなくて、APIに何がそろっているかすらわからないという。
そしてCSOM用のコードサンプルとPnP用のコードサンプルをどう合体させればいいか全然わからない…。
それでもなんとか動きました。

過去ログ