JSでフィルター分けをしてタブ切り替え機能を作成する方法

今回はJavaScriptでA、B、Cと振り分けてから、それぞれのフィルター機能で該当した配列が構築されるプログラムを紹介します。

今回の記事を理解できれば以下のようなボタンをクリックした時に、それに該当したデータを再配列する事ができる様になります。WEBサイトではタブ切り替え機能でよく使われているプログラムなので実践でもかなり使える技術です。

こんな場合に使用

条件に満たした配列に再配列したい
タブ切り替え機能を作りたい
フィルター機能を作りたい

難易度（MAX10)

★★★★★★★☆☆☆

filterメソッドとコールバック関数

JavaScriptでフィルター分けをする方法はfilterメソッドとコールバック関数という技術を使用します。

メソッド	意味
配列.filter(コールバック関数)	コールバック関数に合格した配列を生成する

コールバック関数の構文は以下。

構文
([要素],[インデックス],[配列元]) => 真偽値	要素を受け取って真偽値を返す

filterメソッドは、コールバックに合格した要素から新しい配列を生成します。
例えば以下のサンプルコードでは、「100, 200, 300, 400」が入ったtestオブジェクトの配列に対して300以上を返して下さいとの指示をしています。

const test = [100, 200, 300, 400].filter((size) => size >= 300);
console.log(test);
//結果 [300, 400]

コールバック関数では、この様に受け取った要素が300以上かどうかの判断をして、300以上の場合にtrueを返します。
そして、trueとなった要素は新しい配列の一部となります。

フィルター機能でタブ切り替えするサンプル

以下のHTML、CSS、JavaSceiptはフィルター機能で振り分けた配列を表示する簡易的なタブ切り替え機能を作成したサンプルコードです。

HTML

<div class="btn-warpper">
      <button class="btn" data-age="100">100円以下</button>
      <button class="btn" data-age="500">500円以下</button>
      <button class="btn" data-age="1000">1000円以下</button>
</div>
      <ul class="userlist">
      </ul>

HTMLではbuttonタグで各ボタンにclassを付けてマークアップしておきます。
そのbuttonタグ内にdata-age=”100″の様に該当するデータを入力しておきます。この部分の数値で100以上か以下かの判断がされます。

その下に再配列される用のulリストを空の状態で置いておきます。この時にulに対して任意のclassを付けておきます。

CSS

.btn-warpper {
  display: flex;
  justify-content: center;
  margin: 20px auto;
}
.userlist{
  text-align: center;
  list-style: none;
}
.btn {
  width: 100px;
  height: 30px;
  margin: 10px;
  cursor: pointer;
}

CSSに関してはただのデザインです。今回は簡易的なデザインです。
もっと凝ったものにすればWEBサイトによくあるタブ切り替え機能になります。

JavaScript

const userDataList = [
    { name: 'りんご', age: 80},
    { name: 'みかん', age: 99},
    { name: 'なし', age: 110},
    { name: 'ラフランス', age: 390},
    { name: '桃', age: 400},
    { name: 'メロン', age: 499},
    { name: 'ドラゴンフルーツ', age: 750},
    { name: 'マンゴー', age: 900},
    { name: '巨峰', age: 999},
];
document.querySelectorAll('.btn').forEach((element) => {
    element.addEventListener('click', (event) => {
        onClickButton(event);
    });
});
function onClickButton(event) {
    const btn = event.target;
    const targetAge = btn.dataset.age;
    const filterdList = userDataList.filter((data) => data.age <= targetAge);
    updataList(filterdList);
}
function updataList(filterdList) {
    let listHtml = '';
    for (const data of filterdList) {
        listHtml += `<li>${data.name} : ${data.age}円</li>`;
    }
    document.querySelector('.userlist').innerHTML = listHtml
}

JavaScriptでは、まずは1行目~11行目でデータを置いておきます。
13行目~17行目で「.btn」に対してイベントを追加します。

19行目~24行目ではクリックイベント発生時に配列するデータを決めます。
今回の場合はdata.age <= targetAgeとなっているのでHTMLで記載したdata-age=”100″の数値より低い場合のデータを再配列しています。

16行目~33行目では再配列した要素をHTMLに書き出しています。