【実務で使える】JavaScriptでフィルタリングとURLパラメータを実装する

2026年9月20日

今回は

ということで、僕が実際に実務で実装したことがあるパターンをもとに、オリジナルのフィルタ機能とURLパラメータを作ってみました。

それがこちら。

URLパラメータとは？

URLパラメータとは、URLの末尾に付く部分のことです（クエリ文字列とも呼ばれます）。

例えば

https://xxx.com?id=drink

というurlがあった際に、「?id=drink」の部分がURLパラメータです。

URLパラメータを活用すると、「検索結果が適用された状態のURL」をブラウザに保持できます。これにより、検索結果のページをブックマークしたり、他人にSNS等でシェアしたり、ページを更新しても絞り込み状態が維持されるようになります！

該当のコード一覧

細かいコードはこちら。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js絞り込みとurlパラメータ</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <button data-id="car">車</button>
    <button data-id="train">電車</button>
    <ul>
        <li data-id="car"><a href="https://y-programing.github.io/js-filtering-and-URLparameters/keizidosya.html">軽自動車</a></li>
        <li data-id="train"><a href="https://y-programing.github.io/js-filtering-and-URLparameters/shinkansen.html">新幹線</a></li>
        <li data-id="car"><a href="https://y-programing.github.io/js-filtering-and-URLparameters/soratobukuruma.html">空飛ぶ車</a></li>
    </ul>
    <ul>
        <li data-id="train"><a href="https://y-programing.github.io/js-filtering-and-URLparameters/keihintohokusen.html">京浜東北線</a></li>
        <li data-id="train"><a href="https://y-programing.github.io/js-filtering-and-URLparameters/tyuosobusen.html">中央総武線</a></li>
        <li data-id="car"><a href="https://y-programing.github.io/js-filtering-and-URLparameters/tesla.html">テスラ</a></li>
    </ul>
</body>
</html>

今回は、このメインのファイルの他に、keihintohokusen.htmlなどのように、車と電車に関係したhtmlファイルが6つあります。

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

button {
    border: none;
    padding: 10px;
    margin: 10px;
}

button.active {
    background-color: red;
    color: white;
}

li {
    border: 1px solid #333;
    padding: 10px;
}

li a {
    color: blue;
}

@media screen and (max-width: 768px) {
    button {
        font-size: 14px;
    }    
}

JavaScript

const buttons = document.querySelectorAll("button");
const list = document.querySelectorAll("li");

function setActiveButton(id) {
    buttons.forEach(button => {
        if (button.dataset.id === id) {
            button.style.backgroundColor = "#ED1A3D";
            button.style.color = "#fff";
        } else {
            button.style.backgroundColor = "";
            button.style.color = "";
        }
    });
}

function filterList(id) {
    list.forEach(li => {
        if (li.dataset.id === id) {
            li.style.display = "";
        } else {
            li.style.display = "none";
        }
    });
}

// ページ読み込み時
const currentId = new URLSearchParams(location.search).get("id");

if (currentId) {
    setActiveButton(currentId);
    filterList(currentId);
}

buttons.forEach(button => {
    button.addEventListener("click", () => {
        const id = button.dataset.id;

        // フィルタ
        filterList(id);

        // ボタン色
        setActiveButton(id);

        // URL更新
        const url = new URL(location);
        url.searchParams.set("id", id);
        history.pushState({}, "", url);
    });
});

さいごに

要素とボタンに data-id 属性を付与してフィルターの対象を定義する。
ボタンクリック時に filterList() と setActiveButton() で表示
見た目を制御する。
URLSearchParams と history.pushState() で画面遷移せずにURLへパラメータ（?id=xxx）を保存し、ページ読み込み時（直リンクやリロード時）にも状態を復元できる。

絞り込んだ状態でURLをシェアできるようになると、Webサイトの利便性が一気に上がります。
実務でも定番の組み合わせですので、パーツとしてストックしておくと重宝しますよ！

よかったらシェアしてね！