コードを記述せず、カスタム株式選定モジュールを設計・開発する。

先月の当社では、cursorを試用しましたが、無料枠の制限により、複雑な機能開発は行わず、簡単なテストに留めました。その際に見つけたのは、Byte社も同様の製品を発表しており、両者は共通してClaude-3.5という大規模言語モデルを底で呼んでいる点でした。 Byte社の製品は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の機能に対する私のテストです。対応する機能を実装するために人工干渉を行ったかどうかを備考に記載しています。

プロンプト

プロジェクトは、ゼロから作成するものですが、以下の内容がプロジェクトのプロンプトです：

プロジェクトのプロトタイプ図に基づいて、以下の機能を開発してください：
    *   選別銘柄（ウォッチリスト）機能。契約新規追加、削除、修正、照会をサポートする必要があります。
    *   選別銘柄インターフェースは、基本的な市場データを表示する必要があります。
    *   複数の異なる市場の切り替えをサポートする必要があります。

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

    サーバーサイドには、クロスオリジンリクエストをサポートする必要があり、データの検証とエラー処理も考慮する必要があります。バックエンドサービスが利用できない場合、フロントエンドはアラートを表示する必要があります。

    バックエンドは、リクエストとレスポンスのログを表示し、フロントエンドも通信ログを出力して問題のトラブルシューティングに役立てます。

UIとインタラクションの最適化

フロントエンドインターフェースのデザインは完全に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で構築され、以下の機能を実装しています。

株価リストの表示
お気に入り銘柄の管理
相場データ表示
エラー通知メカニズム