演習 - SharePoint REST API を使用してリスト データを取得して表示する
- 15 分
この演習では、SharePoint REST API を使用して SharePoint リストからデータを取得して表示する SharePoint Framework (SPFx) Web パーツを作成します。
テストに使用する SharePoint リストを作成する
SharePoint REST API を使用して SharePoint リストから表示データを取得する前に、まずリストを作成し、データを入力する必要があります。
ブラウザーで SharePoint Online のサイト コレクションに移動します。 左側のナビゲーションで [ サイト コンテンツ ] を選択し、ツール バーの [新しい > リスト ] を選択します。
[空のリスト] テンプレートを選択します。
![[リストの作成] フォーム - [空のテンプレートの選択] を示すスクリーンショット。](../../m365-developer/sharepoint-spfx-spcontent/media/create-countries-list-01.png)
リスト名を [国] に設定し、[作成] を選択します。
![[リストの作成] フォーム - リストの詳細の入力を示すスクリーンショット。](../../m365-developer/sharepoint-spfx-spcontent/media/create-countries-list-02.png)
次の図に示すように、さまざまなリージョンの名前を入力して、リストに項目を追加します。
前提条件
重要
ほとんどの場合、次のツールの最新バージョンをインストールすることをお勧めします。 ここに記載されているバージョンのリストは、このモジュールが発行され、最後にテストしたときに使用されたものです。
- Node.js v22.*
- Gulp-cli v3.*
- Yeoman v5.*
- SharePoint v1.21.1 用 Yeoman ジェネレーター
- Visual Studio Code
Web パーツを作成し SharePoint REST API を使用してデータを表示する
コマンド プロンプトを開き、現在のディレクトリを、プロジェクトを作成するフォルダーに変更します。
次のコマンドを実行して、SharePoint Yeoman ジェネレーターを起動します。
yo @microsoft/sharepoint
表示されるプロンプトを完了するには、次のコマンドを使用します (その他のオプションが表示される場合は、既定の回答をそのまま使用します)。
- ソリューション名は何ですか?: SpFxHttpClientDemo
- どの種類のクライアント側コンポーネントを作成しますか?: Web パーツ
- Web パーツ名は何ですか?: SPFxHttpClientDemo
- どのテンプレートを使用しますか? React
プロジェクトに必要なフォルダーをプロビジョニングした後、ジェネレーターは npm install を自動的に実行することで、すべての依存関係パッケージをインストールします。 NPM がすべての依存関係のダウンロードを完了したら、Visual Studio Code でプロジェクトを開きます。
SharePoint リスト アイテムのインターフェイスを作成する
プロジェクト内の ./src フォルダーを見つけます。 src フォルダー内に models という名前の新しいサブフォルダーを作成します。
models フォルダー内に新しい ICountryListItem.ts ファイルを作成し、次のコードを追加します。
export interface ICountryListItem {
Id: string;
Title: string;
}
ボタン クリック イベント ハンドラーの型を作成する
models フォルダー内に新しい ButtonClickedCallback.ts ファイルを作成し、次のコードを追加します。
export type ButtonClickedCallback = () => void;
models フォルダーに実装されている型のバレルを作成する
models フォルダー内に新しい index.ts ファイルを作成し、次のコードを追加します。
export * from './ButtonClickedCallback';
export * from './ICountryListItem';
React コンポーネントのパブリック インターフェイスを更新する
ファイル ./src/webparts/spFxHttpClientDemo/components/ISpFxHttpClientDemoWebPartProps.tsを開きます。 これは、React コンポーネントのパブリック プロパティのインターフェイスです。 アイテムの一覧を受け入れるように更新します。
次のコードをファイルの先頭に追加します。
import {
ButtonClickedCallback,
ICountryListItem
} from '../../../models';
インターフェイスを更新して既存の description プロパティを渡されるアイテムのコレクションに置き換え、ボタンが選択されたときにイベントを追加します。
export interface ISpFxHttpClientDemoWebPartProps {
spListItems: ICountryListItem[];
onGetListItems?: ButtonClickedCallback;
isDarkTheme: boolean;
environmentMessage: string;
hasTeamsContext: boolean;
userDisplayName: string;
}
Web パーツのユーザー インターフェイスを実装する
./src/webparts/spFxHttpClientDemo/components/SpFxHttpClientDemo.module.scss ファイルを見つけて開きます。
ファイルの末尾に以下を追加します。
.buttons {
padding-top: 20px;
> button {
margin-right: 10px;
}
}
./src/webparts/spFxHttpClientDemo/components/SpFxHttpClientDemo.tsx ファイルを見つけて開きます。
メソッド render() を見つけて、次のコードに置き換えます。 これにより、spListItems プロパティに含まれるデータを表示するリストが作成されます。 また、onClick ハンドラーが接続されているボタンがあることにも注意してください。
public render(): React.ReactElement<ISpFxHttpClientDemoWebPartProps> {
const {
spListItems,
isDarkTheme,
environmentMessage,
hasTeamsContext,
userDisplayName
} = this.props;
return (
<section className={`${styles.spFxHttpClientDemo} ${hasTeamsContext ? styles.teams : ''}`}>
<div className={styles.welcome}>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
<h2>Well done, {escape(userDisplayName)}!</h2>
<div>{environmentMessage}</div>
</div>
<div className={styles.buttons}>
<button type="button" onClick={this.onGetListItemsClicked}>Get Countries</button>
</div>
<div>
<ul>
{spListItems && spListItems.map((list) =>
<li key={list.Id}>
<strong>Id:</strong> {list.Id}, <strong>Title:</strong> {list.Title}
</li>
)
}
</ul>
</div>
</section>
);
}
次のイベント ハンドラーを SpFxHttpClientDemo クラスに追加し、ボタンのクリック イベントを処理します。 このコードは、<a> 要素の既定のアクションによってページから移動 (またはページが更新) されることを防ぎ、パブリック プロパティのコールバック セットを呼び出して、イベントが発生したことをコンポーネントのコンシューマーに通知します。
private onGetListItemsClicked = (event: React.MouseEvent<HTMLButtonElement>): void => {
event.preventDefault();
if (this.props.onGetListItems) this.props.onGetListItems();
}
SharePoint REST API からデータを取得する
./src/webparts/spFxHttpClientDemo/SpFxHttpClientDemoWebPart.ts ファイルを見つけて開きます。
ファイルの先頭にある既存の import ステートメントの後に、次の import ステートメントを追加します。
import { SPHttpClient } from '@microsoft/sp-http';
import { ICountryListItem } from '../../models';
クラス SpFxHttpClientDemoWebPart を見つけて、次のプライベート メンバーを追加します。
private _countries: ICountryListItem[] = [];
render() メソッドを見つけます。 このメソッドは、コンポーネント SpFxHttpClientDemo のインスタンスを作成し、そのパブリック プロパティを設定していることに注意してください。 既定のコードでは、description プロパティが設定されますが、これは、前の手順で ISpFxHttpClientDemoWebPartProps インターフェイスから削除されました。
description プロパティを削除し、次のプロパティを追加して、以前に追加したプライベート メンバーにリージョンの一覧を設定し、イベント ハンドラーにアタッチします。
spListItems: this._countries,
onGetListItems: this._onGetListItems,
次のメソッドをイベント ハンドラーとして SpFxHttpClientDemoWebPart クラスに追加します。 このメソッドは、リスト アイテムのコレクションを返す別のメソッド (次の手順で追加します) を呼び出します。 これらのアイテムが JavaScript Promise によって返されると、このメソッドは内部の _countries メンバーを更新し、Web パーツを再レンダリングします。 これにより、_getListItems() メソッドによって返されるリージョンのコレクションが、アイテムをレンダリングするReact コンポーネントのパブリック プロパティにバインドされます。
private _onGetListItems = async (): Promise<void> => {
const response: ICountryListItem[] = await this._getListItems();
this._countries = response;
this.render();
}
次のメソッドを SpFxHttpClientDemoWebPart クラスに追加します。 このメソッドでは、SharePoint REST API を使用して、国 リストからリスト アイテムを取得します。 これは、spHttpClient オブジェクトを使用して SharePoint REST API をクエリします。 応答を受信すると、応答を JSON オブジェクトとして処理する response.json() を呼び出し、呼び出し元への応答で value プロパティを返します。
value プロパティは、以前に作成したインターフェイスと一致するリスト アイテムのコレクションです。
private async _getListItems(): Promise<ICountryListItem[]> {
const response = await this.context.spHttpClient.get(
this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('Countries')/items?$select=Id,Title`,
SPHttpClient.configurations.v1);
if (!response.ok) {
const responseText = await response.text();
throw new Error(responseText);
}
const responseJson = await response.json();
return responseJson.value as ICountryListItem[];
}
Web パーツをテストする
次のコマンドを実行して、開発者証明書がインストールされていることを確認します。
gulp trust-dev-cert
次のコマンドを実行してローカルの Web サーバーを起動します。
gulp serve --nobrowser
SharePoint Framework のnobrowserスイッチと gulp serveタスクは、プロジェクトをビルドし、ローカル Web サーバーを開始します。
リロード サブタスクの実行が完了するまで待ちます。 この時点で、Web パーツはテストのための準備が整います。
ブラウザを開き、国リストを作成した SharePoint Online サイトに移動します。 /_layouts/workbench.aspx をサイトの URL の末尾に追加して、SharePoint でホストされているワークベンチを開きます。
[Web パーツ] アイコン ボタンを選択して使用可能な Web パーツの一覧を開き、[ローカル] セクションからSPFxHttpClientDemo Web パーツを選択します。
Web パーツと 1 つのボタンがページに表示されますが、リストにはデータは表示されません。
[国の取得] ボタンを選択すると、SharePoint REST API からのデータがリストに表示されます。
コンソールまたはターミナル ウィンドウで CTRL+C を押してローカル Web サーバーを停止します。
概要
この演習では、SharePoint REST API を使用して SharePoint リストからデータを取得して表示する SharePoint Framework (SPFx) Web パーツを作成しました。