出典：JDテクノロジー この記事では、ローコードをベースラインとして使用し、Ui2Code と ChatGPT を活用してセットアップ効率を向上させながら、JD.com のミニプログラム シナリオでのローコードの適用、ローコード プラットフォームがその境界を定義する方法、実装を簡素化する方法について詳しく説明します。
今年のアジャイルチーム構築中に、Suite Executorを使ってワンクリックで自動ユニットテストを実装しました。Suite Executorの他に、JuintにはどんなExecutorがあるのでしょうか？こうして、私のRunner探求の旅が始まりました！ ローコード開発プラットフォーム（LCDP）は、ローコードまたはノーコード構成を通じて、アプリケーションの迅速な開発と展開を可能にします。ビジュアルローコードは本質的にビジュアルDSLであり、その利点は主に視覚化機能に由来します。しかし、視覚化によって生じる限界もあり、複雑なビジネスロジックはローコードによってさらに複雑になる可能性があります。ローコードは、特定のドメインにおける問題を簡素化し、抽象化することを目的としているべきです。既存のコーディング作業を単にGUIモードに変換するだけでは、あまり意味がありません。 背景 簡単に説明すると、MCubeはまずテンプレートキャッシュの状態に基づいて、ネットワークから最新のテンプレートを取得するかどうかを判断します。テンプレートが取得されると、テンプレートをロードします。ロードフェーズでは、出力がビューツリー構造に変換されます。変換が完了すると、式エンジンが式を解析し、正しい値を取得します。イベント解析エンジンは、ユーザー定義イベントを解析し、イベントバインディングを完了します。解析、値の割り当て、イベントのバインディングが完了したら、ビューがレンダリングされ、最終的に対象ページが画面に表示されます。 JD.comのWeChatドメイン事業がテンセントとの連携を深めるにつれ、トラフィックの担い手としてのミニプログラムの需要が高まっています。2017年以降、C-1、C-2、C-3といった部門がそれぞれ独自の業務ミニプログラムを展開しています。現在、グループ内には数万ものWeChatミニプログラムが存在します。これほど多くのミニプログラムに共通性があり、互いに力を発揮できるのでしょうか？答えは「はい」です。様々な検討に基づき、ミニプログラム開発に関する調査と計画が始まりました。 建築デザイン 簡単に説明すると、MCubeはまずテンプレートキャッシュの状態に基づいて、ネットワークから最新のテンプレートを取得するかどうかを判断します。テンプレートが取得されると、テンプレートをロードします。ロードフェーズでは、出力がビューツリー構造に変換されます。変換が完了すると、式エンジンが式を解析し、正しい値を取得します。イベント解析エンジンは、ユーザー定義イベントを解析し、イベントバインディングを完了します。解析、値の割り当て、イベントのバインディングが完了したら、ビューがレンダリングされ、最終的に対象ページが画面に表示されます。
プラットフォーム構築の本質は、効率性の向上です。では、学習コストが低く、すぐに使い始められて特定の事業分野に特化したプラットフォームの方が優れているのでしょうか。それとも、あらゆるビジネスシナリオに対応できる汎用性を備えながらも、学習コストが高いプラットフォームの方が優れているのでしょうか。 汎用的すぎる: 統合コスト、学習コスト、開発コストが高い垂直すぎる：アクセス効率は高いが、学習コストは低く、スケーラビリティは低い
1. ゼロコードまたはローコードでアプリケーションを迅速に生成します。 2. 開発用のビジュアルインターフェースを提供します。 3. ドラッグ アンド ドロップと構成を使用してプロジェクトをビルドします。 3.3 階層化アーキテクチャ + iOC アーキテクチャ
システムは複数の水平層に分割され、各層は明確な役割と分担を持ちます。他の層の詳細を知る必要はなく、各層はインターフェースとプロトコルを介して相互に通信します。 簡単に言えば、IOC（統合オブジェクト指向）は複雑なシステムを連携するオブジェクトに分解します。これらのオブジェクトクラスは、カプセル化によって内部実装を外部から透過的にすることで、問題解決の複雑さを軽減し、柔軟な再利用と拡張を可能にします。IOC理論の核となる考え方は、「サードパーティ」を活用することで、依存するオブジェクトを分離することです。
理想的には、プロセスオーケストレーションノードは、ビジネスプロセスのフローを表現するために、高度に抽象化され、凝集性の高いビジネスノードであるべきです。しかし、これらのノードの設計と開発は実際には非常に困難な作業です。
フロントエンドは、研究開発プロセス全体における下流に位置します。上流の要件記述、UI設計、バックエンドのインターフェースプロトコルが標準化されていない場合、標準化の不統一によって生じる様々な互換性の問題に多くの作業が発生し、再利用性や抽象化が欠如することになります。開発プロセスを簡素化し、開発コストを削減し、すぐに使える機能を実現するためには、要件仕様、設計仕様、コンポーネント仕様、インターフェース仕様の明確化が不可欠です。今後、フロントエンド全体の効率向上と開発はより高度化していくでしょう。
プラットフォーム構築には引き算が必要です。つまり、何をしないかを考えることです。プラットフォーム自体がすべてのニーズを100%サポートする必要はありません。それはコードを単にGUIに変換するのと同じで、意味がありません。コードを直接開発する方が賢明です。目標は、一般的なビジネスシナリオの80%を解決することです。残りの20%については、2つの方法でサポートします。 1. コード納品：完成した製品は、二次開発用のソースコードとして納品されます。 2. ビジネス コンポーネント: コンポーネントが関与する複雑な相互作用やデータ処理の場合、ビジネス コンポーネントの開発とプラットフォームの構築を組み合わせて、要件全体を完了することができます。 プラットフォームの紹介 簡単に説明すると、MCubeはまずテンプレートキャッシュの状態に基づいて、ネットワークから最新のテンプレートを取得するかどうかを判断します。テンプレートが取得されると、テンプレートをロードします。ロードフェーズでは、出力がビューツリー構造に変換されます。変換が完了すると、式エンジンが式を解析し、正しい値を取得します。イベント解析エンジンは、ユーザー定義イベントを解析し、イベントバインディングを完了します。解析、値の割り当て、イベントのバインディングが完了したら、ビューがレンダリングされ、最終的に対象ページが画面に表示されます。 インスタントデザインプラットフォーム（https://jsdesign.jd.com/?type=3）は、Cエンドフロアを瞬時に構築できる開発プラットフォームです。リレー設計案のURLをインポートしてUI2Codeを完成させ、それを基にフロントエンドのビジュアル構築を完了することができます。また、ChatGPTを介したワンライン要件の入力にも対応しています。構築されたフロアはiHubフロアマーケットに自動的に同期され、 Babel（https://babel.m.jd.com/active/babelCommon/index.html#/）やColumbus（https://glbmlp.jd.com/mlp/list）などの構築プラットフォームで利用できるようになります。 図1. 図2. インスタントデザインには、キャンバスコンテンツタイプ（ブロック、イメージ、テキスト、リスト）の追加、削除、階層の調整、コピー、スタイル構成、データインターフェース構成、状態管理構成、コンテンツとデータのバインディング、クリックインタラクションと露出インタラクション、リレー設計ドラフトのインポートとスタイル付きキャンバスコンテンツへの変換、キャンバスコンテンツのインスタントプレビュー、キャンバスコンテンツのQRコードミニプログラムプレビュー、コード表示と二次編集サポート、ChatGPT自然言語対話操作ページ機能の調整などの機能があります。 ページ構造は主に2次元構造で、トップメニューエリアとメインエリアで構成されています。メインエリアは4列構造で、「選択と描画ツール」エリア、「構造、フロア、コンポーネント、マイ」の水平タブエリア、「キャンバスとプレビュー」エリア、そして「要素スタイル、インタラクション、バインディング機能」の垂直タブエリアで構成されています。 図3. メニューは左、中央、右のレイアウトに分かれています。 図4. ページタイトル領域 ページのタイトルは「Instant Design」です。 操作ボタンエリア 機能入力ボタンエリア 「データ ソース」、「リレー インポート」、「プレビュー」のアイコンが付いた機能入力ボタンが含まれています。 データ ソース: これをクリックすると、データ ソースの構成やステータスの管理などの機能をサポートするページ レベルのポップアップ ウィンドウが表示されます。 Relayインポート：クリックするとページレベルのポップアップウィンドウが開き、 Relayデザインドラフトリンクを入力できます。確認ボタンをクリックすると、指定したデザインドラフトが、位置、スタイル、その他のコンテンツを含め、現在のキャンバスに素早くインポートされます。 プレビュー: クリックすると、ページレベルのポップアップウィンドウが開き、プレビューQRコードが表示されます。WeChatアプリでQRコードをスキャンすると、プレビューミニプログラムで現在のキャンバスコンテンツをプレビューできます。 - 保存: これをクリックすると、ページレベルのポップアップウィンドウが開き、名前、カテゴリー、説明、プレビュー画像のアップロードまたは生成、プライベートまたはマーケットプレイスへの公開、オンライン環境との同期などの情報が表示されます。[送信]をクリックすると、現在のキャンバスが（パブリック）フロアまたは「マイ」個人セクションに保存され、次回から簡単にアクセスまたは編集できるようになります。
データソース データ ソース ページ レベルのポップアップには、データ要求とステータス管理の 2 つの部分が含まれています。 データ要求は、要求リスト、要求情報構成、応答情報構成の 3 つの列で構成されます。 リクエストリストには、直接出力インターフェースとインタラクティブインターフェースの2つのグループが含まれます。このリストでは、インターフェース名の編集、インターフェースのコピー、インターフェースの削除、インターフェースの新規作成、インターフェースデータの更新などの機能がサポートされています。 リクエスト情報には、リクエストリンク、前提条件、インターフェースタイプオプション（クロスドメインインターフェースであるかどうか、つまりxxx.jd.comのようなドメインではないかどうか）、属性パラメータ（クエリ、ヘッダー、ボディなど）が含まれます。属性パラメータは、文字列、数値、ブール値、配列、オブジェクトデータ型の追加をサポートし、編集、ステータス管理からの値の選択、ページパラメータからの値の選択、マテリアルカテゴリへのエクスポートをサポートします。 - レスポンス情報には、Bodyデータの返送内容表示、Header情報表示、およびデータ処理設定が含まれます。現在、データ処理は「データソース配列キーデータ」のフィルタリングのみをサポートしています。サブ属性キーが「_index」の入力をサポートしている場合、配列のインデックスによるフィルタリングを意味します。サブ属性キーが「_length」の入力をサポートしている場合、演算子は「-%」に設定され、比較値は数値として入力されます。これは、フィルタリングされた配列の長さを比較値の整数倍として扱うことを意味します。
状態管理は、文字列、数値、ブール値、配列、オブジェクトなどのデータ型を含むグローバルデータの設定をサポートし、データインターフェース、バインディング、インタラクティブな使用を容易にします。また、スタイルおよびマテリアル領域へのエクスポートもサポートしています。 図5. この領域は、キャンバスでサポートされている描画ツールの種類を表します。これには、「選択」、「ブロック」、「画像」、「テキスト」、「リスト」の 5 つの種類が含まれます。 選択: 選択をクリックした後、キャンバス領域内のキャンバス要素をクリックして選択し、コンテンツをドラッグして位置とサイズを調整できます。 長方形 (ブロック) 要素を選択すると、ボタンをクリックして押したままキャンバス領域にドラッグして、幅、高さ、サイズ、位置を持つ長方形 (ブロック) 要素を作成できます。 画像をクリックした後、キャンバス領域のボタンをクリックして押したままにすると、幅、高さ、サイズ、位置を指定して画像要素をドラッグできます。 テキスト要素をクリックして選択した後、キャンバス領域内でテキスト要素をクリックして押したまま移動することで、幅、高さ、サイズ、位置を指定してテキスト要素をドラッグできます。 リスト要素を選択すると、キャンバス領域でボタンをクリックして押したままにすることで、リスト要素を独自の幅、高さ、サイズ、位置でドラッグできます。
図6. 現在の領域には、「構造」、「フロア」、「ウィジェット」、「マイ」の 4 つの水平タブがあります。図7. 構造（キャンバス） この構造は、キャンバス領域内の要素に対応するツリー構造の階層リストです。 デフォルトでは、新しい要素が作成されると、 Rootという名前のルートノードのみが存在します。Relay経由で要素をRelayするか、キャンバス領域に要素を描画すると、現在のツリー構造にノードが追加されます。ノード間の階層関係は、ノード間の包含関係となります。 ノード行のコンテンツには、折りたたみ/展開アイコン、タイプ アイコン、タイプ名または編集名、表示/非表示 (目のアイコン) ボタン、および削除 (ゴミ箱のアイコン) ボタンが含まれます。 ノード タイプには、ルート、ブロック、イメージ、テキスト、リスト、コンポーネントなどがあります。 ノード名は、デフォルトでは、Root、Block、Image、Text、List、Component など、そのタイプの単語が大文字で始まります。 Root以外のノードでは、ダブルクリックによる名前の編集がサポートされています。 Root以外のノードの場合、選択したノードをクリックすると、そのノード名の右側に右揃えの表示/非表示ボタン（目のアイコン）と削除ボタン（ゴミ箱のアイコン）が表示されます。表示/非表示ボタンをクリックすると、現在の要素とその子要素の表示/非表示が切り替わります。削除ボタンをクリックすると、現在のノードがツリー構造から削除されます（メニュー領域の「元に戻す」ボタンをクリックすると復元できます）。 Root以外のノードを選択してツリー構造内でドラッグし、レベルを調整できます。 非リーフノードの左側には、折りたたまれているか展開されているかを示す黒い三角形のアイコンが表示されます。このアイコンをクリックすると、ノードサブセットの折りたたみ状態と展開状態が切り替わります。 Root以外のノードの場合、ノードを右クリックすると、削除、コピー、ウィジェットの作成、グループの作成、グループ解除などの機能を含む操作リストが表示されます。 右クリック ノード コピー機能を使用すると、コピーされたノードは元のノードの兄弟ノードに自動的に追加され、名前にのみ「-copy」が追加され、その他の内容はすべて同じままになります。
図8. フロア（公開フロアは公開済み） フロアは、保存されマーケットに公開されたパブリックフロアコンポーネントです。フロアは、設定されたプライマリカテゴリ（画像とテキスト、広告、商品、ナビゲーション、特典）とセカンダリカテゴリ（タイル、水平スクロール、カルーセル、ネスト、フローティング、無限ドロップダウン、固定、サイドバー、未分類）に従って表示されます。プライマリカテゴリは水平タブでグループ化され、セカンダリカテゴリは各プライマリカテゴリの下に2列のタイル表示で表示され、フロアのプレビュー画像と名前が表示されます。 ウィジェット（公開ウィジェットが公開されています） ウィジェットは、マーケットプレイスに保存され公開されたパブリックウィジェットです。ウィジェットは、設定されたプライマリカテゴリ（画像とテキスト、広告、商品、ナビゲーション、特典）、画像のセカンダリカテゴリ（画像とテキスト、ボタン、オーバーレイ）、商品のセカンダリカテゴリ（商品カード、商品画像、商品名、商品価格、商品タグ、商品ボタン）、特典のセカンダリカテゴリ（クーポン、JDコイン、赤い封筒）に従って表示されます。プライマリカテゴリは水平タブでグループ化され、セカンダリカテゴリは各プライマリカテゴリの下に2列で表示され、ウィジェットのプレビュー画像と名前が表示されます。 私の 「マイ」タブには、現在ログインしているユーザーが保存したフロアとウィジェットのリストが表示されます。 この領域は、上部の機能ボタン領域とキャンバス領域の 2 つの部分に分かれています。 上部の機能ボタン領域は水平中央に配置されたボタン領域で、次のものが含まれます。 キャンバスは左右の構造で編集領域とプレビュー領域に分かれています。図9. キャンバス編集領域 現在の領域は、 Relay経由でインポートするか、キャンバス ツールを手動で選択してキャンバス上に描画されたコンテンツ領域です。 描画ツール（長方形/画像/テキスト/リスト）を選択し、キャンバス領域をクリックして押したまま移動すると、幅、高さ、サイズ、位置を指定して要素をドラッグできます。 描画ツール - 選択を選択すると、キャンバス領域内の既存のコンテンツ要素をクリックして選択した要素を切り替えたり、絶対位置で配置された要素の位置をドラッグしたり、要素の右下隅をクリックしてズームインおよびズームアウトしたり、要素を右クリックして削除/コピー/ウィジェットの作成/グループの作成/グループ解除を行ったりすることができます。 要素をクリックして選択します。要素が絶対位置に配置されている場合は、長押ししてドラッグすることでキャンバス上の位置を調整できます。 - キャンバス要素を右クリックすると、カスタマイズ可能な右クリック メニュー リストが表示されます。このリストには、削除、コピー、ウィジェットの作成、グループの作成、グループ解除のボタンが含まれます。
キャンバスプレビュー領域 現在の領域は、キャンバス コンテンツの実際のレンダリング、リアルタイム プレビュー、プレビュー イメージの生成をシミュレートする PC 上の表示領域です。 機能領域には、スタイル構成領域、インタラクション構成領域、バインディング構成領域、およびマテリアル構成領域が含まれており、これらは右揃えの垂直タブ形式で表示されます。Rootノードを選択すると、機能領域の 4 つの領域がすべて表示され、各領域の内容は関連する構成のエクスポートされた構成になります。-
Root以外のノードを選択した場合は、表示構成領域、インタラクティブ構成領域、およびバインディング構成領域のみが表示されます。
図10. スタイル（構成領域） スタイル構成領域には、選択したノード要素の主なスタイル情報のリストとエクスポート構成ボタンが表示されます。 エクスポート設定ボタンは、「スタイル」というタイトルの右側にあります。クリックするとドロワーが展開され、グループ化されていないすべてのスタイルのリストが表示されます。エイリアスの確認と編集もサポートされています。 RootまたはComponentノードを選択すると、スタイルエリアにチェックされたエクスポート設定項目が表示され、指定した設定の値を素早く変更できます。 スタイル リストの内容はグループ化方式を使用して表示されます。具体的には、次のようになります。 幅、高さ、（絶対位置）上からの距離、（絶対位置）左からの距離。 マージン: padding-left、padding-right、padding-top、padding-bottom、margin-left、margin-right、margin-top、margin-bottom; レイアウト: 表示方法、配置方法、要素のオーバーフロー。 画像: 画像 URL (background-image)、画像サイズ (background-size)、画像位置 X (background-position-x)、画像位置 Y (background-position-y)、画像の繰り返し (background-position)、画像の高さの自動調整 フォント: フォント ファミリ、フォントの太さ、フォントの色、フォント サイズ、行の高さ、テキストの配置、テキストの内容、テキストの装飾、空白、表示される行数。 塗りつぶし: 背景色、背景グラデーション 境界線: border-width、border-radius、border-color、border-style 影: 影の x オフセット (shadowOffsetX)、影の y オフセット (shadowOffsetY)、影のぼかし半径 (shadowBlurRadius)、影の広がり半径 (shadowSpreadRadius)、影の色 (shadowColor)、影の方向 (shadowInset) その他: 不透明度、Zインデックス、カスタム設定
図11. インタラクション（構成領域） インタラクティブ領域には、選択したノード要素のクリック/露出インタラクション機能とエクスポート構成ボタンが表示されます。 「設定のエクスポート」ボタンは、「インタラクション」というタイトルの右側にあります。クリックするとドロワーが展開され、グループ化されていないすべてのジャンプのリストが表示されます。エイリアスの確認と編集もサポートされています。 RootまたはComponentノードを選択すると、選択した設定のエクスポート項目がインタラクションエリアに表示され、指定した設定の値を素早く変更できます。 クリック/露出インタラクションは、水平タブ形式で配置されています。クリックインタラクションと露出インタラクションはどちらもイベントの追加をサポートしています。一般的に追加されるイベントには、前提条件、ジャンプ、API呼び出し、状態管理、トースト、再レンダリングなどがあります。クリックインタラクションはクリックイベントのトラッキングのみを追加でき、露出インタラクションは露出イベントのトラッキングのみを追加できます。 クリック トラッキング/露出トラッキング: イベント ID (eventId) とイベント パラメータ (eventParams) の構成をサポートします。 前提条件: これらは、他の種類のイベントに対して設定される条件です。条件が満たされた場合、次のイベントは引き続き実行されます。条件が満たされない場合、次のイベントはスキップされます。この設定には、状態管理/データソース/ページパラメータのデータ値の比較結果が含まれます。 リダイレクト: H5/ネイティブ ページ/その他のミニプログラム ネイティブ ページへのリダイレクトをサポートし、ミニプログラム appId、リダイレクト パス、およびパス パラメータの構成をサポートします。 API呼び出し：データソースの既存のデータインターフェースを選択することで、インターフェースのパラメータを変更できます。インターフェース呼び出しが成功すると、返されたインターフェースデータに基づいて、ステータス管理/データソースのデータ値を設定できます。 ステータス管理: ステータス管理でデータ値を構成および更新します。 toast: 通知メッセージと表示時間を設定します。 再レンダリング: 現在のイベント フェーズでフロアの再レンダリングをトリガーするかどうかを構成します。
図12. バインディング（構成領域） バインディング領域には、データ バインディング、データ処理、明示的/暗黙的なバインディングが含まれます。- データ バインディング: テキストまたは画像を選択すると、データ ソース インターフェイス フィールドおよびステータス管理のフィールドへのバインディングがサポートされます。
- データ処理：テキストを選択した場合、データバインディング後の特殊なケース（価格フィールドの内容を分割して表示するなど）がサポートされます。整数を選択した場合、バインディングデータの整数部分のみが表示されます。小数を選択した場合、バインディングデータの小数部分のみが表示されます。2つのゼロで埋めるを選択した場合、バインディングデータの小数部分は表示前にゼロで埋められます。
- 表示/非表示バインディング: 条件を追加して、データ ソース/状態管理/ページ パラメータを選択し、フロアが使用されて実行されているときに、選択した値と入力した比較値を比較して、ノード要素の表示または非表示の制御結果を取得します。
図13. 材料（構成領域） マテリアルエリアはRootノードを選択すると表示され、クリックして展開できます。このエリアには、エクスポートオプションがオンになっているデータソースまたは状態管理設定の設定項目が表示されます。頻繁に変更される特定の値を素早く変更できるように、このエリアに別途表示されます。図14. Q&Aアシスタント図15と16。 フロアを作成図17. 構成を変更する図18と19。 要約 プロセスの理解：まず、MCubeはテンプレートキャッシュの状態に基づいて、ネットワークから最新のテンプレートを取得するかどうかを判断します。テンプレートが取得されると、そのテンプレートをロードします。ロードフェーズでは、出力がビューツリー構造に変換されます。変換後、式エンジンが式を解析し、正しい値を取得します。イベント解析エンジンは、ユーザー定義イベントを解析し、イベントバインディングを完了します。解析、値の割り当て、イベントのバインディングが完了した後、ビューがレンダリングされ、最終的に目的の結果が表示されます。 ChatGPTはローコード分野において大きな助けとなるでしょう。ローコード分野における大規模モデルの役割をどのように位置付けるかは検討する価値があります。同時に、将来的には、JD Mini ProgramのローコードにおけるChatGPTの適用は、タスク分割によって行われるでしょう。大規模モデルは得意とするドメインタスクを担当し、苦手な領域はプラットフォーム側で処理することになります。 | 
朝のニュース | 2023年8月23日（水）
2026-01-09