🫗
BotterのAI活用研究 3.
前回
フェーズ3
このフェーズでフロントの用意をします。ただ、Claude Codeの性質上フロントを直接みることはおそらくできないので、相性は悪そうな気がしています。ここら辺はDevinとか他の生成AIを使う方が効率が良さそうですが、そこまで凝ったフロントを作るつもりもないのでしばらくはClaudeCodeで進めていきます。(もしかしたらplaywright等のMCPを入れると良かったりするかもしれません)
タスク 3.1~3.3
基本的な土台を作って今まで実装してきたコマンドをフロントで叩ける様にするだけなので今回も前回に引き続き地味です。なので全部まとめて置いておきます
タスク 3.1
Task 3.1 Reactの骨組みの作成
Abstruct:
Hyperliquid blockchain analysis toolのフロントエンドを構築するための基本的なReactアプリケーションを作成する。localhost:3000でアクセス可能な単純なReactアプリケーションを立ち上げ、画面上に"Hello World"を表示させる。
Current Situation:
- frontend/ディレクトリが存在するが、package.jsonは最小限の設定のみ
- Reactの依存関係やビルド設定が未設定
- 開発サーバーの設定が存在しない
- フロントエンドに関するドキュメントが不足している
Implementation Plan:
1. React プロジェクトの初期設定
- package.jsonにReactおよび必要な依存関係を追加
- TypeScriptサポートの設定（@types/react, @types/react-dom）
- 開発サーバー用のスクリプト設定（react-scripts）
- .gitignoreにnode_modules等の除外設定を追加
- npm installの実行とpackage-lock.jsonの生成
- テスト: npm installが正常に完了することを確認
- ビルドチェック: 依存関係が正しくインストールされることを確認
2. 基本的なファイル構造の作成
- public/index.htmlの作成（Reactアプリのエントリーポイント）
- src/index.tsxの作成（Reactのルートコンポーネントのマウント）
- src/App.tsxの作成（メインアプリケーションコンポーネント）
- src/App.cssの作成（基本的なスタイリング）
- tsconfig.jsonの作成（TypeScript設定）
- テスト: ファイル構造が正しく作成されることを確認
- ビルドチェック: TypeScriptのコンパイルエラーがないことを確認
3. Hello World表示の実装
- App.tsxにHello World表示コンポーネントを実装
- 基本的なCSSスタイリングの適用
- React.StrictModeの設定
- 開発サーバーの起動設定（PORT=3000）
- テスト: npm startでアプリが起動することを確認
- ビルドチェック: localhost:3000でHello Worldが表示されることを確認
4. ドキュメントの更新
- CLAUDE.mdにフロントエンド開発用コマンドを追加
- npm start（開発サーバー起動）の説明を追加
- npm build（本番ビルド）の説明を追加
- npm test（テスト実行）の説明を追加
- フロントエンドのディレクトリ構造説明を追加
- テスト: ドキュメントの記載内容が正確であることを確認
- ビルドチェック: 全体のcargo checkが通ることを確認
Key Benefits:
- フロントエンド開発の基盤が整備される
- 標準的なReact + TypeScript構成により、今後の開発が効率的に進められる
- localhost:3000でのアクセスにより、開発中の動作確認が容易になる
- CLAUDE.mdの更新により、将来のClaude instancesがフロントエンド開発を理解しやすくなる
タスク 3.2
Task 3.2 バックエンドの作成
Abstruct:
Hyperliquid blockchain analysis toolのparquet系コマンドをHTTP APIとして提供するRustベースのバックエンドサーバーを実装する。ポート3001で動作し、フロントエンドからのリクエストを受けてparquetコマンドを実行し、その結果をJSON形式で返すRESTful APIを構築する。
Current Situation:
- parquet系コマンドはCLIとして実装済み（parquet-list-wallets, parquet-wallet-history, parquet-stats, parquet-evaluate-wallets）
- HTTP サーバー機能は未実装
- APIエンドポイント設計が必要
- CORS設定やエラーハンドリングの実装が必要
Implementation Plan:
1. HTTPサーバーの基本実装
- Cargo.tomlにaxumとtokioの依存関係を追加
- src/server/mod.rsの作成（HTTPサーバーモジュール）
- 基本的なHTTPサーバー構造の実装（ポート3001でリッスン）
- ヘルスチェックエンドポイント（GET /health）の実装
- main.rsにserverサブコマンドを追加
- テスト: cargo runでサーバーが起動することを確認
- ビルドチェック: curl http://localhost:3001/healthが200を返すことを確認
2. parquetコマンドAPIエンドポイントの実装
- src/server/routes/mod.rsの作成（ルーティングモジュール）
- GET /api/parquet/list-walletsエンドポイントの実装
- GET /api/parquet/wallet-history/:addressエンドポイントの実装
- GET /api/parquet/statsエンドポイントの実装
- GET /api/parquet/evaluate-walletsエンドポイントの実装
- クエリパラメータ処理の実装（directory, limit等）
- テスト: 各エンドポイントが正しいJSONレスポンスを返すことを確認
- ビルドチェック: cargo checkが通ることを確認
3. ミドルウェアとエラーハンドリングの実装
- CORS設定の実装（localhost:3000からのアクセスを許可）
- リクエストロギングミドルウェアの実装
- エラーハンドリング（統一的なエラーレスポンス形式）
- タイムアウト設定（長時間実行されるコマンドへの対応）
- レスポンスの圧縮（gzip）設定
- テスト: CORSヘッダーが正しく設定されることを確認
- ビルドチェック: エラー時に適切なHTTPステータスコードが返ることを確認
4. ドキュメントとテストの更新
- CLAUDE.mdにバックエンドサーバー関連コマンドを追加
- cargo run -- server（バックエンドサーバー起動）の説明を追加
- APIエンドポイントの仕様をREADME.mdまたは別ドキュメントに記載
- 統合テストの作成（tests/server_test.rs）
- Postmanコレクションまたはcurlコマンド例の作成
- テスト: ドキュメントの記載内容が正確であることを確認
- ビルドチェック: cargo test --test server_testが通ることを確認
Key Benefits:
- parquet系コマンドの機能をWeb APIとして利用可能になる
- フロントエンドとの統合が可能になり、UIでの操作が実現できる
- RESTful APIにより、将来的な拡張や他システムとの連携が容易になる
- 非同期処理により、大量データの処理でもサーバーがブロックされない
- 統一的なエラーハンドリングにより、デバッグが容易になる
タスク 3.3
Task 3.3 フロントエンドと結合
Abstruct:
ReactフロントエンドとRustバックエンドサーバーを統合し、ユーザーがWebインターフェースを通じてparquetコマンドを実行できるようにする。各コマンドに対応したUIコンポーネントを作成し、バックエンドAPIと通信してデータを取得・表示する。特にwallet-historyコマンドの結果を資産推移グラフとして視覚化する機能を実装する。
Current Situation:
- Reactフロントエンドの基本構造は実装済み（Task 3.1）
- バックエンドAPIサーバーは実装済み（Task 3.2）
- APIエンドポイントは全て動作可能
- フロントエンドとバックエンドの通信はまだ未実装
- UIコンポーネントは未作成
- グラフ表示機能は未実装
Implementation Plan:
1. API通信基盤の構築
- axios または fetch APIのセットアップ
- API クライアントモジュールの作成（src/api/client.ts）
- 環境変数でのAPI URLの管理（.env.local）
- APIレスポンスの型定義（src/types/api.ts）
- エラーハンドリングの実装
- テスト: APIクライアントが正しくリクエストを送信できることを確認
- ビルドチェック: TypeScriptのコンパイルエラーがないことを確認
2. UIコンポーネントの実装
- コマンド選択コンポーネント（src/components/CommandSelector.tsx）
- パラメータ入力フォームコンポーネント（src/components/ParameterForm.tsx）
- 結果表示コンポーネント（src/components/ResultDisplay.tsx）
- ローディング状態の表示コンポーネント
- エラー表示コンポーネント
- Material-UI または Ant Designの導入（オプション）
- テスト: 各コンポーネントが正しくレンダリングされることを確認
- ビルドチェック: npm run buildが成功することを確認
3. parquetコマンドの統合
- list-wallets機能の実装（ウォレット一覧表示）
- stats機能の実装（統計情報表示）
- evaluate-wallets機能の実装（ランキング表示）
- wallet-history機能の実装（取引履歴表示）
- 各コマンドのパラメータ入力UI実装
- 結果のテーブル表示実装
- ページネーション機能の追加（必要に応じて）
- テスト: 各コマンドが正しくAPIを呼び出し結果を表示することを確認
- ビルドチェック: フロントエンドとバックエンドの統合テスト
4. グラフ機能の実装
- Chart.js または Recharts の導入
- wallet-history データのグラフ用変換処理
- 資産推移グラフコンポーネント（src/components/AssetChart.tsx）
- PnL推移グラフの実装
- 時系列データの表示オプション（日次/週次/月次）
- グラフのズーム・パン機能
- テスト: グラフが正しくデータを表示することを確認
- ビルドチェック: 大量データでもパフォーマンスが問題ないことを確認
5. UI/UXの改善とドキュメント更新
- レスポンシブデザインの実装
- ダークモード対応（オプション）
- キーボードショートカットの実装
- ヘルプ/使い方ガイドの追加
- CLAUDE.mdにフロントエンド開発の詳細を追加
- README.mdに使い方を追加
- テスト: 異なる画面サイズで正しく表示されることを確認
- ビルドチェック: 本番ビルドが正常に動作することを確認
Key Benefits:
- ユーザーフレンドリーなWebインターフェースでデータ分析が可能になる
- コマンドラインの知識がなくても利用可能
- 視覚的なグラフにより、データの理解が容易になる
- パラメータの入力ミスが減り、使いやすさが向上する
- 将来的な機能拡張の基盤が整備される
これら全て合わせて2時間弱くらいで実装が終わりました。実際のフロントを見れない分バグの修正などが必要な部分が多かったですが、それらの修正を全部合わせても3時間もかからず完成しました。
以下でフロントをスクショで載せておきます
トップページ
list-wallets コマンド
取得データ内でトレードしたウォレットを一覧表示します
statistics コマンド
取得データに関する統計情報を表示します
evaluate-wallet コマンド
各ウォレットの成績について任意の指標(SR,DD,PF,Pnl等)でソートします
wallet-history コマンド
任意のウォレットの取引履歴を表示します
今後の予定
ここまでで基礎が完了しました。今後新しいデータを加えたり、新しいコマンドを用意する場合は沢山あると思いますがコアな処理部分のみを実装するだけで簡単に機能拡張ができるような土台ができたと思います。フロントも同様です。
ここからAIエージェントのフレームワークを実装していく予定です。
最終的なAIエージェントは"市場の分析->優秀ウォレットの特定->定性・定量分析"という流れを実行させる想定ですが、もちろん最初からうまくいかないことは重々承知なので、最初にフレームワークを完成させてから必要なコマンドやデータの拡張とAIエージェントフレームワークの改善を行なっていく予定です。
AIエージェントのフレームワークに関してはまだ思案中ですので次回の記事ももう少し時間が空くかもしれません。
Discussion