スーパーチャージ Mendix Copilot、Warp、Cursorなどのツールを使ったウィジェット開発！この強力な組み合わせがカスタムウィジェットの構築方法に革命をもたらした方法をご紹介します。 Mendix ウィジェットと高度なコード コンポーネントを前例のないスピードと効率で実現します。

ウィジェットチャレンジ

として Mendix 高度なコード開発経験がほとんどない、あるいは全くない開発者がカスタムコードを開発する Mendix ウィジェットやJavaScriptアクションなどのコンポーネントは、少し（あるいはかなり）難しそうに思えるかもしれません。従来、ターミナルコマンド、複数の開発環境の管理、ツール間の移動といった操作が必要で、少なくとも基本的なJavaScript/TypeScriptの知識があることが前提となります。

ヴァイブコーディングワークフローのゲームチェンジャー

私は画期的なワークフローを発見しました。 マイクロソフトのコパイロット、 ワープ or カーソル これにより、ウィジェットの開発プロセスが一変し、作業速度が何倍も向上しました。

従来のウィジェット開発プロセス

ウィジェット開発の従来の仕組み:

• 不足している場合は、Node、npm などの依存関係をインストールします。(ここにリストがあります。)
• ターミナルコマンドを使用して空のウィジェットを作成します
• このプロジェクトをVS Codeなどのエディタで開きます
• ウィジェットのプロパティを追加する
• コードを追加
• 調査する
• 問題を修正する
• 構築、テスト Mendix アプリ、繰り返し

AIを活用したアプローチ

Copilot、Cursor、Warp などのツールがエージェント AI でどのようにスピードアップするか:

• ターミナル コマンドを使用して空のウィジェットを構築します (前と同じ)。
• ウィジェットに何を実行させたいかをエージェントに伝えます。
• ツール内のエージェントがコードを作成します。
• エージェントはコードをビルドし、エラーがある場合はそれを修正しようとします。
• 準備が完了すると、どのような変更が行われたかが通知されます。
• アプリでテストし、エージェントにフィードバックを与えて、これを繰り返します。

これは、Copilotを使ってToDoリストウィジェットを作成し、それを統合する方法を紹介するビデオです。 Mendix アプリ。

ここに以下が表示されます:

1. 空のウィジェットプロジェクトの作成
2. AIエージェントを使用してプロジェクトを分析し、これが Mendix ウィジェットプロジェクト
3. ウィジェットに何をさせたいかを説明する私
4. AIエージェントが私の要件に合ったコードを生成し、ウィジェットを構築する
5. ウィジェットをアプリにインポートするとエラーが発生する
6. AIエージェントにエラーがあるというフィードバックを与える
7. AIがその問題を解決する
8. ウィジェットを再インポートしてページに設定する
9. プロジェクトを実行し、ウィジェットをテストします。

動画の最後までご覧いただくと、ToDoリストは動作しているものの、私が設定したデータソースに実際にはリンクされていないことにお気づきいただけると思います（また、一部の設定が少しおかしく、不必要でした）。要件の精緻化、エラーの詳細とフィードバックの提供、実装に関する質問、プロンプトや気に入らない機能のみを使ったデバッグなど、何度かやり取りを重ねた結果、ようやく期待通りに動作するようになりました。このウィジェットにはコードを1行も書いていません。以下をご覧ください。 完全なウィジェットのコードはここで確認できます。

私たちが得るもの

• AIエージェントによる超高速開発。
• 学習曲線はありません。明確な指示とフィードバックだけが必要です。
• AIモデルの選択（サブスクリプションによって異なります）。無料版でもオプションをご利用いただけます！
• プロジェクト コンテキストを使用してビルドすると、エージェントは新しい変更を加える前に既存のコードを読み取ることができます。
• このプロセスは、新しいウィジェットに限定されず、既存のウィジェットのリファクタリングと修正にも使用できます。
• ウィジェットや JS アクションに限定されず、Java 開発、スタイリングなどにも使用できます。
• 自動コメント、Readme、説明ドキュメントなど
• 知識ギャップの橋渡し – ハイコード アプローチに不慣れな開発者を支援します。
• さまざまなウィジェット間で一貫したコード品質。
• 学習の機会 – AI によって生成されたコードパターンを学習すると、スキルが向上します。
• 迅速なプロトタイピング - さまざまなウィジェット アプローチを簡単に試すことができます。
• 既存のハイコード開発者は、このようなツールを実際に活用して、作業を数倍高速化できます。

これらの課題に注意してください

もちろん、すべてが素晴らしいわけではありません。注意すべき点は以下のとおりです。

• AIは幻覚を起こします（以前ほどではありませんが、それでも）。明確なフィードバックを与えることが効果的です。
• ループに陥ってしまう可能性があります。ループに陥っている場合は、エージェントに伝えてください。エージェントがループから抜け出すお手伝いをします。
• 一部のエラーは誤解を招く可能性があり、根本的な原因ではない可能性があります。AIはこれを認識できない可能性があります。
• コード粥（あるいはスパゲッティ）です。プロジェクトに既に存在するコードや、かつてどこかで使用されていたが今は使われていない関数を忘れてしまうことはよくあります。AIも同様に、不要なクリーンアップや複雑な処理を忘れてしまうことがあります。しかし、エージェントに自分自身をレビューさせ、同じことをより簡単な方法で実行できるかどうかを確認するように指示することは可能です。
• エージェントの選択に疑問を抱くこともできます。コード、機能、修正、ロジックが複雑すぎる、または奇妙すぎると思われる場合は、エージェント自身に見直してもらい、簡素化するよう依頼してください。
• バージョン管理を使いましょう！GitHubを使うか、エージェントにGitリポジトリを作成してもらい、テスト済みの安定バージョンごとにコミットするように指示しましょう。こうすることで、万が一何か大きな問題が発生した場合（そして時々起こることですが）、変更をロールバックしやすくなります。
• 可能であれば、専門家にレビューしてもらってください (強くお勧めします)。
• パフォーマンスに関する考慮事項 – AIは常に最適なコードを生成するとは限りません。疑問を持ちましょう！コメント生成、生成されたコードの説明、実行フローについて尋ねましょう。
• セキュリティの警戒 – 生成されたコードにセキュリティ上の脆弱性がないか常に確認します。
• 特定の LLM バージョンへの依存 – 結果はモデルまたはバージョンによって異なる場合があります。

いくつかの最終的な考え

私はカスタムウィジェット、Java、JavaScriptコンポーネントを構築してきました Mendix 長年アプリ開発に携わってきた私にとって、これはまさに画期的な体験でした。経験豊富な開発者として、エージェントが数分でコードを生成してくれるのが分かりました。私なら数時間、あるいは数日かかっていたコードを、エージェントが数分で生成してくれるのです。アプローチやロジックが私の思い通りでなかったり、複雑になりすぎたりする箇所があれば、その問題に特化したフィードバックを提供し、修正して先に進むことができました。間違いなく、今後も使い続けるつもりです！

では…これは開発者に取って代わるのでしょうか？私はそうは思いません。

これは開発者の置き換えではなく、破壊的な変化です。AIツールは、人間の開発者がアーキテクチャの決定、ビジネスロジック、そしてイノベーションに集中する間、反復的なコーディング作業と実装の詳細を処理する熟練した協力者になりつつあります。最も成功する開発者は、AIと効果的に連携し、適切なガイダンスを提供し、いつ手動で制御すべきかを判断することを学ぶ開発者だと私は信じています。開発者は、ウィジェット機能の実装に何時間も費やす代わりに、真に重要なこと、つまり学習、イノベーション、そして価値提供に専門知識を集中させることができるようになります。 Mendix 特に開発者にとって、これはコアを強化するだけです Mendix 強み：急速な発展。