絞り込んだ一覧を、そのまま送る。URLに検索条件を残す小さな実装

この記事の目次開く・閉じる

今回の仕上がり

種類を「ツール」、作品名を「星」にして「条件を反映」を押しました。URLにはkind=toolとqの値が入り、再読み込み後も「星のメモ」だけが表示されました。架空の作品3件を使う練習用の一覧で、実際の作品データベースではありません。

ツールと「星」で1件に絞り込み。撮影はローカル確認用URLで、本番では公開ドメインのURLになります。タップして拡大できます。

こちらは実際に触れる作例です。 スクリーンショットで操作や音を代用したものではありません。音の作例も自動では鳴りません。

作例を別画面で開く → · サンプル一式を保存（ZIP）

必要なものと操作順

ブラウザだけで試せます。URLを書き換える操作はlocalhostかHTTPSで確認してください。ZIPを開いただけのfile形式では制限が出る場合があります。紹介する3作品は説明用の架空データです。

「作例を別画面で開く」を押し、アドレス欄が見える状態にする。
種類で「ツール」を選び、作品名に「星」と入力する。
「条件を反映」を押し、「星のメモ」1件とURL欄を見る。
ブラウザを再読み込みし、種類と検索語、結果が戻ることを確認する。
検索語を空にして「すべて」へ戻し、3件になることを確かめる。共有する場合はURL欄を選んでコピーする。

仕組みと使いどころ

画面の状態を、開き直せる形にする

画面内の変数だけで絞り込むと、読み込み直したときに初期値へ戻ります。URLへ条件を書き、開始時にURLから読み取れば、同じ条件を別のタブでも使えます。

この作例ではkindが種類、qが検索語です。最初に読み取り、入力欄と結果をそろえます。種類に未知の値が来たら「すべて」に戻し、検索語も長さを制限しています。

日本語や記号は専用の仕組みに任せる

URLSearchParamsのsetやgetを使うと、値をクエリの一部として扱えます。検索語に&などが入っても、別の条件名として誤って解釈しない形にできます。

パーセント記号が増えたURLは壊れているとは限りません。日本語をURLで扱うための表現です。元の文字を復元する処理と、画面へ表示する処理を分けます。作例ではtextContentを使い、入力をHTMLとして実行しません。

履歴を増やすかどうかも決める

作例はreplaceStateで現在のURLを置き換えます。条件を変えるたびに履歴の項目を増やす方式ではないため、「戻る」で条件変更を一段ずつ戻れるとは説明していません。

条件ごとに戻りたいならpushStateとpopstateへの対応が必要になります。今回の完成形は、共有と再読み込みで復元する小さな一覧です。サーバー検索やログイン状態の共有まで含めていません。

コードの要点

const url = new URL(location.href);
url.searchParams.set("kind", "tool");
url.searchParams.set("q", "星");
history.replaceState(null, "", url);

// 開始時に条件を読む
const params = new URLSearchParams(location.search);
const query = params.get("q") || "";

条件を書いて読む部分の抜粋です。サンプル本体では種類の許可リスト、検索語の長さ、一覧の表示も処理します。別ページへ移動するためのURLを入力から作る機能はありません。

自作のHTML・CSS・JavaScript・SVGはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。

できたかの確認とよくあるつまずき

ツールと「星」で「星のメモ」1件になる。
再読み込み後も種類、検索語、結果が一致する。
該当しない語なら0件、すべてと空欄なら3件になる。

ここに注意。共有URLに個人名、連絡先、秘密のトークンを入れると、相手や履歴へ残ることがあります。公開してよい条件だけを使います。

ここに注意。作例内のローカルURLを他の人へ送っても、その人の端末からは開けません。公開後のURLを使ってください。

出典と確認した範囲

作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。

ローカルのHTTP環境で絞り込み、URL更新、再読み込み後の復元、390px幅を確認。サーバー検索、条件変更を一段ずつ戻す履歴、認証や秘密の共有は実装していません。

MDN：URLSearchParams。クエリの読み取り、設定、文字列化。

MDN：History replaceState。現在の履歴項目を置き換える操作。

記事一覧へ戻る →