超高性能フィルターが作れるMixItUpを実装してみましょう。

MixItUpはページ内ソートができるJavaScriptのプラグインです。jQueryなどに依存していないプレーンなJavaScriptなので、あらゆる場面で使えると思います。

サンプル

サンプルを見てみましょう。

See the Pen
MixItUp
by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

サンプルでは、上部のボタンをクリックすると下部にあるリストがアニメーションされてフィルタリングされます。

HTML

HTMLはこんな感じです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CodePen - MixItUp</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div class="mixitup-button">
      <button type="button" data-filter="all">ALL ITEM</button>
      <button type="button" data-filter=".cat-a">A</button>
      <button type="button" data-filter=".cat-b">B</button>
      <button type="button" data-filter=".cat-c">C</button>
      <button type="button" data-filter=".cat-d">D</button>
      <button type="button" data-filter=".orange" class="orange">ORANGE</button>
      <button type="button" data-filter=".blue" class="blue">BLUE</button>
      <button type="button" data-filter=".red" class="red">RED</button>
    </div>

    <div class="mixitup-list">
      <div class="mix cat-a orange"><span>A</span></div>
      <div class="mix cat-b blue"><span>B</span></div>
      <div class="mix cat-b cat-c orange"><span>B / C</span></div>
      <div class="mix cat-a cat-d blue"><span>A / D</span></div>
      <div class="mix cat-b cat-d blue"><span>B / D</span></div>
      <div class="mix cat-a cat-b red"><span>A / B</span></div>
    </div>
    <!-- partial -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

MixItUpはCDNでも提供されているので、CDNで読み込んでおくと何かと安心ですね。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>

class=”mixitup-button”

class=”mixitup-button”はフィルタリングするためのボタンを配しています。data-filter=”FOO”を入れることでボタンとして機能します。

class=”mixitup-list”

class=”mixitup-list”はフィルタリングされるリストを配しています。class=”mix”に、data-filter=”FOO”とマッチするclass名を入れておきます。

class="mix FOO"

例えばmixitup-listに「fruit red」と入れておき、mixitup-buttonで「fruit」「red」とそれぞれのボタンを作ることで、「フルーツのみ」や「赤色のみ」のフィルタリングが可能になります。

CSS

CSSはSCSSを使っています。

.mixitup-button {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid #cccccc;
  padding: 2rem;

  button {
    background: #eeeeee;
    border: 1px solid #cccccc;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;

    &:hover {
      border: 1px solid #000000;
    }
  }
}

.mixitup-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 2rem;

  div {
    margin: 0;
    width: calc(100% / 3 - 0.75rem);

    span {
      display: block;
      color: #ffffff;
      font-weight: bold;
      padding: 1rem;
    }
  }
}

.orange {
  color: #ffffff;
  background: #f0932b !important;
}

.blue {
  color: #ffffff;
  background: #4834d4 !important;
}

.red {
  color: #ffffff;
  background: #eb4d4b !important;
}

すべてのコードを載せていますが、トンマナに合わせて好きなようにデザインしてだいじょうぶです。

JavaScript

MixItUpを実行するためのコードを書きます。

var containerEl = document.querySelector(".mixitup-list");
var mixer = mixitup(containerEl);

これだけで基本的には動きます。

さいごに

MixItUpは、セグメント、ソート、ランダム、追加、削除、など数多くの機能を備えたプラグインです。

使う場面は少ないかもしれませんが、いざというときに使えるとかなりの時短になりますので、ぜひ、覚えておくと良いですよー!