ウィジェットを構築する Mendix React を使用 - パート 1 - カラーカウンター

ジョー・ロバートソン
2022 年 10 月 15 日
分読み

このブログは、独自のプラグイン可能なウィジェットの構築に慣れるためのウィジェット構築シリーズの最初のものです。 Mendixブログでは、ますます高度な概念を取り上げ、Typescript と Pluggable widgets API の理解、ブラウザでの機械学習モデルの実行、基本的な WebAssembly ゲームの構築など、さまざまなユースケースを取り上げます。

どこから始めるか

まだお持ちでない場合は、最初のプラグ可能なウィジェットを作成するための実例を確認してください。

プラグ可能なウィジェットは React Javascript フレームワークを使用します。このシリーズでは React の概念についていくつか触れますが、これは React の包括的な紹介ではありません。そのため、紹介や復習が必要な場合は、次のコースを強くお勧めします (このウィジェットのインスピレーションを見つけることもできます)。 React チュートリアル: React JS を学ぶ – 無料の 11 時間コース

このブログの目的

このブログでは、以下について説明します。

プラグイン可能なウィジェットプロジェクト構造
テストのセットアップと開発
React コンセプトの紹介
外部ライブラリの活用

私たちが構築しているもの

ボタンをクリックするだけで増減でき、クリックするとランダムに色が変わるカウンターを構築します。

プロジェクトの最終状態は、こちらで確認できます: GitHub – joe-robertson-mx/colourCount

スタートガイド

まず、ウィジェットをスキャフォールディングします。 Mendix ウィジェットジェネレーター yo @mendix/widget color count。これにより、HelloWorld 実装が実現します。

フォルダ構造:

ウィジェットフォルダーの構造は次のとおりです。

dist — ビルドされバンドルされたコードが出力される場所
node-modules — ノードの依存関係
src - src コードフォルダー
コンポーネント — 各コンポーネントフォルダーの jsx ファイル
ui — ウィジェットのスタイル設定用の CSS
package.xml — ウィジェットの構造を記述します
colourCount.editorConfig.ts — Studio Pro および Studio のデザインモードでのプレビュー用の設定
colourCount.editorPreview.jsx — Studio Pro および Studio でプレビューを提供するコンポーネント
colourCount.tsx — ウィジェットのエントリポイント
colourcount.xml — ウィジェットと Mendix
package.json — npmプロジェクトとウィジェットの依存関係を記述します
prettier.config.js — コードのprettierルールを変更できるようにする

テストと開発のセットアップ

テストを容易にするために、新しいブランクを作成します Mendix ウィジェットのターゲットとするバージョンのプロジェクト（./colourCount/tests/testProject）

実行してみましょう

完了したら、ビルドスクリプトを実行してウィジェットをテストしましょう。

ターミナルからウィジェットのルートディレクトリに移動し、次のように入力します。

npm ビルドを実行する

これにより、dist/ フォルダーとテストアプリの widgets フォルダーにウィジェットパッケージが作成されます。

ウィジェットの動作を確認するには、Studio Pro でテストアプリケーションを開き、F4 キーを押してファイルディレクトリを同期するだけです。その後、他のウィジェットと同じ方法でウィジェットをページに追加できます。

ウィジェットを設定し、パラメータがモデラーからフロントエンドのウィジェットに渡されていることを確認するには、渡すテキストを追加します。

アプリケーションを実行すると、

このウィジェットの展開とテストのプロセスは機能しますが、少し時間がかかります。プロセスを高速化するには、次のコマンドを実行してウィジェットサーバーを起動します。

npm実行開始

これにより、コードの変更が監視され、変更が反映されるには、キャッシュをクリアして強制的にリロードするだけです。

これは、Chrome で Chrome デベロッパーツール (Ctrl + Shift + i) を開き、更新ボタンを右クリックして [キャッシュを空にしてハード再読み込み] を選択することで実行できます。

コードを書く

コーディングの時間です!

始める前にいくつかの小さな変更点

React コードから始めましょう。まず、コンポーネントの名前をもっとわかりやすい「Count」に変更しましょう。

まず、HelloWorld.jsx 内のコンポーネントの名前を変更します。

import { createElement } from "react";
import { Count } from "./components/Count";
import "./ui/ColourCount.css";

export function ColourCount({ sampleText }) {
   return <Count sampleText={sampleText ? sampleText : "World"} />
}

また、ColourCount 内のコンポーネントと一致するようにファイルの名前を変更することもベストプラクティスです。

正しくインポートされるように、src/ui の CSS ファイルの名前を ColourCount.css に変更する必要があります。また、子コンポーネントも更新する必要があります。これを行うには、まず HelloWorldSample.jsx の名前を Count.jsx に変更し、その中のコンポーネントの名前を Count に更新します。

export function Count({ sampleText }: HelloWorldSampleProps) {
    return <div className="widget-hello-world">
              Hello {sampleText}
           </div>;
 }

開発プロセスをスピードアップするために、editorPreviewファイルを次のように更新して、残りのコードに依存しないように変更します。

import { ReactElement, createElement } from "react";

export function preview() {
    return <div />;
}

export function getPreviewCss() {
    return require("./ui/ColourCount.css");
}

コンポーネントの更新を始める前に、子コンポーネントの名前を「Count」というわかりやすい名前に変更しましょう。これを行うには、components/Count ファイルに含まれる Count コンポーネントを参照するように ColourCount 親コンポーネントを更新する必要があります。

ウィジェットのビルドは 3 つの部分に分けられます。

更新する Mendix カウンターの開始値として数値を受け入れるウィジェットインターフェース
この数値を変更するロジックを作成する
数字にランダムな色の変化を加える

更新 Mendix ウィジェットインターフェース

インターフェースは Mendix モデルとウィジェットはColourCounter.xmlマークアップで定義されています。数値を受け入れるように更新するには、「サンプルテキスト' 財産次へ：

<property key="initialValue" type="integer" required="true" defaultValue="5">
    <caption>Initial Value</caption>
    <description>The initial value of the counter</description></property>

もし私たちが Mendix モデルを更新するには、F4 キーを押してウィジェットを更新します。ウィジェットを開くと、新しいインターフェイスが表示されます。

ただし、これはまだコンポーネントに接続されていません。

これを実現するためには、 サンプルテキスト 　 初期値 ColourCount ファイル内:

import { createElement } from "react";
import { Count } from "./components/Count";
import "./ui/ColourCount.css";

export function ColourCount({ initialValue }) {
    return <Count initialValue={initialValue} />;
}

そしてカウントファイルでは

export function Count({ initialValue }) {
    return <div>{initialValue}</div>;
}

アプリケーションを再実行すると、初期値がレンダリングされているのがわかります。

プロパティ（またはprops）は、 Mendix ColourCount コンポーネントに適用され、関数内で構造化分解されて Count コンポーネントに渡されます。

JavaScript オブジェクトの構造化解除の詳細については、こちらをご覧ください。

この数値を変更するロジックを作成する

React では、プロパティを直接変更しないでください。代わりに、変更されたプロパティをコンポーネントの状態に保存します。

機能コンポーネントで状態を活用するには、useState フックを使用します。

React 16.8バージョンでフックが導入されました。これにより、クラスを書かずに状態やその他のReact機能を利用できるようになります。フックとは、関数コンポーネントからReactの状態やライフサイクル機能を「フック」する関数です。クラス内では動作しません。 React のフックの詳細については、こちらをご覧ください。

まず追加する必要があるのは 使用状態 輸入品に。

import { createElement, useState } from "react";

次に、Count コンポーネントに次のコードを追加します。

export function Count({ initialValue }) {
    const [count, setCount] = useState (initialValue)
    return <div>{count}</div>;
}

私たちが電話するとき 使用状態 状態変数の配列と状態変数を設定する関数を返します。これはすぐに カウント 状態と セットカウント 機能。

それは受け入れる 初期値 パラメータとして、作成時に count 変数の値を設定します。

これで状態を変更できるようになりました。 セットカウント状態を設定するときは、単に値を渡すことも、この場合のように、関数内のパラメータとして以前の状態を使用することもできます。

これを知っておくと、状態値を増やす関数を追加できます。

export function Count({ initialValue }) {

   const [count, setCount] = useState (initialValue)
   
   const increment = () => {
      setCount(prevState => prevState + 1);
   };

   return <div>{initialValue}</div>;
}

減分関数でも同じことができます。

次に、アプリケーションに必要な HTML をレンダリングするために JSX を更新する必要があります。

export function Count({ initialValue }) {
    const [count, setCount] = useState (initialValue)

    const increment = () => {
         setCount(prevState => prevState + 1);
    };

    const decrement = () => {
        setCount(prevState => prevState - 1);
    };

    return (
        <div>
              <p>{count}</p>
              <button onClick={increment}>+</button>
              <button onClick={decrement}>-</button>
       </div>
    );
}

アプリケーションを実行すると、状態ウィジェットに表示されるもの:

数字にランダムな色の変化を加える

カウントが変わったときにランダムな色を生成したいとします。これは時間のかかるコードですが、幸いにも npm レジストリに保存されている事前に作成されたソフトウェアパッケージを利用できます。 ランダムカラー

このパッケージは、呼び出されるとランダムな色を文字列として返す関数を提供します。このパッケージを活用するのは簡単です。まず、次のコマンドを実行してパッケージをインストールします。 npm install randomcolor ウィジェットフォルダー内にあります。

次に、Countファイルのコードを変更します。まず関数をインポートします。

import randomColor from 'randomcolor';

次に、色のプロパティを保持するための状態を初期化する必要があります。

const [colour, setColour] = useState('')

これを実現するには、ウィジェットのスタイルに色を反映させる必要もあります。HTML タグのスタイルプロパティを使用できます。スタイルプロパティは、適用するスタイルプロパティを持つ JS オブジェクトを受け入れます。

React を使用して Dom 要素のスタイルを設定する方法について詳しくは、こちらをご覧ください。

ここで、組み込みの Mendix クラス：

import { createElement, useState } from 'react'
import randomColor from 'randomcolor'
export function Count({ initialValue }) {
  const [count, setCount] = useState(initialValue)
  const [colour, setColour] = useState('')
  
  const increment = () => {
    setCount((prevState) => prevState + 1)
  }
  
  const decrement = () => {
    setCount((prevState) => prevState - 1)
  }
  
  return (
    <div>
      <p style={{ color: colour }}>{count}</p>
      <button className="mx-button btn-primary" onClick={increment}>
        +
      </button>
      <button className="mx-button" onClick={decrement}>
        -
      </button>
    </div>
  )

次に、count 変数が変更されたときに色の変更をトリガーする必要があります。これには、React で利用できる主要なユーティリティの 1 つを使用できます。 useEffect.

useEffect はフックであり、コンポーネントのレンダリングごとに関数 (副作用) を呼び出します。以下を追加することで、レンダリング時に色をランダムな値に設定できます。

import { createElement, useState } from 'react'
import randomColor from 'randomcolor'
export function Count({ initialValue }) {
  const [count, setCount] = useState(initialValue)
  const [colour, setColour] = useState('')
  
  useEffect(() => {
    setColour(randomColor())
  }, [])
  
  const increment = () => {
    setCount((prevState) => prevState + 1)
  }
  
  const decrement = () => {
    setCount((prevState) => prevState - 1)
  }
  
  return (
    <div>
      <p style={{ color: colour }}>{count}</p>
      <button className="mx-button btn-primary" onClick={increment}>
        +
      </button>
      <button className="mx-button" onClick={decrement}>
        -
      </button>
    </div>
  )

これをブラウザで実行すると、DISCO COUNT が表示されます。

これは素晴らしいことですが、私たちが望んでいることではありません。では、なぜこのようなことが起こるのでしょうか?

useEffectにconsole.log('Render')を入れると、コンポーネントが繰り返し再レンダリングされていることがわかります。これは、コンポーネントが状態やプロパティの変更に応じて再レンダリングされるためです。そのため、useEffectで色の状態を設定すると、 再レンダリングと無限ループが発生します.

幸いなことに、これは簡単に修正できます。useEffect フックは、監視する状態やプロパティの配列である 2 番目のパラメータを受け入れます。つまり、監視対象の状態やプロパティのいずれかが変更された場合にのみ関数が実行されます。カウントが変更された場合にのみ色を変更したいので、useEffect を次のように更新します。

useEffect(() => {
    setColour(randomColor())
  }, [count])

注: useEffectを1回だけ実行するには、コンポーネントの読み込み時に2番目のパラメータとして空の配列を追加します。

ウィジェットを更新すると…出来上がり!

まとめ

このブログでは、Pluggable Widgetsの使い方について説明しました。 Mendix開発環境の設定方法と、state、props、useEffect などの React のコア概念について説明します。

ウィジェットの最終コードはここにあります: GitHub – joe-robertson-mx/colourCount

次は何？

次はTypescriptを使い、直接統合して Mendix エンティティと属性、そしてアクションをトリガーする方法を見てみましょう Mendix ウィジェットからのモデル。

この投稿についてどう思われたかお知らせください。見てみたいウィジェットはありますか? 今後のウィジェットに関する提案があれば、ここのコメント欄に記入してください。

資料

プラグ可能なウィジェットについて詳しく知るには、次のリソースが役立つかもしれません。 はじめに – React, プラグイン可能なWebウィジェットを構築する,

ウィジェットを構築する Mendix React を使用 - パート 1 - カラーカウンター | Mendix

サイト内検索

開発者ブログ

開発者ブログ

ウィジェットを構築する Mendix React を使用 - パート 1 - カラーカウンター

Mendix は、メーカーがより早く価値を提供し、アプリケーションを簡単に構築できるローコードプラットフォームです。 Mendix フロントエンドは、React と Pluggable Widget フレームワークを使用してカスタマイズできます。

どこから始めるか

このブログの目的

私たちが構築しているもの

スタートガイド

コードを書く

まとめ

次は何？

ソーシャルメディアに共有する

言語を選択してください

ウィジェットを構築する Mendix React を使用 - パート 1 - カラー カウンター | Mendix

開発者ブログ

開発者ブログ

ウィジェットを構築する Mendix React を使用 - パート 1 - カラー カウンター

Mendix は、メーカーがより早く価値を提供し、アプリケーションを簡単に構築できるローコードプラットフォームです。 Mendix フロントエンドは、React と Pluggable Widget フレームワークを使用してカスタマイズできます。

どこから始めるか

このブログの目的

私たちが構築しているもの

スタートガイド

コードを書く

まとめ

次は何？

ソーシャルメディアに共有する

ウィジェットを構築する Mendix React を使用 - パート 1 - カラーカウンター | Mendix

ウィジェットを構築する Mendix React を使用 - パート 1 - カラーカウンター