Home

2026-01-26 ファイルリスト自動更新 確認

ファイルリスト自動更新機能 - 実装計画

要件

ファイルドロップダウンを開くたびに最新のファイルリストを取得する。

現在の実装では:

  • プロジェクトパスが変更された時に一度だけ loadFiles が呼ばれる (CommandForm.tsx:45-49)
  • その後は5秒ごとにポーリングで更新される
  • しかし、ドロップダウンを開いた時には明示的に最新データを取得していない

フロントエンド実装計画

1. ファイルリスト更新の改善

変更ファイル: frontend/src/hooks/useFileSelector.ts

追加する機能:

  • 新しい関数 refreshFiles を追加
    • プロジェクトパスを引数に受け取る
    • ローディング表示なしで即座にファイルリストを取得
    • fetchFilesInternal を内部で使用（既存のポーリング用関数を再利用）

返却値の変更:

  • refreshFiles 関数をエクスポートに追加

2. ドロップダウン開閉時の更新トリガー

変更ファイル: frontend/src/components/CommandForm.tsx

追加する機能:

  • ファイルドロップダウンの onFocus イベントハンドラを追加
  • フォーカス時に refreshFiles を呼び出す
  • props に onRefreshFiles を追加

変更箇所:

  • CommandFormProps インターフェースに onRefreshFiles: (project: string) => void を追加
  • <select> 要素（File optional のドロップダウン）に onFocus 属性を追加

3. 親コンポーネントの対応

変更ファイル: frontend/src/app/page.tsx

変更箇所:

  • useFileSelector から refreshFiles を取得
  • CommandForm に onRefreshFiles プロップとして refreshFiles を渡す

実装ステップ

  1. useFileSelector.ts に refreshFiles 関数を追加し、エクスポートに含める
  2. CommandForm.tsx の props に onRefreshFiles を追加
  3. CommandForm.tsx のファイルドロップダウンに onFocus ハンドラを追加
  4. page.tsx で refreshFiles を取得し、CommandForm に渡す

懸念点と解決策

懸念1: ドロップダウンを開くたびにAPIリクエストが発生する

リスク: ユーザーが何度もドロップダウンを開閉すると、不要なAPIリクエストが多発する

解決策:

  • A. デバウンス処理を追加（例: 3秒以内の連続フォーカスは無視）
  • B. 前回の更新から一定時間（例: 2秒）以内は再取得しない
  • C. 現状維持（ポーリングが既に5秒間隔なので、それほど問題にならない可能性）

推奨: C（現状維持）- ポーリングが既に動作しているため、追加のスロットリングは不要と判断

懸念2: ローディング表示の有無

現状: refreshFiles はローディング表示なしで実行される

リスク: ユーザーが更新処理が実行されたことに気づかない可能性

解決策:

  • A. ローディング表示なし（現状維持、ポーリングと同じ挙動）
  • B. ドロップダウンに小さなスピナーを表示
  • C. 更新完了時に微妙な視覚フィードバック（アニメーション）

推奨: A（ローディング表示なし）- ポーリングと同じ挙動で統一し、UXを滑らかに保つ

懸念3: プロジェクトパスが空の場合

現状: fetchFilesInternal はプロジェクトパスが空の場合に早期リターンする

リスク: プロジェクトパス未入力時にドロップダウンにフォーカスしてもエラーが起きないか

解決策: 既存の fetchFilesInternal がガード条件を持っているため、追加対応不要

変更ファイル一覧

  1. frontend/src/hooks/useFileSelector.ts

    • refreshFiles 関数を追加
    • 返却値に refreshFiles を追加

  2. frontend/src/components/CommandForm.tsx

    • CommandFormProps に onRefreshFiles を追加
    • ファイルドロップダウンに onFocus ハンドラを追加

  3. frontend/src/app/page.tsx

    • useFileSelector から refreshFiles を取得
    • CommandForm に onRefreshFiles を渡す

型定義の変更

なし（既存の型で対応可能）

テスト観点

手動テスト

  1. プロジェクトパスを入力
  2. ファイルドロップダウンを開く → ファイル一覧が表示される
  3. 開発フォルダに新しい .md ファイルを作成
  4. ファイルドロップダウンを開く → 新しいファイルが即座に表示される
  5. ドロップダウンを何度も開閉 → エラーが発生しない

ユニットテスト（今回は不要）

  • 既存のポーリング機能のテストで十分カバーされている

ドキュメント更新

不要（内部実装の改善のみ）

実装完了レポート

実装サマリー

  • 実装日: 2026-01-26
  • 変更ファイル数: 7 files（コード3ファイル + ドキュメント4ファイル）

変更ファイル一覧

ファイル変更内容
frontend/src/hooks/useFileSelector.tsrefreshFiles 関数を追加、ポーリング機能を削除
frontend/src/components/CommandForm.tsxonRefreshFiles prop を追加、ドロップダウンに onFocus ハンドラを実装
frontend/src/app/page.tsxuseFileSelector から refreshFiles を取得し、CommandForm に渡すよう変更
frontend/docs/screens.mdファイル選択の自動リフレッシュ機能を追記、useFileSelector の説明を更新
frontend/docs/screen-flow.mdファイル選択フローにサイレント更新を追加、状態遷移表を更新
frontend/docs/scenarios/command-execution.mdシナリオ1,2に「フォーカス時にファイルリストが自動更新される」を追記

計画からの変更点

  • ポーリング機能の削除: 計画では言及されていなかったが、5秒ごとのポーリング機能を削除。ドロップダウンフォーカス時の更新のみに簡素化
  • ドキュメント更新: 計画では「不要」としていたが、機能追加に伴い screens.md, screen-flow.md, command-execution.md を更新

実装時の課題

特になし

  • ビルド・型チェックは正常に通過
  • 既存のエラーは本機能とは無関係（別ファイルの型定義の問題）

残存する懸念点

特になし

  • 計画で挙げていた懸念点（API リクエストの多発、ローディング表示、空のプロジェクトパス）は全て対処済み
  • ポーリング削除により、むしろ API リクエスト数は減少

動作確認フロー

1. フロントエンドを起動: make frontend
2. ブラウザで http://localhost:3000 を開く
3. Project Path にプロジェクトの絶対パスを入力
4. File (optional) ドロップダウンをクリック
5. 開発フォルダ内のファイル一覧が表示されることを確認
6. 別のターミナルで開発フォルダに新しい .md ファイルを作成
   例: touch 開発/資料/テストファイル.md
7. ドロップダウンを再度クリック（フォーカス）
8. 新しく作成したファイルが一覧に表示されることを確認
9. ドロップダウンを何度も開閉してエラーが発生しないことを確認

デプロイ後の確認事項

  • ファイルドロップダウンにフォーカスした際、最新のファイルリストが取得されること
  • 新規ファイルを作成後、ドロップダウンを開くと即座に反映されること
  • プロジェクトパスが空の状態でドロップダウンをフォーカスしてもエラーが発生しないこと
  • ローディング表示なしでサイレントに更新されること

コードレビュー結果

  • 重大な問題: なし
  • 警告: なし
  • React と TypeScript のベストプラクティスに準拠