SharePoint Framework (略称：SPFx) で、最初のWebパーツを開発する手順をご紹介します。SPFx初心者の方は先にこちらをどうぞ。
[目標]
- 固定文字列(Hello World)を表示する単純なWebパーツを開発する
[前提]
- SPFxの開発環境が整っていること
- エディタとしてVisual Studio Codeがインストールされていること
[参考] SharePoint Framework (SPFx) 開発環境構築 (Windows 10) - 鍋綿ブログ
- 1.プロジェクト用のフォルダを作成
- 2.Yeoman ジェネレーターを使用してプロジェクトを作成
- 3.プレビュー用の開発者証明書をインストール (任意)
- 4.ローカルWebサーバーを起動して動作確認
- 5.コードを開いてみる
- 7.大団円
1.プロジェクト用のフォルダを作成
任意の場所にフォルダを作成します。
この後作成するHello Worldプロジェクトの関連ファイルは、全てこのフォルダ内に作成されます。この記事では、以下の場所にプロジェクトフォルダを作成したものとします。
md C:\work\SPFx\HelloWorld
2.Yeoman ジェネレーターを使用してプロジェクトを作成
コマンドプロンプトを起動して上記で作成したプロジェクトフォルダに移動し、Yeoman ジェネレーターでプロジェクトを作成します。
cd C:\work\SPFx\HelloWorld
yo @microsoft/sharepoint
yoコマンドを実行すると、プロジェクトの構成時に指定できるオプションを色々と聞かれます。今回は全て既定値とします。(つまりとりあえずEnter押しときます。) 指定可能なオプションについては公式サイトをご確認ください。
Yeoman の SharePoint ジェネレーターを使用したスキャフォールディングのプロジェクト | Microsoft Docs
3.プレビュー用の開発者証明書をインストール (任意)
SPFxのデバッグは、SharePoint Online でWebパーツをホストした状態で実施しますが、開発端末でWebサーバーを起動した状態でも実施できます。( SharePointに接続するコードは当然テストできませんが。 ) この時、何もしないとセキュリティの警告を受けてしまいますので、SPFxに付属する開発者証明書をインストールしてあげます。
以下をコマンドプロンプトに打ち込みます。実行すると表示される怪しげなダイアログで「OK」をクリックします。
gulp trust-dev-cert
4.ローカルWebサーバーを起動して動作確認
ここまででプロジェクトは正常に作成されています。とりあえずローカルWebサーバーで確認してみます。以下をコマンドプロンプトに打ち込みます。
gulp serve
すると空のページがブラウザに表示されます。「+」ボタンで開発したWebパーツを追加できます。
はい、表示できました！右上の「Preview」ボタンでPCブラウザでの見た目が確認できます。
5.コードを開いてみる
さて、エディタにVisual Studio Codeを使用しているならば、codeコマンドでフォルダを開くことができます。コマンドプロンプトで以下を実行します。
code .
Webパーツの画面描画は、src > webparts > HelloWorldWebPart.ts が担当しています。ソースコードとブラウザで表示したプレビューとを見比べてみてください。
7.大団円
以上、Hello Worldのご紹介でした。
この記事では以下を参考にさせて頂きました。
SharePoint のクライアント側の最初の Web パーツを作成する (Hello World パート 1) | Microsoft Docs
