|
出典：デウーテクノロジー I. 背景 II. ジェネレーションリンクの概要 III. 表現ニーズ 1. グラフィカル設定
2. AIが直接コードを生成する 3. 自然言語からコマンドへの翻訳 IV. コードに変換された情報 1. 変換プロセス 2. コードはどのように開発するのでしょうか?
V. ソースコード生成 1. ポジショニング
VI. コンポーネントベクトルの探索と埋め込み 1. コンポーネント情報の入力 2. 成分ベクトル探索
3. 素早い部品挿入
VII. 将来の見通し 反復作業とコード標準： B2Bフロントエンドのコード開発プロセスにおいて、開発者は反復開発という課題にしばしば直面します。多くのCRUDページには類似した要素やモジュールが含まれていますが、それらは依然として手作業で開発する必要があります。単純な要素の構築に時間がかかり、ビジネス要件の開発効率が低下します。また、開発者ごとにコーディングスタイルが異なるため、アジャイル反復開発を実施する場合、他の開発者の学習コストは高くなります。 AIは単純な思考力を代替します：大規模AIモデルの継続的な発展により、AIは基本的な理解能力を獲得し、言語をコマンドに変換できるようになりました。基本的なWebページ構築などの一般的なコマンドについては、日常的な基本的なWebページ構築のニーズを満たすことができ、一般的なシナリオにおけるビジネス開発の効率を向上させます。 B2Bページのリスト、フォーム、詳細情報をすべて生成できます。プロセスは大きく分けて以下のステップに分けられます。 - 指定されたルールに従って、大規模モデルから対応する構築情報を抽出します。
- セットアップ情報は、コード テンプレートと AST を組み合わせてフロントエンド コードを出力します。
コード生成の最初のステップは、どのようなインターフェースを開発するかを指定することです。これについて話すとき、まず思い浮かぶのはページ構成です。これは現在、ローコード製品の主流となっています。ユーザーは、次の図に示すように、一連のグラフィカルな設定を通じてページを構築します。上記の設定方法は、一般的なシナリオ（比較的シンプルなバックエンドロジックを持つCRUDページなど）や特定のビジネスシナリオ（イベント設定など）において効率向上に効果的です。しかし、比較的複雑なロジックを持ち、継続的な反復作業が必要となる要件の場合、グラフィカルな設定方法は高度なインタラクション設計を必要とし、ある程度の学習曲線を描きます。さらに、要件の複雑さが増すにつれて、設定フォームのインタラクションはより複雑になり、保守コストも増大します。そのため、フロントエンド分野におけるページ設定方法の利用は比較的限定的です。 AI 生成コードはユーティリティ関数のシナリオで広く使用されていますが、企業内の特定のビジネス ニーズについては、次の点を考慮する必要がある場合があります。 - カスタマイズの生成：当社チームは独自の技術スタックと汎用性の高いコンポーネントを保有しており、これらの知識は事前学習が必要です。現在、長文テキスト用の事前学習済みコンテンツはシングルセッションインジェクションのみをサポートしており、大量のトークンを消費します。
- 精度： AI生成コードの精度は非常に難しい課題です。さらに、事前学習には大量のプロンプトが含まれています。コード出力には細分化された情報が多く含まれており、モデルの錯覚も加わるため、現状ではビジネスコードの失敗率は非常に高くなっています。精度は補助コーディングを評価する上での核心的な指標です。この点が解決されなければ、補助コーディングの効果は大きく低下します。
- 生成されたコンテンツが不完全:単一の GPT セッションの制限により、複雑な要件のために生成されたコードが切り捨てられる可能性が一定量あり、生成の成功率に影響します。
GPTには、自然言語から命令への変換という非常に重要な機能もあります。命令はアクションです。例えば、自然言語を入力として受け取る関数があるとします。GPTを組み込みプロンプトと組み合わせ、常にいくつかの単語を出力するようにすることで、これらの単語に基づいてさらにアクションを実行できるでしょうか？これには、グラフィカルな設定に比べていくつかの利点があります。 - 学習曲線の低さ：自然言語は人間の母国語であるため、自分の考えに沿ってページを記述するだけで済みます。もちろん、記述内容は一定の規範に従う必要がありますが、グラフィカルな構成に比べて効率が大幅に向上します。
- 複雑さのブラックボックス：設定ページの複雑さが増すにつれて、グラフィカルな設定の複雑さも増し、その複雑さはユーザーに丸ごと表示されます。ユーザーは複雑な設定ページの操作に迷い込み、設定コストが徐々に増加します。
- アジャイル反復:ユーザー側にページ構成機能を追加する場合、大規模なモデルに基づくインタラクション方法ではいくつかのプロンプトを追加するだけで済むかもしれませんが、グラフィカル構成では、迅速な入力のために複雑なフォームの開発が必要になります。
生成された指示情報も、大規模モデルのような錯覚に陥るのではないでしょうか？ 生成される指示情報が毎回安定して一貫性を保つにはどうすればよいでしょうか？ 自然言語から命令への変換は、いくつかの理由から実現可能です。 - 長いテキストを重要な情報に変換すると要約が構成され、要約シナリオでの大規模モデルの精度は、拡散シナリオよりもはるかに高くなります。
- 指示情報は要件から重要な情報のみを抽出し、コード技術スタックの事前学習を必要としないため、プロンプトには最適化の余地が大きくあります。プロンプトの内容を最適化・改善することで、出力精度を効果的に向上させることができます。
- 精度は検証可能です。入力要件が異なるシナリオごとに、ユニットテストを実施し、出力を予測することで精度を検証できます。問題が発生した場合には、最適化を行い、その問題に対応するユニットテストを組み込むことで、精度を継続的に向上させます。
コード支援の場合、ユーザーの要件の説明に基づいて、PROMPT による処理後に次の情報を取得できます。これは、コード生成の基礎情報を提供します。 大規模モデル（上記の例ではJSON）を通じて自然言語に対応するエンコード可能な情報を取得した後、この情報に基づいてコードを変換できます。明確なシナリオを持つページの場合、一般的には主要なコードテンプレート（リスト、フォーム、説明フレーム）とビジネスコンポーネントに分割できます。 このステップは、実際には自分でコードを開発するのと非常に似ています。要件を受け取った後、そこから重要な情報、つまり前述の自然言語から命令への変換を抽出します。次に、VS Codeでファイルを作成し、以下の操作を実行します。最初のステップは、コードテンプレートを作成し、シナリオに応じて対応する高機能コンポーネントをインポートすることです。例えば、リストの場合はProTable、フォームの場合はProFormをインポートします。 ProTable などの高負荷コンポーネントを使用し、リスト関連の情報のために headerTitle や pageSize などのプロパティを追加します。コンポーネントは要件記述に基づいて導入されます。例えば、フィルターオプションでカテゴリ選択が検出された場合、useColumnsに新しいビジネスコンポーネントが追加されます。要件記述でインポート/エクスポートコンポーネントが検出された場合、ページ上の指定された場所にインポート/エクスポートビジネスコンポーネントが追加されます。モックリンクを取得したら、新しいリクエスト レイヤーを追加し、ページ上の指定された場所に含めます。上で説明した一般的なコード挿入シナリオはすべて JSON にカプセル化でき、コード テンプレートと AST 挿入または文字列テンプレートの置換を組み合わせることで、対応するコードを生成できます。 ソースコード支援は、主に開発者の反復作業を削減し、コーディング効率を向上させるのに役立ちます。これは、ローコードページ構築とは全く異なる分野に属します。ローコードは特定のシナリオにおける完全なページの構築に重点を置いており、ページ機能は無数に存在します。業界にはローコード構築に関する優れた実践例も存在します。一方、ソースコード支援ツールは、ユーザーがビジネス要件を満たすコードを可能な限り初期化し、その後のコードレベルでの変更やメンテナンスをユーザーに委ねることで、新規ページ追加における開発効率を向上させることを目的としています。フロントエンド開発において、効率向上の鍵はコード量を減らすことです。ページ生成の高速化もその一つであり、コンポーネントの適切な抽出も非常に重要です。ベクターを組み合わせることでコンポーネントのインポートチェーンを最適化し、初期化テンプレートと既存コード内のコンポーネントを迅速に検索・特定できるようにしました。コンポーネントの説明とインポートパラダイムを迅速に取得し、ワンクリックでコンポーネントを入力できます。コンポーネントの説明はベクターデータに変換され、ベクターデータベースに保存されます。 ユーザーが説明を入力すると、その説明はベクトルに変換されます。その後、このベクトルとコンポーネントリストをコサイン類似度に基づいて比較し、類似度が最も高い上位N個のコンポーネントを特定します。 ユーザーは、既存のコード内で最も関連性の高いコンポーネントを説明によってすばやく検索し、Enter キーを押して挿入できます。 - コンポーネント埋め込みテンプレート：現在、コンポーネントはベクター検索をサポートしています。ソースコードページ生成と組み合わせることで、コンポーネントを動的にマッチングし、テンプレートに埋め込むことができます。
- 既存コードの編集と生成：現在は、新しく追加されたページのソースコードのみをサポートしています。将来的には、既存ページへの部分的なコードの追加もサポートされる予定です。
- コード テンプレート パイプライン: AST コード操作ツールは、自然言語とコード記述をさらに統合し、シナリオ拡張の効率を向上させます。
|
