SharePoint Framework Web パーツ開発 その2:ビルド&デバッグ

投稿者: | 2020年2月9日

はじめに

この記事では、SharePoint Framework で作成した Web パーツをビルドおよびデバッグするための手順を説明します。
まだ SharePoint Framework で Web パーツを作成していない場合は、以下の記事を参考に Web パーツを作ってください。

SharePoint Framework Web パーツ開発 その1:プロジェクトの作成

ビルド手順

プロジェクトを開き docker を起動

※「SharePoint Framework Web パーツ開発 その1:プロジェクトの作成」の続きで作業を行う場合は、このステップは不要です。

Visual Studio Code を起動してメニューから ファイル > フォルダーを開く をクリックし、プロジェクトフォルダを開きます。
続いて、メニューから 表示 > ターミナル をクリックし、PowerShell のターミナルを開きます。
ターミナルに、 Docker を起動するためのコマンドを入力し実行します。

無事、Docker が起動すると、以下のような表示になります。

以後、上記のプロンプトにコマンドを入力していきます。

ビルド&実行

Web パーツのビルドと Web パーツの実行環境の起動は以下のコマンドでまとめて行います。

コマンドを実行するとターミナルに以下のようにずらずらと文字が並びます。

最終行にある Finished subtask ‘reload’ が表示されたら Web パーツをデバッグ実行するための環境の起動が完了となります。

デバッグ手順

VSCode からデバッグ実行

VSCode のサイドバーからデバッグボタン(下図左下の赤丸)をクリックし、右上の [デバッグと実行] の右隣にあるプルダウン(下図中央上の赤四角)に「Local workbench」と表示されている状態で、▶ ボタンをクリックします。
なお、デバッグボタンが表示されない場合は、デバッグ用の拡張機能がインストールされていないことが考えられるので、以下の記事を参考に「Visual Studio Code Debugger for Chrome のインストール」をインストールしてください。
Docker を使った SharePoint Framework 開発環境の構築 その1

すると、Chrome ブラウザが起動し、下図の通り Web パーツの動作確認をするための Local Workbench ページが表示されます。

なお、はじめて Local Workbench を表示する場合、以下のような Chrome ブラウザのセキュリティ警告ページが表示されるかと思いますが、ここでは特に問題は無いので [詳細設定] を押して先に進めてください。

Local Workbench にテスト対象 Web パーツを配置

Local Workbench は通常のモダンページと同じなので、モダンページと同じ操作でデバッグ対象の Web パーツを配置します。
+ ボタンをクリックすると、Web パーツの一覧の中にデバッグ対象の「LinkListWebPart」が追加されているので、これをクリックしてページに配置します。

Web パーツ一覧

Web パーツを配置したところ

デバッグ実施

デバッグは、Chrome ブラウザの F12 開発者ツールか VSCode で行います。
VSCode の方がソースコードの編集なども直ぐにできるため、今回は VSCode でデバッグします。
と言っても特に難しいことはなく、ソースコード上にブレイクポイントを置いたり変数のウォッチをしたり、他の開発と同様に行うことができます。
例えば、LinkListWebPart.tsx ファイルにブレイクポイントを置いて、Local Workbench で Web パーツを配置しなおすと、きちんとブレイクポイントが効いていることが確認できます。

なお、デバッグ実行中に VSCode 上でソースコードを編集して保存すると、変更したソースコードがすぐにビルドされてデバッグ中の Web パーツに反映されるため、変更の度に自分でビルドしなおしてデプロイしてというような手順が不要なため、サーバーサイド で動く従来の Web パーツの開発に比べると格段に生産性が上がります。

デバッグの終了

デバッグが完了したら、Chrome ブラウザを閉じて、VSCode のターミナル上でキーボードの Ctrl + c キーを押下して、実行中の環境を停止させます。
停止すると以下のようなメッセージがターミナルに表示されます。

 

以上で、Web パーツのビルドとデバッグは完了です。
Web パーツのソースコードの説明などはまた別記事に掲載していきたいと思います。