クライアント側の Web パーツを SharePoint に接続する (Hello world パート 2)Connect your client-side web part to SharePoint (Hello World part 2)

SharePoint に Web パーツを接続して、SharePoint 内の機能とデータにアクセスし、エンド ユーザーに対して、より統合されたエクスペリエンスを提供します。Connect your web part to SharePoint to access functionality and data in SharePoint and provide a more integrated experience for end users. この記事では、前の記事の「最初の Web パーツの構築」に組み込まれている hello world Web パーツの構築を継続して説明します。This article continues building the Hello World web part built in the previous article Build your first web part.

YouTube の SharePoint PnP チャンネルのビデオの手順に従って進めることもできます。You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel.



gulp serve の実行Run gulp serve

コマンドが実行されていることを確認します。gulp serveEnsure that you have the gulp serve command running. 実行されていない場合は、helloworld webpart プロジェクトのディレクトリに移動し、次のコマンドを使用して実行します。If it is not already running, go to the helloworld-webpart project directory and run it by using the following commands.

cd helloworld-webpart
gulp serve

ページ コンテキストへのアクセスを取得するGet access to page context

ワークベンチがローカルでホストされている場合は、SharePoint ページのコンテキストがありません。When the Workbench is hosted locally, you do not have the SharePoint page context. しかし、さまざまな方法で Web パーツをテストすることができます。You can still test your web part in many different ways. たとえば、SharePoint コンテキストがない場合は、Web パーツのユーザー エクスペリエンスの構築に専念し、モック データを使用して SharePoint の操作をシミュレーションすることができます。For example, you can concentrate on building the web part's UX and use mock data to simulate SharePoint interaction when you don't have the SharePoint context.

しかし、ワークベンチが SharePoint でホストされる場合は、次のようなさまざまなキー プロパティを提供するページのコンテキストへのアクセスを得ます。However, when the Workbench is hosted in SharePoint, you get access to the page context, which provides various key properties such as:

  • Web タイトルWeb title
  • Web の絶対 URLWeb absolute URL
  • Web サーバー関連 URLWeb server-relative URL
  • ユーザー サインイン名User sign-in name

ページ コンテキストへのアクセスを取得するにはTo get access to the page context

  1. Web パーツ クラスで次の変数を使用します。Use the following variable in your web part class:

    this.context.pageContext
    
  2. Visual Studio コード (または、推奨 IDE) に切り替え、src\webparts\helloWorld\HelloWorldWebPart.ts を開きます。Switch to Visual Studio code (or your preferred IDE) and open src\webparts\helloWorld\HelloWorldWebPart.ts.

  3. レンダリング メソッド内で、次のコードを含む innerHTML のコード ブロックを置き換えます。Inside the render method, replace the innerHTML code block with the following code:

       this.domElement.innerHTML = `
         <div class="${ styles.helloWorld }">
           <div class="${ styles.container }">
             <div class="${ styles.row }">
               <div class="${ styles.column }">
                 <span class="${ styles.title }">Welcome to SharePoint!</span>
                 <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
                 <p class="${ styles.description }">${escape(this.properties.description)}</p>
                 <p class="${ styles.description }">${escape(this.properties.test)}</p>
                 <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
                 <a href="https://aka.ms/spfx" class="${ styles.button }">
                   <span class="${ styles.label }">Learn more</span>
                 </a>
               </div>
             </div>
           </div>
         </div>`;
    
  4. HTML のブロック内の変数値を出力するのに ${ } が使用されているのがわかります。Notice how ${ } is used to output the variable's value in the HTML block. 追加の HTML p は、this.context.pageContext.web.title を表示するために使用します。An extra HTML p is used to display this.context.pageContext.web.title. この Web パーツがローカル環境から読み込まれるため、タイトルはローカル ワークベンチとなります。Because this web part loads from the local environment, the title is Local Workbench.

  5. ファイルを保存。Save the file. コンソールで実行されている gulp serve により、この保存オペレーションが検出され、The gulp serve running in your console detects this save operation and:

    • 更新されたコードを自動的にビルドし、バンドルします。Builds and bundles the updated code automatically.
    • ローカル ワークベンチのページを更新します (Web パーツのコードを再読み込みする必要があるため)。Refreshes your local Workbench page (as the web part code needs to be reloaded).

    注意

    Visual Studio Code に変更を保存する際、gulp が自動でコンパイルするのを確認するため、コンソール ウィンドウと Visual Studio Code は横並びで保持されます。Keep the console window and Visual Studio Code side-by-side to see gulp automatically compile as you save changes in Visual Studio Code.

  6. お使いのブラウザーでローカルの SharePoint ワークベンチ タブに切り替えます。タブが既に閉じられている場合、URL は https://localhost:4321/temp/workbench.html です。In your browser, switch to the local SharePoint Workbench tab. If you have already closed the tab, the URL is https://localhost:4321/temp/workbench.html.

    Web パーツに次のものが表示されるはずです。You should see the following in the web part:

    localhost 内の SharePoint ページのコンテキスト

  7. SharePoint でホストされている SharePoint ワークベンチに移動します。Navigate to the SharePoint Workbench hosted in SharePoint. 完全な URL は https://your-sharepoint-site-url/_layouts/workbench.aspx です。The full URL is https://your-sharepoint-site-url/_layouts/workbench.aspx. SharePoint Online 側でこの変更を確認するには、対象ページを最新の情報に更新する必要があります。Notice that on the SharePoint Online side, you need to refresh the page to see the changes.

    Web パーツ内に SharePoint サイトのタイトルが表示され、ページのコンテキストが Web パーツで使用できるようになります。You should now see your SharePoint site title in the web part now that page context is available to the web part.

    SharePoint サイト内の SharePoint ページのコンテキスト

リスト モデルの定義Define list model

SharePoint のリスト データを用いて操作を開始するにはリスト モデルが必要です。リストを取得するには、2 つのモデルが必要です。You need a list model to start working with SharePoint list data. To retrieve the lists, you need two models.

  1. Visual Studio コードに切り替え、src\webparts\helloWorld\HelloWorldWebPart.ts に移動します。Switch to Visual Studio Code and go to src\webparts\helloWorld\HelloWorldWebPart.ts.

  2. HelloWorldWebPart クラスの真上にある次の interface モデルを定義します。Define the following interface models just above the HelloWorldWebPart class:

    export interface ISPLists {
     value: ISPList[];
    }
    
    export interface ISPList {
     Title: string;
     Id: string;
    }
    

    ISPList インターフェイスでは、接続している SharePoint リスト情報を保持します。The ISPList interface holds the SharePoint list information that we are connecting to.

モック ストアからリストを取得します。Retrieve lists from mock store

ローカル ワークベンチでテストするには、モック データを返すモック ストアが必要です。To test in the local Workbench, you need a mock store that returns mock data.

モック ストアを作成するにはTo create a mock store

  1. MockHttpClient.ts という名前の src\webparts\helloWorld フォルダーに、新規ファイルを作成します。Create a new file inside the src\webparts\helloWorld folder named MockHttpClient.ts.

  2. 次のコードを MockHttpClient.ts にコピーします。Copy the following code into MockHttpClient.ts:

    import { ISPList } from './HelloWorldWebPart';
    
    export default class MockHttpClient  {
    
       private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },
                                           { Title: 'Mock List 2', Id: '2' },
                                           { Title: 'Mock List 3', Id: '3' }];
    
       public static get(): Promise<ISPList[]> {
       return new Promise<ISPList[]>((resolve) => {
               resolve(MockHttpClient._items);
           });
       }
    }
    

    コードに関する注意事項Things to note about the code:

    • HelloWorldWebPart.ts には複数のエクスポートがあるため、インポートする特定の 1 つは { } を使用して指定されます。Because there are multiple exports in HelloWorldWebPart.ts, the specific one to import is specified by using { }. この場合、データ モデルの ISPList のみが必要です。In this case, only the data model ISPList is required.
    • この場合、HelloWorldWebPart である既定のモジュールからインポートするとき、ファイル拡張子を入力する必要はありません。You do not need to type the file extension when importing from the default module, which in this case is HelloWorldWebPart.
    • MockHttpClient クラスを既定のモジュールとしてエクスポートすると、その他のファイルにインポートできるようになります。It exports the MockHttpClient class as a default module so that it can be imported in other files.
    • 初期 ISPList モック配列作成します。It builds the initial ISPList mock array and returns.
  3. ファイルを保存。Save the file.

HelloWorldWebPart のクラス内で、MockHttpClient のクラスを使用できます。最初に MockHttpClient モジュールをインポートする必要があります。You can now use the MockHttpClient class in the HelloWorldWebPart class. You first need to import the MockHttpClient module.

MockHttpClient モジュールをインポートするにはTo import the MockHttpClient module

  1. HelloWorldWebPart.ts ファイルを開きます。Open the HelloWorldWebPart.ts file.

  2. 次のコードをコピーして、import * as strings from 'HelloWorldWebPartStrings'; のすぐ下に貼り付けます。Copy and paste the following code just under import * as strings from 'HelloWorldWebPartStrings';.

    import MockHttpClient from './MockHttpClient';
    
  3. HelloWorldWebPart クラス内でリスト検索をモックする次のプライベート メソッドを追加します。Add the following private method that mocks the list retrieval inside the HelloWorldWebPart class.

     private _getMockListData(): Promise<ISPLists> {
       return MockHttpClient.get()
         .then((data: ISPList[]) => {
           var listData: ISPLists = { value: data };
           return listData;
         }) as Promise<ISPLists>;
     }
    
  4. ファイルを保存。Save the file.

SharePoint サイトからリストを取得します。Retrieve lists from SharePoint site

次に現在のサイトからリストを取得する必要があります。Next you need to retrieve lists from the current site. SharePoint REST API を使用して、https://yourtenantprefix.sharepoint.com/_api/web/lists のサイトからリストを取得します。You will use SharePoint REST APIs to retrieve the lists from the site, which are located at https://yourtenantprefix.sharepoint.com/_api/web/lists.

SharePoint Framework には、SharePoint に対して REST API 要求を実行するヘルパー クラス spHttpClient が含まれています。これは、既定のヘッダーを追加し、書き込みに必要なダイジェストを管理して、テレメトリを収集します。このテレメトリはサービスがアプリケーションのパフォーマンスを監視するために役立ちます。SharePoint Framework includes a helper class spHttpClient to execute REST API requests against SharePoint. It adds default headers, manages the digest needed for writes, and collects telemetry that helps the service to monitor the performance of an application.

このヘルパー クラスを使用するには、最初にそれらを @microsoft/sp-http モジュールからインポートします。To use this helper class, import them from the @microsoft/sp-http module

  1. HelloWorldWebPart.ts ファイルの一番上までスクロールします。Scroll to the top of the HelloWorldWebPart.ts file.

  2. 次のコードをコピーして、import MockHttpClient from './MockHttpClient'; のすぐ下に貼り付けます。Copy and paste the following code just under import MockHttpClient from './MockHttpClient';:

    import {
     SPHttpClient,
     SPHttpClientResponse   
    } from '@microsoft/sp-http';
    
  3. 次のプライベート メソッドを追加し、HelloWorldWebPart クラス内で SharePoint からリストを取得します。Add the following private method to retrieve lists from SharePoint inside the HelloWorldWebPart class.

    private _getListData(): Promise<ISPLists> {
     return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
       .then((response: SPHttpClientResponse) => {
         return response.json();
       });
    }
    

    メソッドは spHttpClient ヘルパー クラスを使用して、get 要求を発行します。ISPLists モデルを使用し、非表示のリストを取得しないようフィルターを適用します。The method uses the spHttpClient helper class and issues a get request. It uses the ISPLists model and also applies a filter to not retrieve hidden lists.

  4. ファイルを保存。Save the file.

  5. を実行中のコンソール ウィンドウに切り替え、エラーの有無を確認します。gulp serveSwitch to the console window that is running gulp serve and check if there are any errors. エラーがある場合は、コンソール内で gulp がレポートするので、続行する前にそれらを修正する必要があります。If there are errors, gulp reports them in the console, and you need to fix them before proceeding.

新しいスタイルの追加Add new styles

SharePoint フレームワークでは、Sass を CSS のプリプロセッサとして使用し、具体的には通常の CSS 構文に完全に準拠した SCSS 構文を使用します。The SharePoint Framework uses Sass as the CSS pre-processor, and specifically uses the SCSS syntax, which is fully compliant with normal CSS syntax. Sass は、CSS 言語を拡張し、変数や入れ子のルール、インラインのインポートなどの機能を使用することで、Web パーツ用の効率的なスタイル シートを整理し、作成することができます。Sass extends the CSS language and allows you to use features such as variables, nested rules, and inline imports to organize and create efficient style sheets for your web parts. SharePoint フレームワークには、Sass ファイルを通常の CSS ファイルに変換する SCSS コンパイラが付いており、開発中に使用する型指定されたバージョンも提供します。The SharePoint Framework already comes with a SCSS compiler that converts your Sass files to normal CSS files, and also provides a typed version to use during development.

新しいスタイルを追加するにはTo add new styles

  1. HelloWorld.module.scss を開きます。Open HelloWorld.module.scss. これは、スタイルを定義する SCSS ファイルです。This is the SCSS file where you define your styles.

    既定では、スタイルは Web パーツに適用されます。表示スタイルは .helloWorld で定義されています。By default, the styles are scoped to your web part. You can see that as the styles are defined under .helloWorld.

  2. スタイルの後 (ただし、まだメイン スタイル セクションの内側) に、次のスタイルを追加します。.button .helloWorldAdd the following styles after the .button style, but still inside the main .helloWorld style section:

    .list {
     color: #333333;
     font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
     font-size: 14px;
     font-weight: normal;
     box-sizing: border-box;
     margin: 10;
     padding: 10;
     line-height: 50px;
     list-style-type: none;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    }
    
    .listItem {
     color: #333333;
     vertical-align: center;
     font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
     font-size: 14px;
     font-weight: normal;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     box-shadow: none;
     *zoom: 1;
     padding: 9px 28px 3px;
     position: relative;
    }
    
  3. ファイルを保存。Save the file.

    gulp は、ファイルを保存するとすぐに、コンソール内のコードを再構築します。Gulp rebuilds the code in the console as soon as you save the file. これにより、HelloWorld.module.scss.ts ファイル内で対応する typings が生成されます。This generates the corresponding typings in the HelloWorld.module.scss.ts file. Typescript にコンパイルされた後、Web パーツのコードでこれらのスタイルをインポートし参照することができます。After compiled to TypeScript, you can then import and reference these styles in your web part code.

    Web パーツのレンダリングのメソッドで確認できます。You can see that in the render method of the web part:

    <div class="${styles.row}">
    

リスト情報を表示するRender lists information

HelloWorldWebPart クラスを開きます。Open the HelloWorldWebPart class.

SharePoint ワークベンチでは、ローカル環境や SharePoint サイトから Web パーツを自由にテストすることができます。SharePoint Framework は EnvironmentType モジュールを使用して Web パーツを実行している環境を理解しやすくすることで、この機能を補助しています。SharePoint Workbench gives you the flexibility to test web parts in your local environment and from a SharePoint site. SharePoint Framework aids this capability by helping you understand which environment your web part is running from by using the EnvironmentType module.

EnvironmentType モジュールを使用するにはTo use the EnvironmentType module

  1. 最初に EnvironmentEnvironmentType モジュールを @microsoft/sp-core-library バンドルからインポートします。Import the Environment and the EnvironmentType modules from the @microsoft/sp-core-library bundle. 次のコードに示すように、それを上部の import セクションに追加します。Add it to the import section at the top as shown in the following code:

    import {
     Environment,
     EnvironmentType
    } from '@microsoft/sp-core-library';
    
  2. HelloWorldWebPart クラス内に次のプライベート メソッドを追加します。Add the following private method inside the HelloWorldWebPart class:

     private _renderList(items: ISPList[]): void {
       let html: string = '';
       items.forEach((item: ISPList) => {
         html += `
       <ul class="${styles.list}">
         <li class="${styles.listItem}">
           <span class="ms-font-l">${item.Title}</span>
         </li>
       </ul>`;
       });
    
       const listContainer: Element = this.domElement.querySelector('#spListContainer');
       listContainer.innerHTML = html;
     }
    

    このメソッドは、 スタイル の変数を使用して、以前に追加した新しい CSS スタイルを参照し、REST API から受信するリスト情報の表示に使用します。This method references the new CSS styles added earlier by using the styles variable and is used to render list information which will be received from REST API.

  3. ファイルを保存。Save the file.

  4. HelloWorldWebPart クラス内に次のプライベート メソッドを追加し、それぞれのメソッドを呼び出してリスト データを取得します。Add the following private method inside the HelloWorldWebPart class to call the respective methods to retrieve list data:

     private _renderListAsync(): void {
       // Local environment
       if (Environment.type === EnvironmentType.Local) {
         this._getMockListData().then((response) => {
           this._renderList(response.value);
         });
       }
       else if (Environment.type == EnvironmentType.SharePoint || 
                 Environment.type == EnvironmentType.ClassicSharePoint) {
         this._getListData()
           .then((response) => {
             this._renderList(response.value);
           });
       }
     }
    

    _renderListAsync メソッド内で HostType について注意する点。Things to note about hostType in the _renderListAsync method:

    • プロパティで、ローカル、または SharePoint 環境にあるかどうかを確認できます。Environment.typeThe Environment.type property helps you check if you are in a local or SharePoint environment.
    • ワークベンチをホストする場所に応じて適切なメソッドが呼び出されます。The correct method is called depending on where your Workbench is hosted.
  5. ファイルを保存。Save the file.

リスト データの取得Retrieve list data

  1. レンダリング メソッドに移動し、メソッドの内部のコードを次のコードに置き換えます。Navigate to the render method, and replace the code inside the method with the following code:

       this.domElement.innerHTML = `
         <div class="${ styles.helloWorld }">
           <div class="${ styles.container }">
             <div class="${ styles.row }">
               <div class="${ styles.column }">
                 <span class="${ styles.title }">Welcome to SharePoint!</span>
                 <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
                 <p class="${ styles.description }">${escape(this.properties.description)}</p>
                 <p class="${ styles.description }">${escape(this.properties.test)}</p>
                 <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
                 <a href="https://aka.ms/spfx" class="${ styles.button }">
                   <span class="${ styles.label }">Learn more</span>
                 </a>
               </div>
             </div>
             <div id="spListContainer" />
           </div>
         </div>`;
    
         this._renderListAsync();
    
  2. ファイルを保存。Save the file.

    gulp serve コンソール ウィンドウ内でコードが再構築されることに注意してください。エラーが表示されていないことを確認します。Notice in the gulp serve console window that it rebuilds the code. Make sure you don't see any errors.

  3. ローカル ワークベンチに切り替え、HelloWorld Web パーツを追加します。Switch to your local Workbench and add the HelloWorld web part.

    モック データが返されていることを確認してください。You should see the mock data returned.

    localhost からのリストデータのレンダリング

  4. SharePoint でホストされているワークベンチに切り替えます。Switch to the Workbench hosted in SharePoint. ページを更新して、HelloWorld Web パーツを追加します。Refresh the page and add the HelloWorld web part.

    現在のサイトから返されたリストを確認する必要があります。You should see lists returned from the current site.

    SharePoint からのリストデータのレンダリング

  5. 今すぐサーバーの実行を停止できます。Now you can stop the server from running. コンソールに切り替え、gulp serve を停止します。Switch to the console and stop gulp serve. Ctrl+C を押して gulp タスクを終了します。Select Ctrl+C to terminate the gulp task.

次の手順Next steps

これで、SharePoint リスト データへの Web パーツの接続は完了です。Congratulations on connecting your web part to SharePoint list data!

次の「Web パーツの SharePoint ページへの展開」トピックで、Hello World Web パーツのビルドを続けることができます。You can continue building out your Hello World web part in the next topic Deploy your web part to a SharePoint page. SharePoint ページでの Hello World の Web パーツの展開とプレビュー方法を学習します。You will learn how to deploy and preview the Hello World web part in a SharePoint page.

注意

ドキュメントまたは SharePoint Framework で問題が見つかった場合は、「sp-dev-docs リポジトリの懸案事項リスト」を使用するか、この記事にコメントして、SharePoint エンジニアリングに報告してください。If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the issue list at the sp-dev-docs repository. よろしくお願いします。Thanks for your input in advance.