Power Apps コンポーネントでの React の使用について

10 分

React は、ユーザーインターフェイスを構築するための標準化されたクライアントフレームワークです。宣言的な方法で対話型の UI を作成できると同時に、コンポーネントをカプセル化して複雑な UI を作成するためのメカニズムを提供し、コンポーネントの状態を管理したり、対話性を高めたりすることができます。 React は JavaScript で記述されているため、Power Apps コンポーネント内でこのフレームワークを使用できます。

React に不慣れな方は、「React」を参照してください。React コンポーネントの構築方法について、多彩なチュートリアルとリソースを利用できます。

コードコンポーネント用にコンピューターを準備する

コードコンポーネントを構築するためにコンピューターを準備する場合は、次の手順を実行します。

npm (Node.js に付属) または Node.js (npm に付属) をインストールします。 LTS (長期サポート) バージョンのご利用をお勧めします。
Visual Studio Code をインストールします。
Power Platform Tools 拡張機能をインストールします。
Visual Studio ダウンロードから、Visual Studio Build Tools をインストールします。

Fluent UI

Microsoft はこれまで数多くの優れた製品を開発してきましたが、その 1 つが Fluent UI の実装です。Fluent UI は、広範な Microsoft 製品にシームレスに適合する、使いやすいエクスペリエンスを構築する場合に使用できる UX フレームワークのコレクションです。 Fluent UI は、ライブラリを参照するだけで簡単に Power Apps コードコンポーネントで使用でき、React 固有バージョンの UI Fabric も用意されています。詳細については、「Fluent UI」を参照してください。

Facepile サンプルコンポーネントを実装する

重要

この演習で使用する FacePileComponent.zip という ZIP ファイルをダウンロードし、この ZIP ファイルを展開します。

この例では、FacePile Fluent UI コンポーネントを使用するコンポーネントを構築します。 FacePile によって、個人の顔やイニシャルがそれぞれ円で囲まれ、横並びで表示されます。

この表示方法が使用される具体的な例として、Microsoft Learn などで表示される記事やレコードへの投稿者の一覧があります。その画像を次に示します。

FacePile Fluent UI コンポーネントのスクリーンショット。

新しいコンポーネントプロジェクトを作成する

コンポーネントプロジェクトを作成するには、次の手順を実行します。

コンポーネントを構築するディレクトリを作成します。このサンプルではコンポーネントを C:\users\username\source\face-pile に配置しますが、独自のディレクトリを作成することもできます。独自のディレクトリを作成するには、Visual Studio Code を使用します。
Visual Studio Code を起動します。
ターミナルを選択し、新しいターミナルを選択して、ターミナルシェルをコマンドプロンプトに切り替えます。

メモ

Visual Studio Code のターミナルに詳しくない場合は、「ターミナルの基本」を参照して、詳細を確認してください。
ソースフォルダーを作成します。
```
md \source
```
ディレクトリをソースフォルダーに変更します。
```
cd \source
```
ソースディレクトリで、face-pile という名前のディレクトリを作成します。
```
md face-pile
```
カレントディレクトリを作成したディレクトリに変更します。
```
 cd face-pile
```
これで、作成した新しいディレクトリで作業することになります。
Power Platform CLI で次のコマンドを使用して、コンポーネントプロジェクトを初期化します。
```
pac pcf init --namespace Learn --name ReactFacePile --template field --framework React
```
コマンド npm install を使用して、プロジェクトビルドツールをインストールします。警告がいくつか表示される場合がありますが、無視してかまいません。
```
npm install
```
次のコマンドを実行して、Visual Studio Code でプロジェクトを開きます。
```
code -a .
```
プロジェクトは次の画像のようになります。

コードコンポーネントのロジックを実装する

コードコンポーネントのロジックを実装するには、次の手順を実行します。

ReactFacePile フォルダーを展開し、ControlManifest.Input.xml ファイルを開きます。

property ノードを見つけ、次の XML と置き換えます。

<property name="numberOfFaces" display-name-key="numberOfFaces_Display_Key" description-key="numberOfFaces_Desc_Key" of-type="Whole.None" usage="bound" required="false" />

resources を見つけ、css および resx をコメント解除します。
ControlManifest.Input.xml ファイルが選択されたままになっていることを確認し、New Folder を選択します。
新しいフォルダーに components という名前を付けます。
ダウンロードした FacePileComponent.zip ファイルを展開したフォルダに移動し、FacePileComponent フォルダーを開きます。
FacePileComponents フォルダー内のファイルをドラッグし、作成した components フォルダーにドロップします。
components フォルダーに 2 つのファイルが作成されました。
Index.ts ファイルを開きます。
import { HelloWorld, IHelloWorldProps } from "./HelloWorld"; を次のスニペットで置き換えます。
```
import { FacepileBasicExample, IFacepileBasicExampleProps } from "./components/Facepile" ;
```
import のスニペットの後に、次の定数を追加します。
```
const DEFAULT_NUMBER_OF_FACES = 3;
```

コンストラクターの前に次のスニペットを追加します。

private props: IFacepileBasicExampleProps = {
    numberFacesChanged: this.numberFacesChanged.bind(this),
};

加えた変更は次の画像のようになります。
init メソッドを見つけ、this.notifyOutputChanged = notifyOutputChanged; 行の後に次のスニペットを追加します
```
this.props.numberOfFaces = context.parameters.numberOfFaces.raw || DEFAULT_NUMBER_OF_FACES;
```

updateView メソッドを、次のメソッドに置き換えます。

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
    if (context.updatedProperties.indexOf("numberOfFaces") > -1) {
        this.props.numberOfFaces = context.parameters.numberOfFaces.raw || DEFAULT_NUMBER_OF_FACES;
    }
    return React.createElement(FacepileBasicExample, this.props);
}

init と updateView の各メソッドは、次の画像のようになります。

getOutputs メソッドを、次のメソッドに置き換えます。

public getOutputs(): IOutputs {
    return {
        numberOfFaces: this.props.numberOfFaces,
    };
}

destroy メソッドの後に次のメソッドを追加します。

private numberFacesChanged(newValue: number) {
    if (this.props.numberOfFaces !== newValue) {
        this.props.numberOfFaces = newValue;
        this.notifyOutputChanged();
    }
}

ファイルを選択して、変更をすべて保存します。

コードコンポーネントにスタイル設定を追加する

コードコンポーネントにスタイル設定を追加するには、以下の手順を実行します。

ControlManifest.Input.xml ファイルを選択し、New Folder を選択します。
新しいフォルダーに css という名前を付けます。
作成した css フォルダーを選択し、新しいファイルを選択します。
新しいファイルに ReactFacePile.css という名前を付けます。

作成した ReactFacePile.css ファイルを開き、次の CSS スニペットを貼り付けます。

msFacepileExample {
max-width: 300px;
}
.msFacepileExample .control {
 padding-top: 20px;
}
.msFacepileExample .ms-Dropdown-container, .msFacepileExample.ms-Slider {
margin: 10px 0 10px 0;
}
.msFacepileExample .ms-Dropdown-container .ms-Label {
padding-top: 0;
}
.msFacepileExample .ms-Checkbox {
padding-top: 15px;
}
.exampleCheckbox {
margin: 10px 0;
}
.exampleLabel {
margin: 10px 0;
}

ファイルを選択して、変更を保存します。
ControlManifest.Input.xml ファイルを選択し、New Folder を選択します。
新しいフォルダーに strings という名前を付けます。
ダウンロードした FacePileComponent.zip ファイルを展開したフォルダに移動し、FacePileStrings フォルダーを開きます。
ReactFacePile.1033.resx ファイルをドラッグし、作成した strings フォルダーにドロップします。
strings フォルダーに resx ファイルが追加されました。
ファイルを選択して、変更を保存します。
ターミナルに移動し、次のビルドコマンドを実行します。
```
npm run build
```
メモ

JSX が定義されていないというエラーが表示された場合は、.eslintrc.json ファイルを開いてください。 11 行目の "ComponentFramework": true にコンマを追加し、新しい行を追加して "JSX": true と入力します。 41 行目の JSX.Element を React.JSX.Element に変更します。変更を保存し、npm run build コマンドを繰り返します。
ビルドが正常に完了します。
次のコマンドを実行して、コンポーネントをテストします。
```
npm start
```
新しいブラウザーウィンドウにテストハーネスが開きます。
コンポーネントが次の画像のようになります。
コンテナーのサイズを 500 x 220 に変更し、スライダーを 5 に移動します。
コンポーネントが次の画像のようになります。テストハーネスのブラウザーセッションを閉じます。
テストハーネスのブラウザーセッションを閉じます。
ターミナルに戻り、Ctrl + C キーを押したまま Watcher を停止します。
Y と入力し、Enter を押します。

詳細については、「FacePile コンポーネントの実装」を参照してください。

Power Apps コンポーネントでの React の使用について

コード コンポーネント用にコンピューターを準備する

Fluent UI

Facepile サンプル コンポーネントを実装する

新しいコンポーネント プロジェクトを作成する

コード コンポーネントのロジックを実装する

コード コンポーネントにスタイル設定を追加する

フィードバック

コードコンポーネント用にコンピューターを準備する

Facepile サンプルコンポーネントを実装する

新しいコンポーネントプロジェクトを作成する

コードコンポーネントのロジックを実装する

コードコンポーネントにスタイル設定を追加する