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 パッケージ名	Version
React	react	16.8.6
Fluent	@fluentui/react	8.29.0
Fluent	@fluentui/react	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 分かかります。 個人データは収集されません (プライバシー ステートメント)。