コードを書かずに、カスタム銘柄選択モジュールを設計・開発する。

先月、Cursor を試用しましたが、無料枠の制限により、複雑な機能開発は行わず、簡単なテストにとどまりました。その際、ByteDance も同様の商品をリリースしていることがわかり、両者とも基盤となる大規模言語モデルは Claude-3.5 でした。

バイトのプロダクトTrae、まずMac版がリリースされ、今年の2月になってようやくWindows版もリリースされました。大手企業のものはやっぱり良いですね。無料で利用でき、お金を払わずにClaude-3.5を無制限に使えるので、このモデルの効果はなかなか良いです。

最終、K線図の開発でつまずいてしまいました。私自身がreactの基礎をほとんど理解していないため、諦めざるを得ませんでした。開発を続けたいのであれば、筆者がフロントエンドの基礎知識を補強し、タスクをより細かく分割する必要があり、いきなり「K線図の開発」という大きなタスクを与えるべきではありません。

発見された問題

海外のAIモデルを使用するため、Vue3 + Element-Plus のトレーニングデータが不足しているため、React をフロントエンドフレームワークとして選択しました。
文法的な誤りが偶発的に存在する可能性があり、手動での修正が必要です。
複雑な問題の解決には、手動によるガイダンスが必要です。
コード構造の最適化には人的指導が必要です。

最も時間がかかったのは、フロントエンドコードをコンテナにパッケージ化することです。筆者はゼロから始めたため、.env.productionやtsconfig.jsonといった概念が全く理解できませんでした。途中で豆包（友人）に助けられたおかげで、ようやく対応するロジックを整理することができました。フロントエンドの開発におけるdevモードとbuildモードでは、コードのチェックに関して大きな違いがあります。バックエンドデータベースとサービスのコンテナスクリプトは、合わせて5分程度で終わりました。

AIは現在、開発の効率を上げることに重点が置かれており、基礎があることが最も重要です。AIがすべての問題を解決するわけではありません。

倉庫住所

タイトルが示すように、今回は書かずにAIと直接対話し、独自の株式モジュールを設計・開発します。最終的にどのような効果が得られるか見てみましょう。

倉庫アドレス：https://github.com/ttf248/trae-demo

詳細な使用方法は、倉庫のREADME.mdファイルを参照してください。

倉庫には多くの提出記録が含まれており、そのほとんどが私とTraeとの会話記録、そして私がTraeのいくつかの機能に対して行ったテストです。それぞれの機能を達成するために手動介入を行ったかどうかを注記しています。

Prompt

プロジェクトはゼロから作成され、以下にプロンプトを示します。

基于项目原型图，开发功能：自选股，需要支持合约的新增、删除、修改、查询。自选股界面需要展示基础的行情数据。支持多个不同的市场切换。

前端：react
后端：golang gin gorm
数据库：PostgreSQL

服务端需要支持跨域请求，同时需要考虑数据的校验和错误处理，如果后端服务不可用，前端需要告警提示。

后端需要展示请求和应答的日志；前端也打印通讯的日志，方便排查问题。

ユーザーインターフェースとインタラクションの最適化

フロントエンドのインターフェースのデザインは完全にGrokに依存しており、まずTraeでプロダクトのプロトタイプを作成しましたが、美意識はありませんでした。使用しているモデルはコード生成能力は非常に高いですが、他の能力は弱いため、Grokを使ってフロントエンドUIを最適化する必要があります。

現在のインターフェースのスクリーンショットを Grok にアップロードし、UI の最適化を依頼すると、一度に多くの改善提案が得られるかもしれない。私たちはそれらを評価し、Trae で実行して、最適化の効果を確認する。

技術スタック

フロントエンド：React + TypeScript
バックエンド：Golang + Gin + GORM
データベース：PostgreSQL 17

システムアーキテクチャ

バックエンドアーキテクチャ

バックエンドはGolangのGinフレームワークでRESTful APIを実装しており、主なモジュールは以下の通りです。

データベースモジュール

GORM を ORM フレームワークとして使用する
環境変数を設定してデータベース接続を構成する。
自動的にデータベーステーブルを移行する

ルーティングモジュール

RESTful API 設計
統一されたエラー処理メカニズム
内蔵リクエストログ

越域処理

ローカル開発環境でのクロスドメインをサポートする。
設定可能なCORSポリシー
Cookie のクロスドメインをサポート

フロントエンドアーキテクチャ

フロントエンドはReact + TypeScriptで構築されており、以下の機能を実装しています：

株式リスト表示
自主選択株式管理
市場データ表示
エラー通知メカニズム