Webパーツ本体を読む

Webパーツ本体（.ts）の骨格

src/webparts/listViewer/ListViewerWebPart.ts を開くと、だいたい次のような構造になっています（要点だけ抜粋・簡略化）。

export interface IListViewerWebPartProps {
  description: string;   // ← 設定パネルで編集できる値
}

export default class ListViewerWebPart
  extends BaseClientSideWebPart<IListViewerWebPartProps> {

  // ① 画面を描く係
  public render(): void {
    const element = React.createElement(ListViewer, {
      description: this.properties.description
    });
    ReactDom.render(element, this.domElement);
  }

  // ② 設定パネルを組み立てる係
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [{
        groups: [{
          groupFields: [
            PropertyPaneTextField('description', { label: '説明' })
          ]
        }]
      }]
    };
  }
}

読みどころは3つです。

• IListViewerWebPartProps — このWebパーツが持つ「設定値」の型。初期状態では description だけ
• render() — Reactの部品（ListViewer）を作り、this.domElement（ページ上の自分の場所）へ描く
• getPropertyPaneConfiguration() — 右から出てくる設定パネル（プロパティペイン）の中身を定義する

設定パネル（プロパティペイン）の仕組み

Webパーツを編集モードで開くと、右側にスッと出てくる設定パネル——あれがプロパティペインです。ここで入力した値は this.properties に入り、render() を通じてReact部品へ渡されます。

つまり流れはこうです。

設定パネルで入力 → this.properties に保存 → render() が React に渡す → 画面が変わる

STAGE 04の最後では、この仕組みを使って「表示するリストの名前を、設定パネルから変えられる」ようにします。今は「設定 → プロパティ → 描画」という一本の流れがあることだけ掴めば十分です。

React部品の側

render() から呼ばれる ListViewer は、src/webparts/listViewer/components/ にあります。React部品は「受け取った値（props）をもとに、見た目を返す」のが仕事です。

export default class ListViewer extends React.Component<IListViewerProps> {
  public render(): React.ReactElement<IListViewerProps> {
    return <div>{this.props.description}</div>;
  }
}

IListViewerProps が「React部品が受け取る値の型」です。本体（.ts）から渡された description が、ここで画面に表示されます。「本体＝データを用意する人／React部品＝見た目を作る人」 と役割を分けて覚えると、迷いません。

manifest.json ＝ 部品の身分証

同じフォルダにある ListViewerWebPart.manifest.json は、この部品の身分証です。世界で唯一のID、部品の種類、そして「初期設定値」が書かれています。ページに配置したとき最初に表示される内容は、ここの preconfiguredEntries で決まります。普段は深く触りませんが、「部品を識別する情報がここにある」と知っておきましょう。

この記事のまとめ

• Webパーツ本体の要は render()（描く） と getPropertyPaneConfiguration()（設定を組む）
• 値の流れは 設定パネル → this.properties → React部品のprops → 画面
• 役割分担：本体＝データ担当／React部品＝見た目担当
• manifest.json は部品の身分証（ID・種類・初期設定）

骨格が読めるようになりました。次のSTAGE 04からは、いよいよ手を動かして「リストの中身を表示するWebパーツ」を作っていきます。