概要
脱React化の段階的移行として、PracticeFilterDropdown.jsx を素のJavaScriptに置き換えます。Reports.jsx
の他の部分には影響を与えず、プラクティス絞り込み機能を移行します。
対象ファイル
- app/javascript/components/PracticeFilterDropdown.jsx （削除）
- app/javascript/components/Reports.jsx （PracticeFilterDropdownの呼び出し部分のみ修正）
- app/javascript/practice-filter-dropdown.js （新規作成）
注意点
- データ受け渡し：data-practices、data-practice-id 属性でデータを渡す
- コールバック関数：onPracticeChange でReactの状態更新関数を受け取り
- Choices.js統合：既存のChoices.jsライブラリを継続使用
- 初期選択値：practiceId による初期選択状態の再現
- 検索機能：Choices.jsの検索機能を完全に維持
- 日本語設定：検索プレースホルダーやメッセージの日本語設定を維持
- 既存CSS完全維持：page-filter form、a-form-select などを完全再現
- クリーンアップ：Choices.jsインスタンスの適切な破棄
参考資料
チェックリスト
事前調査
- Choices.js の設定オプション確認
- プラクティス一覧データの構造確認
- 既存CSS（page-filter、a-form-select）の確認
実装
- app/javascript/practice-filter-dropdown.js を作成
- PracticeFilterDropdown クラスの実装
- HTML生成ロジックの実装（既存構造完全再現）
- Choices.js初期化の実装
- 初期選択値設定の実装
- change イベントハンドリングの実装
- コールバック関数による状態更新の実装
- Choices.js インスタンス破棄の実装
- initPracticeFilterDropdown 関数の実装
- Reports.jsx での import 文削除
- Reports.jsx での JSX 部分を div + data属性に変更
- Reports.jsx での useEffect + 動的import + コールバック追加
テスト・確認
- 日報一覧でのプラクティス絞り込み表示確認
- 「全ての日報を表示」選択時の動作確認
- 特定プラクティス選択時の絞り込み動作確認
- 検索機能の動作確認（Choices.js）
- 初期選択値の設定確認
- プラクティス変更時の日報一覧更新確認
- レスポンシブ表示の確認
- Choices.jsのUIスタイル確認
クリーンアップ
- PracticeFilterDropdown.jsx ファイルを削除
- 動作確認完了後、不要なimport文がないことを確認
概要
脱React化の段階的移行として、PracticeFilterDropdown.jsx を素のJavaScriptに置き換えます。Reports.jsx
の他の部分には影響を与えず、プラクティス絞り込み機能を移行します。
対象ファイル
注意点
参考資料
チェックリスト
事前調査
実装
テスト・確認
クリーンアップ