SharePoint のクライアント側の最初の Web パーツを作成する (Hello World パート 1)Build your first SharePoint client-side web part (Hello World part 1)

クライアント側の Web パーツは、SharePoint ページのコンテキスト内で実行されるクライアント側コンポーネントです。クライアント側の Web パーツは SharePoint Online に展開することができ、最新の JavaScript ツールとライブラリを使用して、それらを構築することもできます。Client-side web parts are client-side components that run inside the context of a SharePoint page. Client-side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.

クライアント側の Web パーツは次をサポートします。Client-side web parts support:

  • HTML と JavaScript を使用したビルドBuilding with HTML and JavaScript.
  • SharePoint オンライン環境とオンプレミス環境の両方Both SharePoint online and on-premises environments.

注意

この資料の手順を実行する前に、必ず開発環境を設定しますBefore following the steps in this article, be sure to Set up your development environment.

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

Screenshot of the YouTube video player for this tutorial

新しい Web パーツ プロジェクトの作成Create a new web part project

新しい Web パーツ プロジェクトを作成するにはTo create a new web part project

  1. 自分の好みの場所に新しいプロジェクト ディレクトリを作成します。Create a new project directory in your favorite location.

    md helloworld-webpart
    
  2. プロジェクト ディレクトリへ移動します。Go to the project directory.

    cd helloworld-webpart
    
  3. Yeoman の SharePoint ジェネレーターを実行して、新しい HelloWorld の Web パーツを作成します。Create a new HelloWorld web part by running the Yeoman SharePoint Generator.

    yo @microsoft/sharepoint
    
  4. ダイアログ ボックスが表示されたら、次の操作を実行します。When prompted:

    • 既定の helloworld‐webpart をソリューション名として受け入れ、Enter キーを押します。Accept the default helloworld-webpart as your solution name, and then select Enter.
    • [SharePoint Online のみ (最新)] を選択し、Enter キーを押します。Select SharePoint Online only (latest), and select Enter.
    • ファイルの配置場所として [現在のフォルダーを使用する] を選びます。Select Use the current folder for where to place the files.
    • [N] を選択して、拡張機能が使用されている場合は各サイトに明示的にインストールするよう要求します。Select N to require the extension to be installed on each site explicitly when it's being used.
    • 作成するクライアント側コンポーネントの種類として、[Web パーツ] を選択します。Select WebPart as the client-side component type to be created.
  5. 次の一連のダイアログ ボックスでは、Web パーツの詳細情報について入力が求められます。The next set of prompts ask for specific information about your web part:

    • 既定の HelloWorld を Web パーツ名として受け入れ、Enter キーを押します。Accept the default HelloWorld as your web part name, and then select Enter.
    • 既定の [HelloWorld の説明] を Web パーツの説明として受け入れ、Enter キーを押します。Accept the default HelloWorld description as your web part description, and then select Enter.
    • 既定の [JavaScript Web フレームワークは使用しない] を使用するフレームワークとして受け入れ、Enter キーを押します。Accept the default No javascript web framework as the framework you would like to use, and then select Enter.

    Yeoman の SharePoint ジェネレーターにより、Web パーツのクライアント側ソリューションを作成するダイアログが表示されます

この時点で、Yeoman は必要な依存関係をインストールし、ソリューション ファイルを HelloWorld の Web パーツとともにスキャフォールディングします。At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld web part. これには数分かかる場合があります。This might take a few minutes.

スキャフォールディングが完了すると、スキャフォールディングが正常に行われたことを示す次のメッセージが表示されます。When the scaffold is complete, you should see the following message indicating a successful scaffold.

SharePoint のクライアント側ソリューションが正常にスキャフォールディングされました

エラーのトラブルシューティング方法の詳細については、既知の問題を参照してください。For information about troubleshooting any errors, see Known issues.

好みのコード エディターの使用Using your favorite Code Editor

SharePoint のクライアント側ソリューションは HTML や TypeScript に基づいているため、以下のような Web パーツを構築するのにクライアント側の開発をサポートしている任意のコード エディターを使用することができます。Because the SharePoint client-side solution is HTML/TypeScript based, you can use any code editor that supports client-side development to build your web part, such as:

SharePoint Framework のドキュメントでは、手順と例にある Visual Studio Code を使用します。SharePoint Framework documentation uses Visual Studio code in the steps and examples. Visual Studio Code は、デスクトップ上で実行される Microsoft の軽量ながら強力なソース コード エディターで、Windows、Mac、Linux で使用できます。Visual Studio Code is a lightweight but powerful source code editor from Microsoft that runs on your desktop and is available for Windows, Mac, and Linux. JavaScript、TypeScript、Node.js をサポートしており、他の言語 (C++、C#、Python、PHP など) とランタイムの拡張機能の豊富なエコシステムを持ちます。It comes with built-in support for JavaScript, TypeScript, and Node.js, and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

Web パーツのプレビューPreview the web part

Web パーツをプレビューするには、ローカルな Web サーバー上でそれをビルドし、実行します。To preview your web part, build and run it on a local web server. クライアント側のツール チェーンでは、既定で HTTPS エンドポイントが使用されます。The client-side toolchain uses HTTPS endpoint by default. ただし、ローカルの開発環境に対し既定値の証明が構成されていないため、ブラウザーより証明エラーの報告を受けます。However, because a default certificate is not configured for the local dev environment, your browser reports a certificate error. SPFx ツール チェーンは、Web パーツを構築するためにインストールできる開発者の証明書が付属しています。The SPFx toolchain comes with a developer certificate that you can install for building web parts.

開発者の証明書をインストールし、Web パーツをプレビューするにはTo install the developer certificate and preview your web part

  1. コンソールに切り替え、helloworld-webpart ディレクトリ内にある状態であることを確認して、次のコマンドを入力します。Switch to your console, ensure that you are still in the helloworld-webpart directory, and then enter the following command:

    gulp trust-dev-cert
    
  2. ここまでで開発者証明書をインストールできたので、コンソールに次のコマンドを入力して、Web パーツを構築しプレビューします。Now that we have installed the developer certificate, enter the following command in the console to build and preview your web part:

    gulp serve
    

このコマンドは、一連の gulp タスクを実行して localhost:4321 にローカルのノードベースの HTTPS サーバーを作成し、既定のブラウザーを起動してローカルの開発環境から Web パーツをプレビューします。This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and launches your default browser to preview web parts from your local dev environment.

Gulp serve Web パーツ プロジェクト

SharePoint のクライアント側開発ツールは、gulp をタスク ランナーとして使用し、次のようなビルド プロセスのタスクを扱います。SharePoint client-side development tools use gulp as the task runner to handle build process tasks such as:

  • JavaScript と CSS ファイルをバンドルし、縮小します。Bundling and minifying JavaScript and CSS files.
  • ツールを実行して、各ビルドの前にバンドル化タスクと縮小タスクを呼び出します。Running tools to call the bundling and minification tasks before each build.
  • SASS ファイルを CSS にコンパイルします。Compiling SASS files to CSS.
  • TypeScript ファイルを JavaScript にコンパイルします。Compiling TypeScript files to JavaScript.

Visual Studio Code には、gulp やその他のタスク ランナー用のサポートが組み込まれています。Visual Studio Code provides built-in support for gulp and other task runners. Windows では Ctrl+Shift+B を押すか、Mac では Cmd+Shift+B を押して、Web パーツをデバッグしてプレビューします。Select Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to debug and preview your web part.

SharePoint ワークベンチは開発者のデザイン領域であり、SharePoint で展開することなく Web パーツをすばやくプレビューし、テストすることができます。SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint ワークベンチには、クライアント側のページとクライアント側のキャンバスが含まれており、そこで開発中の Web パーツを追加、削除、テストすることができます。SharePoint Workbench includes the client-side page and the client-side canvas in which you can add, delete, and test your web parts in development.

ローカルで実行中の SharePoint ワークベンチ

SharePoint ワークベンチを使用して、Web パーツのプレビューおよびテストを行うにはTo use SharePoint Workbench to preview and test your web part

  1. HelloWorld Web パーツを追加するには、[追加] アイコンを選択します。To add the HelloWorld web part, select the add icon. これにより、追加できる Web パーツのリストを表示できるツールボックスが開きます。This opens the toolbox where you can see a list of web parts available for you to add. リストには、HelloWorld の Web パーツと、開発環境でローカルに使用できるその他の Web パーツが含まれます。The list includes the HelloWorld web part as well other web parts available locally in your development environment.

    localhost 内の SharePoint ワークベンチのツールボックス

  2. [HelloWorld] を選択して、ページに Web パーツを追加します。Select HelloWorld to add the web part to the page.

    SharePoint ワークベンチ内の HelloWorld Web パーツ

    おめでとうございます。クライアント側のページに、最初のクライアント側の Web パーツを追加しました。Congratulations! You have just added your first client-side web part to a client-side page.

  3. Web パーツの一番左の鉛筆アイコンを選択し、Web パーツのプロパティ ウィンドウを表示します。Select the pencil icon on the far left of the web part to reveal the web part property pane.

    HelloWorld Web パーツのプロパティ ウィンドウ

    プロパティ ウィンドウでは、Web パーツをカスタマイズするプロパティを定義することができます。プロパティ ウィンドウはクライアント側の主導で、SharePoint の間で一貫したデザインが用意されています。The property pane is where you can define properties to customize your web part. The property pane is client-side driven and provides a consistent design across SharePoint.

  4. [説明] テキスト ボックス内のテキストを「クライアント側の Web パーツはすばらしい!」に変更します。Modify the text in the Description text box to Client-side web parts are awesome!

    すると、Web パーツ内のテキストも入力したとおりに変わるのがわかります。Notice how the text in the web part also changes as you type.

プロパティ ウィンドウで使用できる新しい機能の 1 つは更新動作を構成することで、反応性か非反応性に設定することができます。One of the new capabilities available to the property pane is to configure its update behavior, which can be set to reactive or non-reactive. 既定では更新動作は反応性ですので、プロパティを編集すると、変更を知ることができます。By default, the update behavior is reactive and enables you to see the changes as you edit the properties. 動作が反応性の場合、変更は即座に保存されます。The changes are saved instantly when the behavior is reactive.

Web パーツ プロジェクトの構造Web part project structure

Visual Studio Code を使用して、Web パーツ プロジェクトの構造を調べるにはTo use Visual Studio Code to explore the web part project structure

  1. コンソールで Ctrl + C キー (Windows の場合) を押して処理を中断します。In the console, break the processing by selecting Ctrl+C (in Windows).

  2. 次のコマンドを入力し、Visual Studio Code で Web パーツ プロジェクトを開きます (または、好みのエディターを使用)。Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor):

    code .
    

    HelloWorld プロジェクトの構造

エラーが発生した場合、コード コマンドを PATH にインストールする必要がある場合があります。If you get an error, you might need to install the code command in PATH.

TypeScript は、SharePoint のクライアント側 Web パーツを構築するための主言語です。TypeScript は、プレーンな JavaScript にコンパイルされる JavaScript の型付けスーパーセットです。SharePoint のクライアント側開発ツールは、TypeScript のクラス、モジュール、およびインターフェイスを使用して構築されることで、開発者は信頼性の高いクライアント側 Web パーツを構築することができます。TypeScript is the primary language for building SharePoint client-side web parts. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. SharePoint client-side development tools are built using TypeScript classes, modules, and interfaces to help developers build robust client-side web parts.

プロジェクト内のいくつかのキー ファイルを次に示します。The following are some key files in the project.

Web パーツ クラスWeb part class

src\webparts\helloworld フォルダーの HelloWorldWebPart.ts は、Web パーツのメイン エントリ ポイントを定義します。HelloWorldWebPart.ts in the src\webparts\helloworld folder defines the main entry point for the web part. Web パーツ クラスの HelloWorldWebPartBaseClientSideWebPart を拡張します。The web part class HelloWorldWebPart extends the BaseClientSideWebPart. クライアント側の Web パーツは、BaseClientSideWebPart クラスを拡張し、有効な Web パーツとして定義されます。Any client-side web part should extend the BaseClientSideWebPart class to be defined as a valid web part.

BaseClientSideWebPart は、Web パーツの構築に必要な最小限の機能を実装しています。BaseClientSideWebPart implements the minimal functionality that is required to build a web part. このクラスには、多くのパラメーターもあり、displayMode や Web パーツのプロパティ、Web パーツのコンテキスト、Web パーツ instanceId、Web パーツ domElement、その他の読み取り専用プロパティへのアクセスと検証を行います。This class also provides many parameters to validate and access read-only properties such as displayMode, web part properties, web part context, web part instanceId, the web part domElement, and much more.

Web パーツのクラスはプロパティ タイプの IHelloWorldWebPartProps を受け入れるよう定義されています。Notice that the web part class is defined to accept a property type IHelloWorldWebPartProps.

プロパティ タイプは、HelloWorldWebPart.ts ファイル内の HelloWorldWebPart クラスの前のインターフェイスとして定義されています。The property type is defined as an interface before the HelloWorldWebPart class in the HelloWorldWebPart.ts file.

export interface IHelloWorldWebPartProps {
    description: string;
}

このプロパティ定義を使用して、Web パーツのカスタム プロパティ タイプを定義します。これは後でプロパティ ウィンドウのセクションにて説明します。This property definition is used to define custom property types for your web part, which is described in the property pane section later.

Web パーツのレンダリング方法Web part render method

Web パーツをレンダリングする必要がある DOM 要素は、レンダリング メソッドで使用できます。この方法を使用して DOM 要素内の Web パーツをレンダリングします。HelloWorld の Web パーツでは、DOM の要素は、DIV に設定されています。メソッド パラメーターには、表示モード (読み取りまたは編集) と、構成されている Web パーツのプロパティが存在する場合はそのプロパティが含まれます。The DOM element where the web part should be rendered is available in the render method. This method is used to render the web part inside that DOM element. In the HelloWorld web part, the DOM element is set to a DIV. The method parameters include the display mode (either Read or Edit) and the configured web part properties if any:

  public render(): void {
    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>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }

このモデルには十分な柔軟性がありますので、Web パーツを任意の JavaScript フレームワークに組み込み、DOM 要素に読み込むことができます。This model is flexible enough so that web parts can be built in any JavaScript framework and loaded into the DOM element.

Web パーツのプロパティ ウィンドウの構成Configure the Web part property pane

プロパティ ウィンドウは、HelloWorldWebPart クラスで定義されています。PropertyPaneSettings プロパティでは、プロパティ ウィンドウを定義する必要があります。The property pane is defined in the HelloWorldWebPart class. The propertyPaneSettings property is where you need to define the property pane.

プロパティを定義すると、render メソッドで示されるように this.properties.<property-value> を使用して、Web パーツ内でアクセスできます。When the properties are defined, you can access them in your web part by using this.properties.<property-value>, as shown in the render method:

<p class="${styles.description}">${escape(this.properties.description)}</p>

有効な文字列にするために、プロパティの値に対して HTML エスケープを実行していることに注意してください。Notice that we are performing an HTML escape on the property's value to ensure a valid string. プロパティ ウィンドウとプロパティ ウィンドウのフィールドの種類の扱い方について詳しくは、「SharePoint のクライアント側 Web パーツを構成可能にする」を参照してください。To learn more about how to work with the property pane and property pane field types, see Make your SharePoint client-side web part configurable.

プロパティ ウィンドウに、チェック ボックス、ドロップダウン リスト、切り替えなどのプロパティをいくつか追加しましょう。Let's now add a few more properties to the property pane: a check box, a drop-down list, and a toggle. まず最初に、フレームワークからそれぞれのプロパティ ウィンドウのフィールドをインポートします。We first start by importing the respective property pane fields from the framework.

  1. ファイルの先頭にスクロールし、@microsoft/sp-webpart-base から次のものをインポート セクションに追加します。Scroll to the top of the file and add the following to the import section from @microsoft/sp-webpart-base:

    PropertyPaneCheckbox,
    PropertyPaneDropdown,
    PropertyPaneToggle
    

    完全なインポート セクションは、次のようになります。The complete import section looks like the following:

    import {
     BaseClientSideWebPart,
     IPropertyPaneConfiguration,
     PropertyPaneTextField,
     PropertyPaneCheckbox,
     PropertyPaneDropdown,
     PropertyPaneToggle
    } from '@microsoft/sp-webpart-base';
    
  2. 新しいプロパティを含むように Web パーツのプロパティを更新します。Update the web part properties to include the new properties. これにより、フィールドが型指定されたオブジェクトにマッピングされます。This maps the fields to typed objects.

  3. IHelloWorldWebPartProps インターフェイスを次のコードに置き換えます。Replace the IHelloWorldWebPartProps interface with the following code.

    export interface IHelloWorldWebPartProps {
       description: string;
       test: string;
       test1: boolean;
       test2: string;
       test3: boolean;
    }
    
  4. ファイルを保存します。Save the file.

  5. getPropertyPaneConfiguration メソッドを次のコードに置き換えます。これにより、新しいプロパティ ウィンドウ フィールドを追加し、それらを対応する型指定されたオブジェクトにマッピングします。Replace the getPropertyPaneConfiguration method with the following code, which adds the new property pane fields and maps them to their respective typed objects.

    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
         {
           header: {
             description: strings.PropertyPaneDescription
           },
           groups: [
             {
               groupName: strings.BasicGroupName,
               groupFields: [
               PropertyPaneTextField('description', {
                 label: 'Description'
               }),
               PropertyPaneTextField('test', {
                 label: 'Multi-line Text Field',
                 multiline: true
               }),
               PropertyPaneCheckbox('test1', {
                 text: 'Checkbox'
               }),
               PropertyPaneDropdown('test2', {
                 label: 'Dropdown',
                 options: [
                   { key: '1', text: 'One' },
                   { key: '2', text: 'Two' },
                   { key: '3', text: 'Three' },
                   { key: '4', text: 'Four' }
                 ]}),
               PropertyPaneToggle('test3', {
                 label: 'Toggle',
                 onText: 'On',
                 offText: 'Off'
               })
             ]
             }
           ]
         }
       ]
     };
    }
    
  6. プロパティを Web パーツのプロパティに追加すると、以前に説明のプロパティにアクセスした同じ方法で、プロパティにアクセスできるようになります。After you add your properties to the web part properties, you can now access the properties in the same way you accessed the description property earlier:

    <p class="${ styles.description }">${escape(this.properties.test)}</p>
    

    プロパティの既定値を設定するには、Web パーツのマニフェストの properties プロパティ バッグを更新する必要があります。To set the default value for the properties, you need to update the web part manifest's properties property bag.

  7. HelloWorldWebPart.manifest.json を開き、properties を次のものに変更します。Open HelloWorldWebPart.manifest.json and modify the properties to:

    "properties": {
     "description": "HelloWorld",
     "test": "Multi-line text field",
     "test1": true,
     "test2": "2",
     "test3": true
    }
    

Web パーツのプロパティ ウィンドウは、これらのプロパティの既定値を持つようになります。The web part property pane now has these default values for those properties.

Web パーツのマニフェストWeb part manifest

HelloWorldWebPart.manifest.json ファイルでは、バージョン、ID、表示名、アイコン、説明など Web パーツのメタデータを定義します。The HelloWorldWebPart.manifest.json file defines the web part metadata such as version, id, display name, icon, and description. すべての Web パーツには、このマニフェストが含まれる必要があります。Every web part must contain this manifest.

{
  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "7d5437ee-afc2-4e66-914b-80be5ace4056",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld",
      "test": "Multi-line text field",
      "test1": true,
      "test2": "2",
      "test3": true
    }
  }]
}


これで新しいプロパティが導入されました。次のコマンドを実行して、ローカルの開発環境から Web パーツを再びホストしていることを確認します。Now that we have introduced new properties, ensure that you are again hosting the web part from the local development environment by executing the following command. これにより、前述の変更が正しく適用されたことも確認できます。This also ensures that the previous changes were correctly applied.

gulp serve

SharePoint で Web パーツをプレビューするPreview the web part in SharePoint

SharePoint ワークベンチは、SharePoint でもホストされ、開発中のローカル Web パーツをプレビューしテストします。SharePoint Workbench is also hosted in SharePoint to preview and test your local web parts in development. 主な利点は、SharePoint のコンテキストで実行していることと、SharePoint データを操作できることです。The key advantage is that now you are running in SharePoint context and you are able to interact with SharePoint data.

  1. 次の URL に移動します。https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspxGo to the following URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx

    注意

    SPFx 開発者の証明書がインストールされていない場合、ワークベンチにより localhost からスクリプトを読み込まないように構成されていると通知を受けます。If you do not have the SPFx developer certificate installed, Workbench notifies you that it is configured not to load scripts from localhost. コンソール ウィンドウで現在実行中のプロセスを停止し、gulp serve コマンドを再度実行する前に、gulp trust-dev-cert コマンドをプロジェクト ディレクトリ コンソールで実行して、開発者証明書をインストールします。Stop the currently running process in the console window, and execute the gulp trust-dev-cert command in your project directory console to install the developer certificate before running the gulp servecommand again.

    SharePoint Online サイトで実行される SharePoint ワークベンチ

  2. SharePoint ワークベンチに Office 365 スイートのナビゲーション バーがあります。Notice that the SharePoint Workbench now has the Office 365 Suite navigation bar.

  3. キャンバス内の [追加] アイコンを選択して、ツールボックスを表示します。Select the add icon in the canvas to reveal the toolbox. ツールボックスには、HelloWorldWebPart と併せて SharePoint ワークベンチがホストされているサイトで利用可能な Web パーツが表示されます。The toolbox now shows the web parts available on the site where the SharePoint Workbench is hosted along with your HelloWorldWebPart.

    SharePoint Online サイトで実行される SharePoint ワークベンチ内のツールボックス

  4. ツールボックスから HelloWorld を追加します。Add HelloWorld from the toolbox. これで、SharePoint 内でホストされるページで、Web パーツを実行しています。Now you're running your web part in a page hosted in SharePoint!

    SharePoint Online サイトで実行される SharePoint ワークベンチで実行される HelloWorld の Web パーツ

注意

Web パーツの色は、サイトの色に依存します。The color of the web part depends on the colors of the site. 既定では、Web パーツがホストされているサイトで使用されている Office UI Fabric Core スタイルを動的に参照することにより、Web パーツはサイトのコア色を継承します。By default, web parts inherit the core colors from the site by dynamically referencing Office UI Fabric Core styles used in the site where the web part is hosted.

Web パーツはまだ開発中でテスト段階のため、Web パーツをパッケージ化し SharePoint に配置する必要はありません。Because you are still developing and testing your web part, there is no need to package and deploy your web part to SharePoint.

次の手順Next steps

おめでとうございます。Hello World Web パーツを初めて実行できました。Congratulations on getting your first Hello World web part running!

Web パーツは実行していますので、次のトピック、「Web パーツを SharePoint に接続する」で、Hello World Web パーツのビルドを続けることができます。Now that your web part is running, you can continue building out your Hello World web part in the next topic, Connect your web part to SharePoint. 同じ Hello World Web パーツ プロジェクトを使用して、SharePoint REST API と相互に操作する機能を追加します。You will use the same Hello World web part project and add the ability to interact with SharePoint List REST APIs. なお、gulp serve コマンドは、コンソール ウィンドウ内 (または、エディターとして使用している場合は Visual Studio Code 内) で引き続き実行中です。Notice that the gulp serve command is still running in your console window (or in Visual Studio Code if you are using that as editor). それを実行しながら、次の記事に移動します。You can continue to let it run while you go to the next article.

注意

ドキュメントまたは 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.