Newsページ フィルタリング機能 実装概要

1. 構成要素

• NewsFilter.astro カテゴリごとのラジオボタンでフィルタリング条件を選択できるUI。

• NewsList.astro フィルター結果に応じたニュース記事リストを表示。 データはdata-sort-data属性で非表示領域にJSONとして埋め込まれる。

• Pager.astro 記事数が多い場合のページ送りUI。

• NewsItem.astro 各ニュース記事の表示コンポーネント。 JSでリンク先やカテゴリ、アイコンの制御を行う。

2. フィルタリング・ページネーションの流れ

1. 初期化

   • data-sort属性を持つ要素を起点に、Sort.tsのJSクラスが初期化される。
   • ニュースデータ（例：testData.json）がNewsListに渡され、data-sort-data属性にJSONで埋め込まれる。

2. フィルター操作

   • NewsFilterのラジオボタン（data-sort-item）の選択が変わると、Sort.tsが現在の選択状態を取得。
   • 選択状態に合致するデータのみを抽出し、NewsListのstore.showDataに反映。

3. ページネーション

   • 抽出後のデータが多い場合、1ページあたりの表示件数（例：25件）で分割し、Pager.tsでページ送りを制御。
   • ページ番号や「次へ」「前へ」ボタンでページを切り替えると、該当ページのデータのみがNewsListに表示される。

4. URLパラメータ連携

   • フィルターやページ送りの状態はURLパラメータにも反映され、リロードや直リンクでも同じ状態を再現できる。

3. NewsItemのJSで行っている処理

• リンク先の設定 data-news-item-hrefに格納された値を<a>タグのhref属性にセット。

• カテゴリの表示 data-news-item-categoryに格納されたカテゴリ配列をもとに、

  • 日本語カテゴリリスト（.categoryJa）
  • 英語カテゴリリスト（.categoryEn） をそれぞれ生成・挿入。

• アイコンの切り替え data-news-item-typeの値がpdfの場合はPDFアイコンを表示し、通常は矢印アイコンを表示。

• フィルタやページ切り替え時の再描画対応 sortChangedイベントを監視し、フィルタやページ送りでリストが切り替わった際にも上記処理を再実行。

4. データ属性による連携

• 各要素にはdata-sort-*やdata-news-item-*属性が付与されており、JS側でDOMを探索・制御しやすい設計。

まとめ

• UIで選択 → JSでデータ抽出 → リスト・ページネーション・各アイテムの描画に反映 という流れで、SPA的なフィルタリング体験を実現。
• NewsItemのJSでは、リンク・カテゴリ・アイコンの動的制御や、フィルタ・ページ切り替え時の再描画対応も行っている。
• URLパラメータ連携で状態の再現性・共有性も高い。

このような構成・仕組みで、ユーザーが直感的にニュースを絞り込めるフィルタリング機能を実装しています。