次の方法で共有

React のコントロールとプラットフォーム ライブラリ (プレビュー)

  • [アーティクル]

[このトピックはプレリリース ドキュメントであり、変更されることがあります。]

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

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

  • コントロール バンドル サイズの縮小
  • 最適化されたソリューション パッケージ
  • ランタイム転送、スクリプティング、コントロール レンダリングの高速化

これらのコンポーネント リソースの再利用で得られるメリットにより、この機能が一般提供された後で、このアプローチがすべての Power Apps コード コンポーネントを作成する際の推奨される方法になる予定です。

前提条件

他のコンポーネントと同様に、前提条件 で説明した通り Visual Studio Code と Microsoft Power Platform CLI をインストールする必要があります

注意

Power Platform CLI for Windows をインストール済みの場合は、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 属性が standard ではなく virtual に設定されます。

注意

この値を変更しても、コンポーネントは別のタイプに変換されません。

リソース要素 には、次に示す 2 つの新しい プラットフォーム-ライブラリ要素 の子要素があります。

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

注意

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

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

Index.ts

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

bundle.js

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

サンプル コントロール

このプレビューの一部として、サンプルに追加された 2 つの新しいコントロールを確認できます。 機能としては標準バージョンと同様ですが、パフォーマンスがに向上します。

サンプル 説明 リンク
ChoicesPickerReact 標準 ChoicesPickerControl は React コントロールに変換されました。 ChoicesPickerReact サンプル
FacepileReact ReactStandardControl は React コントロールに変換されました。 FacepileReact

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

プラットフォーム ライブラリは、プラットフォーム ライブラリ機能を使用するコントロールに対して、ビルド時と実行時の両方で使用できるようになります。 現在、プラットフォームでは以下のバージョンが提供されており、現在サポートされている最高のバージョンです。

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

注意

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

よくあるご質問

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

A: いいえ。 まず新しいテンプレートを使用して新しいコントロールを作成し、それから manifest と index.ts のメソッドを更新する必要があります。 参考までに、先に示した標準と React のサンプルを比較します。

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

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

コード コンポーネントとは?
キャンバス アプリのコード コンポーネント
コードコンポーネントを作成、構築する
Power Apps Component Framework の学習
Power Pages でコード コンポーネントを使用する

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。