TypeScript/Next.jsで作るFXトレードジャーナル構築記録 画面一覧と項目定義

目次

1. 画面一覧(フェーズ1〜2想定)

フェーズ1対象(今回設計)

  1. ログイン画面
  2. ダッシュボード画面
  3. 取引一覧画面
  4. 取引詳細画面
  5. 損益カレンダー画面
  6. (任意)インポート履歴画面(一覧のみ)

フェーズ2以降

  1. 分析画面(統計・グラフ)
  2. 口座管理画面
  3. タグ管理画面
  4. 設定画面(時刻基準・取込パス等)

2. 画面項目定義(初版)


① ログイン画面 /login

目的

  • ユーザー認証(初版はシンプルでOK)

入力項目

  • メールアドレス
  • パスワード

表示項目

  • アプリ名(FX Trade Journal)
  • ログインエラーメッセージ

ボタン

  • ログイン
  • (将来)ログアウトはヘッダーへ

② ダッシュボード画面 /dashboard

目的

  • 現在の状況を一目で把握(残高/有効証拠金/今日/月次/オープントレード)

表示項目(カード)

  • 選択口座(Broker / Account No)
  • Balance(最新)
  • Equity(最新)
  • 更新時刻
  • 今日の損益(9:00基準)
  • 今月の損益
  • 今月のトレード数
  • 勝率(簡易、closed対象)

表示項目(一覧)

  • オープントレード一覧
    • Ticket
    • Symbol
    • Buy/Sell
    • Lots
    • Open Price
    • Current/Close Price(初版はClose未使用なら省略)
    • Profit
    • Open Time

表示項目(運用系)

  • 最新CSV取込時刻
  • 最新画像取込時刻
  • 直近ジョブ結果(成功/失敗)

操作

  • 口座切替(プルダウン)
  • 期間移動(今月/前月)※初版は今月固定でもOK

③ 取引一覧画面 /trades

目的

  • 取引履歴の検索・確認・詳細遷移

検索/フィルタ項目

  • 口座(broker + account)
  • 期間From(close_time基準)
  • 期間To
  • Symbol
  • Side(BUY/SELL)
  • Status(OPEN/CLOSED)
  • タグ(将来)
  • キーワード(ticketNo / comment)

一覧表示項目

  • Close Time(またはOpen Time)
  • Ticket No
  • Symbol
  • Side
  • Lots
  • Open Price
  • Close Price
  • Commission
  • Swap
  • Profit
  • Status
  • 画像有無
  • タグ数(将来)

操作

  • 検索
  • 条件クリア
  • ソート(close_time / profit)
  • 詳細へ遷移
  • CSV出力(将来)

④ 取引詳細画面 /trades/[id]

目的

  • 1トレードを振り返り、メモ/タグを記録する

表示項目(基本)

  • Broker / Account No / Ticket No
  • Symbol
  • Side
  • Status
  • Lots
  • Open Time / Close Time
  • Open Price / Close Price
  • SL / TP
  • Commission / Swap / Profit
  • MT4 Comment

表示項目(画像)

  • 取引画像(1枚表示、将来複数対応)
  • 撮影時刻(captured_at)
  • 画像なし表示

入力項目(アプリ側)

  • ジャーナルコメント(簡易)
  • 詳細メモ(TradeNote)
  • 手法タグ(複数選択)
    • 例:CCI / BB / RSI / MACD / 裁量 / ブレイクアウト

操作

  • 保存
  • 一覧へ戻る
  • 前/次のトレード(将来)

⑤ 損益カレンダー画面 /calendar

目的

  • 日別損益の可視化(月次)

表示項目

  • 年月(対象月)
  • 月合計損益
  • 日別セル
    • 日付
    • 日次損益
    • トレード件数
  • 色分け(プラス/マイナス/ゼロ)

操作

  • 前月
  • 次月
  • 日付クリックでその日の取引一覧へ遷移

⑥ インポート履歴画面 /imports(初版は一覧のみでも可)

目的

  • 運用状態の確認(失敗原因が追える)

検索項目

  • ジョブ種別
  • ステータス
  • 日付範囲

一覧表示項目

  • 実行開始時刻
  • ジョブ種別(CSV/画像/スナップショット)
  • ステータス
  • 対象パス
  • 処理ファイル数
  • imported / updated / skipped / failed
  • メッセージ

操作

  • 詳細表示(将来)
  • 再実行(将来)

3. 共通UI(メニュー)定義

ヘッダー

  • アプリ名
  • 口座選択(将来)
  • ユーザー名
  • ログアウト

サイドメニュー(PC)

  • Dashboard
  • Trades
  • Calendar
  • Analytics(フェーズ2)
  • Imports
  • Accounts(フェーズ2)
  • Settings(フェーズ3)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次