STAGE 02 — 2-1 / プロジェクトを生み出す

Hello Worldをワークベンチで

考えてみよう

コードはまだ1行も書いていません。それでも、この「生成しただけ」のプロジェクトは、実は画面に表示できる状態になっています。なぜだと思いますか？

ジェネレーターが、動く見本（Hello World相当のWebパーツ）を最初から入れてくれているからです。まずはこの見本を画面に出し、「環境が正しく動く」ことを確認しましょう。自分のコードを書くのは、それが確認できてからで十分です。

最初の一手：開発証明書を信頼する

STAGE 01の最後で予告した通り、ローカル動作確認の前に開発証明書を信頼させます。プロジェクトフォルダの中で、次を実行してください。

heft trust-dev-cert

証明書のインストールを確認するダイアログが出たら、許可します。これでブラウザがローカルサーバーのHTTPSを信頼するようになり、「部品が表示されない」定番のつまずきを防げます。この作業は、そのPCで一度やれば以降は不要です。

ローカルサーバーを起動する

いよいよ起動です。次のコマンドを実行します。

heft start

package.json にある npm run start でも同じです（中身は heft start --clean）。しばらくすると、コンパイルが終わってブラウザが自動で開きます。

ゆみちゃん
ゆみ

heft start は"開発中つけっぱなし"にするコマンド。起動している間、コードを保存するたびに自動で作り直して、画面へ反映してくれるの。止めたいときはターミナルで Ctrl+C。まずは起動しっぱなしで進めよう。

ホストされたワークベンチで見る

昔のSPFxには手元だけで動く「ローカルワークベンチ」がありましたが、今は廃止され、ホストされたワークベンチ（実際のSharePoint上のテスト用ページ）を使います。URLはこの形です。

https://{あなたのテナント}.sharepoint.com/_layouts/workbench.aspx

初回はテナントのアドレスを聞かれることがあります（この設定はSTAGE 05で詳しく扱います）。ワークベンチが開いたら、ページの「＋」ボタンから、いま作った ListViewer を選んで配置してみてください。「Welcome to SharePoint!」のような初期表示が出れば大成功です。

やってみよう

ワークベンチで、ListViewer を配置してみましょう。

1. ワークベンチ中央の「＋」（Webパーツを追加）をクリック 2. 一覧から ListViewer を探して選ぶ 3. 見本のWelcome表示が出ることを確認

確認ポイント

ここまで来れば、環境・生成・起動・表示の一本道がすべて通ったことになります。表示された中身はまだ"見本"ですが、この土台の上に、次のSTAGE以降で「リストの中身を表示する」機能を足していきます。

この記事のまとめ

土台が動くことを確認できました。次のSTAGEでは、この生成物の「中身の地図」を読み、どこを触れば何が変わるのかを掴みます。

用語メモ
heft trust-dev-cert
開発用SSL証明書を信頼させるコマンド。プロジェクト内で実行
heft start
ローカル開発サーバーを起動（npm run start と同じ）。保存で自動反映
ホストされたワークベンチ
/_layouts/workbench.aspx。実SharePoint上のWebパーツ試用ページ