SharePoint Framework 用の Yeoman ジェネレーターを実行します。

[アーティクル]
04/08/2023

Yeoman SharePoint Web パーツジェネレーターを使用すると、適切なツールチェーンとプロジェクト構造を持つ SharePoint のクライアント側のソリューションプロジェクトをすばやく作成できます。 Yeoman と共に使用され、プロジェクトスキャフォールディング (フォルダー & ファイル) を作成するための質問を求められます。

重要

このページでは、SharePoint Framework ソリューションを開発するために必要なすべての前提条件が既にインストールされていることを前提としています。ページ SharePoint Framework 開発環境のセットアップで概要説明されている更新された手順を確認します。

SharePoint Online SPFx Yeoman ジェネレーター ("SPFx ジェネレーター") では、開発者に求めた質問への回答を使用して、新しい SharePoint Framework (SPFx) プロジェクトが作成されます。一部のプロンプト応答に応じて、他の質問が表示されます。

たとえば、WebPart コンポーネントの種類を選択すると、Web パーツ名とテンプレートの種類についての質問のみが表示されます。ただし、Extension コンポーネントの種類を選択すると、アプリケーションカスタマイザー、フィールドカスタマイザー、ListView コマンドセットなどの拡張機能の種類の入力も求められます。

次に、Minimal プロジェクトテンプレートを使用する HelloWorld という名前の Web パーツを使用して、現在のフォルダー sfpxplay-01 という名前の新しいソリューションを作成する方法を示します。

yo @microsoft/sharepoint --skip-install

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  SharePoint Online SPFx  │
   `---------´   │          Yeoman          │
    ( _´U`_ )    │     Generator@1.14.0     │
    /___A___\   /╰──────────────────────────╯
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Let's create a new SharePoint solution.
? What is your solution name? spfxplay-01
? Which type of client-side component to create? WebPart
Add new Web part to solution spfxplay-01.
? What is your Web part name? HelloWorld
? Which template would you like to use? Minimal

   create package.json
    force .yo-rc.json
   create config/package-solution.json
   create config/config.json
   create config/serve.json
   create tsconfig.json
   create .vscode/launch.json
   create .vscode/settings.json
   create config/deploy-azure-storage.json
   create config/write-manifests.json
   create src/index.ts
   create README.md
   create .gitignore
   create .npmignore
   create gulpfile.js
   create tslint.json
   create src/webparts/helloWorld/loc/en-us.js
   create src/webparts/helloWorld/loc/mystrings.d.ts
   create src/webparts/helloWorld/HelloWorldWebPart.module.scss
   create src/webparts/helloWorld/HelloWorldWebPart.ts
   create src/webparts/helloWorld/HelloWorldWebPart.manifest.json
   create teams/55564fc2-179d-4bc1-bd63-9ede8183dadc_outline.png
   create teams/55564fc2-179d-4bc1-bd63-9ede8183dadc_color.png

Changes to package.json were detected.
Skipping package manager install.

      _=+#####!
   ###########|       .------------------------------------.
   ###/    (##|(@)    |          Congratulations!          |
   ###  ######|   \   |  Solution spfxplay-01 is created.  |
   ###/   /###|   (@) |   Run gulp serve to play with it!  |
   #######  ##|   /   '------------------------------------'
   ###     /##|(@)
   ###########|
      **=+####!

ヒント

さまざまなコンポーネントの種類とオプションについては、このサイトのドキュメント全体で説明します。すべてのオプションについてこのページでは説明しているわけではありません。各コンポーネントの種類の詳細については、ドキュメント全体で関連トピックを参照してください。

SharePoint Online SPFx Yeoman ジェネレーターをインストールする

SPFx ジェネレーターは npm パッケージとして利用できます。コンソールで次のコマンドを実行して、SPFx ジェネレーターの最新バージョンをインストールします。

npm install @microsoft/generator-sharepoint -g

パッケージ名に @1 で区切ってバージョン番号を指定することにより、ジェネレーターの特定のバージョンをインストールすることもできます。たとえば、SPFx ジェネレーター v1.10 をインストールするには、次のコマンドを実行します。

npm install @microsoft/generator-sharepoint@1.10 -g

プロジェクトテンプレートのオプション

SPFx v1.14 より前のジェネレーターでは、開発者に次の 2 つのプロジェクトテンプレートが提供されました:

No JavaScript Framework:
React

注:

3 番目のオプション Knockout は、SPFx v1.10 を通じてすべての SPFx リリースで使用できました。 Knockout は SPFx v1.11 のオプションとして廃止されました。

これらのテンプレートには、ソリューションの作成を開始するために必要最小限のコードが含まれていました。 No JavaScript Framework テンプレートは HTML と CSS を使用して基本コンポーネントのスタイルを設定していました。一方、React テンプレートは HTML、React、CSS を使用して同じことを行いました。

SPFx v1.14 でテーマサポートを使用して更新されたプロジェクトテンプレート

SPFx v1.14 リリースでは、SPFx ジェネレーターで新しい & 更新されたプロジェクトテンプレートが導入されました。これらのテンプレートの目的は、コンポーネントが実行されている現在の環境 (SharePoint または Microsoft Teams) でテーマをサポートするために必要なコードを含めることです。

これらのテンプレートに含まれるコードにより、開発者がコンポーネントにテーマのサポートを追加するために行う必要がある初期作業が簡略化されます。たとえば、これらのテンプレートを使用すると、現在の SharePoint サイトで使用されている色とフォントを決定するために必要なすべてのコードが Web パーツ内で使用でき、新しいテーマ設定を取得するためにテーマが変更されると Web パーツに通知されます。

Microsoft Teams のコンテキストで使用される SPFx コンポーネントの場合、既定 (ライト)、ダーク、ハイコントラストなど、現在の Microsoft Teams クライアントのテーマの詳細を受け取ります。

さらに、これらのテンプレートには、コンポーネントが SharePoint コンテキストまたは Microsoft Teams コンテキストで現在実行されているかどうかを判断するコードが含まれています。

たとえば、次のメソッドは両方のテンプレートに含まれています。 _getEnvironmentMessage() メソッドは、コンポーネントが現在 SharePoint または Microsoft Teams で実行されているかどうか、およびコンポーネントが運用環境または開発 (localhost から提供) に展開されているかどうかを示す文字列を返します。 onThemeChanged() は、現在のテーマがダークモードかどうかを判断し、現在のテーマの色に基づいていくつかの変更をプロパティに適用します:

private _getEnvironmentMessage(): string {
  if (!!this.context.sdks.microsoftTeams) { // running in Teams
    return this.context.isServedFromLocalhost
        ? strings.AppLocalEnvironmentTeams
        : strings.AppTeamsTabEnvironment;
  }

  return this.context.isServedFromLocalhost
        ? strings.AppLocalEnvironmentSharePoint
        : strings.AppSharePointEnvironment;
}

protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
  if (!currentTheme) {
    return;
  }

  this._isDarkTheme = !!currentTheme.isInverted;
  const {
    semanticColors
  } = currentTheme;
  this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);
  this.domElement.style.setProperty('--link', semanticColors.link);
  this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);

}

最小限のプロジェクトテンプレート

SPFx v1.14 の SPFx ジェネレーターに新しいプロジェクトテンプレートオプション Minimal が追加されました。このプロジェクトテンプレートオプションには、新しいプロジェクトにテーマまたはホスト環境コードが含まれていません。

たとえば、新しい Web パーツプロジェクトは次のコードで始まり、Web パーツの実行に必要な最小限のコードを表します。

export default class HelloWorldMinimalWebPart
          extends BaseClientSideWebPart<IHelloWorldMinimalWebPartProps> {

  protected onInit(): Promise<void> {
    return super.onInit();
  }

  public render(): void {
    this.domElement.innerHTML = `<div class="${ styles.helloWorldMinimal }"></div>`;
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

廃止されたジェネレータープロンプト

SharePoint Framework の各リリースでは、Yeoman ジェネレーターでプロンプトを追加または削除できます。プロジェクトの作成エクスペリエンスを簡略化するために、プロンプトが削除されました。

次のセクションには、廃止されたガイダンスとそれに該当するガイダンスがあります。

さまざまな SharePoint 環境をターゲットにする

SPFx v1.13 release では、次のプロンプトが廃止されました:

どのベースラインパッケージをコンポーネントのターゲットにしたいですか?

このプロンプトでは、特定の SharePoint 展開を対象とするプロジェクトを作成するオプションを開発者に提示していました。これには、次のものが含まれます:

SharePoint Online のみ (最新)
2019 および SharePoint Online を含む、SharePoint 2016 以降
Point Online を含む、SharePoint 2019 以降

SPFx v1.13 以降、ジェネレーターでは SharePoint Online のプロジェクトのみを作成できます。

フィーチャー展開のスキップ - `skipFeatureDeployment`

SPFx v1.14 リリースでは、次のプロンプトが廃止されました:

テナント管理者が、サイトで機能を展開したり、アプリを追加したりせず、すぐにすべてのサイトでソリューションを展開できるようにしたいですか?

この質問では、テナント内のすべてのサイトにソリューションを自動的にインストールする必要があるかどうか、または各サイトに手動でインストールする必要があるかが尋ねられています。既定のオプションは [N]o でした。

注:

このプロンプトの詳細については、「SharePoint Framework ソリューションのテナントスコープソリューションの展開」を参照してください。

この質問の結果は、プロジェクトの ./config/package-solution.json ファイルの skipFeatureDeployment プロパティに設定されていました。

SPFx v1.14 以降では、skipFeatureDeployment プロパティの既定値は true になります。必要に応じて、プロジェクトの作成後にこのプロパティの値を変更できます。

ドメイン分離 Web パーツ - `isDomainIsolated`

SPFx v1.14 リリースでは、次のプロンプトが廃止されました:

ソリューションのコンポーネントには、テナント内の他のコンポーネントと共有されていない一意の Web API にアクセスするためのアクセス許可が必要ですか?

この質問では、ソリューション内の Web パーツを一意のドメインの IFRAME 内にレンダリングするか、現在のページとして DIV にレンダリングするかが尋ねられています。既定のオプションは [N]o でした。

注:

このプロンプトに関する詳細: .分離された Web パーツ

この質問の結果は、プロジェクトの ./config/package-solution.json ファイルの isDomainIsolated プロパティに設定されていました。

SPFx v1.14 以降では、isDomainIsolated プロパティの既定値は false になります。必要に応じて、プロジェクトの作成後にこのプロパティの値を変更できます。

どのフレームワークを使用しますか?

SPFx v1.14 リリースでは、次のプロンプトが変更されました:

どのフレームワークを使用しますか?

このプロンプトは、SPFx 拡張機能の Web パーツ & の種類など、特定のプロジェクトの種類に対して表示されました。これにより、開発者は異なるプロジェクトテンプレートから選択できました: No JavaScript Framework または React。

Yeoman ジェネレーターによって作成された既定のプロジェクトスキャフォールディングは、選択したオプションを使用して決定されました。

SPFx v1.14 では、このプロンプトは次のように変更され、Minimal、No framework、または Reactの 3 つの選択肢がユーザーに表示されました。

どのテンプレートを使用しますか?

コンポーネントの説明

SPFx v1.14 release では、次のプロンプトが廃止されました:

Web パーツで何を行いますか?

アプリケーションカスタマイザーの説明は?

フィールドカスタマイザーの説明は何ですか?

ListView コマンドセットの説明は何ですか?

ライブラリの説明は何ですか?

アダプティブカード拡張機能の説明は何ですか?

これらのプロンプトの値は、コンポーネントの *.manifest.json ファイルのプロパティに設定preConfiguredEntries[0].description.default&preConfiguredEntries[0].properties.descriptionされました。

SPFx v1.14 以降では、これらのプロパティは空の文字列に設定されています。必要に応じて、プロジェクトの作成後にこれらのプロパティの値を変更できます。

SPFx ジェネレーターのコマンドラインオプション

プロンプトを表示する代わりに、SPFx ジェネレーターのコマンドラインオプションを使用して、1 つのコマンドでプロジェクトを作成できます。次のコマンドを実行して、SharePoint ジェネレーターに使用できるコマンドラインオプションの一覧を表示します。

yo @microsoft/sharepoint --help

SharePoint Framework 用の Yeoman ジェネレーターを実行します。

SharePoint Online SPFx Yeoman ジェネレーターをインストールする

プロジェクト テンプレートのオプション

SPFx v1.14 でテーマ サポートを使用して更新されたプロジェクト テンプレート

最小限のプロジェクト テンプレート

廃止されたジェネレーター プロンプト

さまざまな SharePoint 環境をターゲットにする

フィーチャー展開のスキップ - skipFeatureDeployment

ドメイン分離 Web パーツ - isDomainIsolated

どのフレームワークを使用しますか?

コンポーネントの説明

SPFx ジェネレーターのコマンド ライン オプション

その他のリソース

プロジェクトテンプレートのオプション

SPFx v1.14 でテーマサポートを使用して更新されたプロジェクトテンプレート

最小限のプロジェクトテンプレート

廃止されたジェネレータープロンプト

フィーチャー展開のスキップ - `skipFeatureDeployment`

ドメイン分離 Web パーツ - `isDomainIsolated`

SPFx ジェネレーターのコマンドラインオプション