実データで動作確認する

テナントのアドレスを教えておく

heft start が「どのSharePointのワークベンチを開くか」を知るために、テナントのアドレスを環境変数で教えます。PowerShellで次を実行します（yourtenant は自分のものに置き換え）。

$env:SPFX_SERVE_TENANT_DOMAIN = "yourtenant.sharepoint.com"

これはそのPowerShellを開いている間だけ有効です。毎回入れるのが面倒なら、setx で恒久的に設定できます（設定後は端末を開き直します）。

setx SPFX_SERVE_TENANT_DOMAIN "yourtenant.sharepoint.com"

この値は、config/serve.json の initialPage にある {tenantDomain} の部分に自動で差し込まれます。

起動して、実データを表示する

準備ができたら起動します。

heft start

ブラウザでホストされたワークベンチが開きます（https://yourtenant.sharepoint.com/_layouts/workbench.aspx）。中央の「＋」から ListViewer を配置してください。今度は見本ではなく、あなたが作った「お知らせ」リストの本物の内容が一覧で表示されるはずです。

うまく出ないときは、開発者ツールで調べる

もし何も表示されない・エラーが出るときは、当てずっぽうで直さず、ブラウザの開発者ツール（F12キー）で原因を見ます。見るのは2か所です。

• Console（コンソール）タブ … 赤いエラーメッセージが出ていないか。列名の間違いなどはここに出ます
• Network（ネットワーク）タブ … getByTitle('...')/items の通信を探し、そのステータスを見る

Networkのステータスは、原因を教えてくれます。

ステータス	ありがちな原因	対処
200 だが中身が空	リストは合っているがデータが0件	サンプルを入れたか確認
404	リスト名が違う	listName（設定パネル）を実際の名前に
400	列の内部名が違う（$selectの綴り）	Field= で内部名を再確認
403	アクセス権がない	そのリストを見られるアカウントか確認

よくあるつまずきと対処

• 項目は出るが、本文や日付が空 … 列の内部名が違っている可能性大。Body / PublishDate のスペルを、リストの Field= と突き合わせる
• 部品が一切表示されない／証明書の警告 … heft trust-dev-cert を実行し忘れ。プロジェクト内で実行し直す
• ローカルのworkbench.aspxが真っ白 … 昔のローカルワークベンチは廃止。必ずテナントの/_layouts/workbench.aspx（ホスト版）を使う

この記事のまとめ

• 実データ確認はホストされたワークベンチ。テナントは SPFX_SERVE_TENANT_DOMAIN で指定
• 起動は heft start。ワークベンチで ListViewer を配置して本物のお知らせを確認
• 不具合は開発者ツール（F12）の Console と Network で原因を特定
• 404＝リスト名、400＝列の内部名、403＝権限——ステータスが道しるべ

動作が確認できました。いよいよ最終STAGE——作った部品を本番に配置して、誰でも使える状態にします。