React のコントロールとプラットフォーム ライブラリ
React とプラットフォーム ライブラリを使用する場合、Power Apps プラットフォームで使用されているのと同じインフラストラクチャを使用します。 つまり、React パッケージと Fluent ライブラリをコントロールごとに個別にパッケージ化する必要はありません。 すべてのコントロールが共通のライブラリ インスタンスとバージョンを共有し、シームレスで一貫性のあるエクスペリエンスを提供します。
既存のプラットフォームの React と Fluent ライブラリを再利用することで、次のメリットを期待できます:
- コントロール バンドル サイズの縮小
- 最適化されたソリューション パッケージ
- ランタイム転送、スクリプティング、コントロール レンダリングの高速化
- Power Apps Fluent デザイン システムによる設計とテーマの整合性
これらのコンポーネント リソースの再利用で得られるメリットにより、この機能が一般提供された後で、このアプローチがすべての Power Apps コード コンポーネントを作成する際の推奨される方法になる予定です。
ヒント
GA リリースでは、既存のすべての仮想コントロールは引き続き機能します。 ただし、将来のプラットフォーム React バージョンのアップグレードを容易にするために、最新の CLI バージョン (>=1.37) を使用して再構築およびデプロイする必要があります。
前提条件
他のコンポーネントと同様に、前提条件 で説明した通り 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.14.0" />
<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 のサイズは小さくなります。
サンプル コントロール
サンプルには、次のコントロールが含まれています。 これらは標準バージョンと同じように機能しますが、仮想コントロールであるため、より優れたパフォーマンスを提供します。
| Sample | プロパティ | Link |
|---|---|---|
| ChoicesPickerReact | 標準 ChoicesPickerControl は React コントロールに変換されました。 | ChoicesPickerReact サンプル |
| FacepileReact | ReactStandardControl は React コントロールに変換されました。 | FacepileReact |
サポートされるプラットフォーム ライブラリの一覧
プラットフォーム ライブラリは、プラットフォーム ライブラリ機能を使用するコントロールに対して、ビルド時と実行時の両方で使用できるようになります。 現在、プラットフォームでは以下のバージョンが提供されており、現在サポートされている最高のバージョンです。
| 件名 | npm パッケージ名 | 許容されるバージョンの範囲 | 読み込まれたバージョン |
|---|---|---|---|
| React | react | 16.14.0 | 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 でコード コンポーネントを使用する