ソート及びフィルタリング処理コード（Vue.js）

今回は先日自主制作課題で作成しましたセミナーイベントの一覧表示アプリのうち、

1、日付の早い順に並べる（ソート）
2、月ボタン別フィルタリング
3、検索キーワードによるフィルタリング

の3つの処理を実行するfilteredEventList()関数のコードを投稿させていただきます。
ソート処理とフィルタリング処理は何かしらの一覧表示アプリには欠かせない処理ですので、私自身にとっても忘れないよう記録しておきたいものです。

ただし、こちらは今現在すでにサポートを終了しているVue2のコードになります点ご了承ください。

Vue.js(2)

new Vue({
    el: '#app',
    data: {
        searchWord: '',      // 検索されたキーワード
        selectedMonth: '',   // 選択された月 ("02"など)
        seminarList: [],     // 全セミナーデータ
    },

    computed: {
        // フィルタリングおよびソート済みの全リスト
        filteredEventList() {
            let list = [...this.seminarList];

            // 1. 日付の早い順に並べる
            list.sort((a, b) => {
                const dateA = a.date || '';
                const dateB = b.date || '';
                return dateA.localeCompare(dateB);
            });

            // 2. 月ボタン別フィルタリング
            if (this.selectedMonth) {
                list = list.filter(event => {
                    return event.date.includes(`-${this.selectedMonth}-`);
                });
            }

            // 3. キーワード検索によるフィルタリング
            if (this.searchWord.trim() !== '') {
                const query = this.searchWord.toLowerCase().trim();
                list = list.filter(event => {
                    return event.title.toLowerCase().includes(query) 
                    || event.description.toLowerCase().includes(query) 
                    || event.location.toLowerCase().includes(query) 
                    || event.category.toLowerCase().includes(query);
                });
            }
            return list;
        },
    },
});

（▼こちらは呼び出し元となるデータです。）

json

"event": [
        {
            "id": 1,
            "title": "生成AI実践入門 ～ChatGPTで業務を効率化する方法～",
            "date": "2027-02-14",
            "date1": "2027-02-14-09-00",
            "category": "AI・生成AI",
            "location": "北海道",
            "location1": "北海道〇〇市△△1-1××ホール",
            "description": "ChatGPTを活用した業務効率化の基本から実践的な活用方法までを事例を交えて学ぶ入門セミナーです。プロンプトの基本的な考え方や、文章作成、議事録の要約、メール作成、アイデア出しなど、日常業務で活用できる具体例を交えながら解説します。また、生成AIを業務へ導入する際の注意点や情報管理、回答精度を高めるコツについても紹介します。実際の活用デモを交えながら、初心者でも安心して使い始められる内容となっており、受講後すぐに実践へ活かせる知識とノウハウを身につけることができます。",
            "img": "images1.png"
        },
    ]
}

※実際のコードでは上記形式のコードを"id"：1～50（全50セミナー）ほど用意して作成しています。また、上記jsonファイルから取り出したeventをseminarListに入れるコードを別途書いております。

それでは今回はこの辺で。
ご覧いただきありがとうございました。