React コントロールとプラットフォーム ライブラリ

React とプラットフォーム ライブラリを使用する場合は、Power Apps プラットフォームと同じインフラストラクチャを使用します。 このインフラストラクチャでは、コントロールごとに React ライブラリと Fluent ライブラリを個別にパッケージ化する必要がなくなりました。 すべてのコントロールが共通のライブラリ インスタンスとバージョンを共有し、シームレスで一貫性のあるエクスペリエンスを提供します。

既存のプラットフォームの React と Fluent ライブラリを再利用することで、次のメリットを期待できます:

  • コントロール バンドル サイズの縮小
  • 最適化されたソリューションのパッケージ化
  • ランタイム転送、スクリプティング、コントロール レンダリングの高速化
  • Power Apps Fluent デザイン システムによる設計とテーマの整合性

これらの利点により、この機能が一般提供に達した後、このアプローチがすべてのPower Appsコード コンポーネントを作成するための推奨される方法になることが期待されます。

前提条件

他のコンポーネントと同様に、前提条件の説明に従って、Visual Studio Code と Microsoft Power Platform CLI をインストールします。

注

Windows用の Power Platform CLI を既にインストールしている場合は、pac install latest コマンドを使用して最新バージョンであることを確認してください。 Visual Studio Code の Power Platform Tools は自動的に更新されます。

React コンポーネントの作成

注

これらの手順は、コード コンポーネントを作成済みであることを前提としています。 まだ行っていない場合は、このチュートリアル「最初のコンポーネントを作成する」を参照してください。

pac pcf init コマンドに、新しい --framework (-fw) パラメーターがあります。 このパラメーターの値を react に設定します。

次の表に、コマンドの長い形式を示します。

パラメーター 値
--name ReactSample
--namespace SampleNamespace
--template field
--framework react
--run-npm-install true (既定)

次の PowerShell コマンドでは、パラメーターのショートカットを使用して React コンポーネント プロジェクトを作成し、コマンドを実行したフォルダーで npm-install を実行します。

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

npm startを使用して、テスト ハーネス内のコントロールを通常どおりにビルドして表示できるようになりました。

コントロールを構築すると、ソリューション内でパッケージ化して、(カスタム ページを含む) モデル駆動型アプリおよびキャンバス アプリで、標準コード コンポーネントのように使用できます。

標準コンポーネントとの違い

このセクションは、React コンポーネントと標準コンポーネントの差異を説明します。

ControlManifest.Input.xml

コントロール要素control-type属性をvirtualではなくstandardに設定します。

注

この値を変更しても、ある型から別の型にコンポーネントが変換されることはありません。

リソース要素 内で、次に示す例のような 2 つの新しい プラットフォーム-ライブラリ要素 の子要素を見つけます。

<resources>
  <code path="index.ts" order="1" />
  <platform-library name="React" version="16.14.0" />
  <platform-library name="Fluent" version="9.46.2" />
</resources>

注

サポート対象のプラットフォーム ライブラリ バージョンの詳細については、サポートされているプラットフォーム ライブラリ一覧を参照してください。

Fluent 8 および 9 のプラットフォーム ライブラリを使用します。 Fluent を使用しない場合は、Fluent 属性の値が platform-library である name 要素を削除します。

Index.ts

React コントロールは DOM を直接レンダリングしないため、コントロールの初期化で使用する ReactControl.init メソッドには div パラメーターがありません。 代わりに、 ReactControl.updateView は React 形式の実際のコントロールの詳細を持つ ReactElement を返します。

bundle.js

パッケージには、React ライブラリと Fluent ライブラリは共有されているため、含まれません。 この共有により、bundle.js のサイズが小さくなります。

サンプル コントロール

サンプルには、次のコントロールが含まれています。 これらは標準バージョンと同じように機能しますが、仮想コントロールであるため、より優れたパフォーマンスを提供します。

Sample 説明 Link
ChoicesPickerReact React コントロールになるよう変換された標準 ChoicesPickerControl。 ChoicesPickerReact サンプル
FacepileReact ReactStandardControl は React コントロールに変換されました。 FacepileReact

サポートされるプラットフォーム ライブラリの一覧

プラットフォーム ライブラリは、プラットフォーム ライブラリ機能を使用するコントロールのビルドとランタイムの両方で使用できます。 現在、プラットフォームでは次のバージョンが提供されています。以下はサポートされている中で最も高いバージョンです。

名前 npm パッケージ名 許容されるバージョンの範囲 バージョンを読み込みました
React react 16.14.0 17.0.2 (モデル)、16.14.0 (キャンバス)
流暢 @fluentui/react 8.29.0 8.29.0
流暢 @fluentui/react 8.121.1 8.121.1
Fluent @fluentui/react-components >=9.4.0 <=9.46.2 9.68.0

注

アプリケーションは実行時にプラットフォーム ライブラリのより互換性の高いバージョンを読み込む可能性がありますが、そのバージョンは利用可能な最新バージョンではない可能性があります。 マニフェストでは Fluent 8 または Fluent 9 を指定できますが、両方を指定することはできません。

FAQ

Q: プラットフォーム ライブラリを使用して、既存の標準コントロールを React コントロールに変換できますか?

A: いいえ。 新しいテンプレートを使用して新しいコントロールを作成し、マニフェストと index.ts のメソッドを更新する必要があります。 参考までに、前のセクションで説明した標準サンプルと React サンプルを比較してください。

Q: Power Pagesで React コントロールとプラットフォーム ライブラリを使用できますか?

A: いいえ。 React コントロールとプラットフォーム ライブラリは、現在、キャンバスアプリとモデル駆動型アプリでのみ機能します。 Power Pages では、React コントロールは他のフィールドの変更に基づいて更新されません。

コードコンポーネントとは？
キャンバス アプリのコード コンポーネント
コードコンポーネントを作成してビルドする
Power Apps component framework を学ぶ
Power Pages でコード コンポーネントを使用する

  • 最終更新: