絞り込んだ一覧を、そのまま人に送れなかった。条件はURLに書くものだった

キャンプ場の一覧に、都道府県で絞り込む機能を付けた。
選ぶとその県のものだけが残る。動きとしては、ちゃんと動いていた。

ある日、知り合いから「長野のあたり、まとめて見たいんだけど」と言われた。
僕は絞り込んだ画面のアドレスをコピーして送った。
返ってきたのは「全部出てくるよ」だった。

その一覧は、僕の画面の中にしかなかった

原因はすぐ分かった。
絞り込みをJavaScriptだけでやっていたからだ。

ボタンを押すと、条件に合わない行を隠して、合う行だけ残す。
見た目はきれいに絞り込まれる。
でもページそのものは、最初に読み込んだ全件の一覧のままだ。

アドレス欄を見ると、絞り込む前と一文字も変わっていなかった。
僕が送ったのは「一覧のURL」であって、「長野で絞り込んだ一覧のURL」ではない。
相手の画面に全件が出るのは、考えてみれば当たり前の結果だった。

困るのは、人に送るときだけではなかった

同じ理由でつまずく場面が、実はいくつもあった。

ひとつは、詳細を見てから戻るとき。
絞り込んだ状態から一件開いて、ブラウザの戻るを押すと、条件が消えて全件に戻る。
また選び直しだ。

ひとつは、再読み込み。
画面を更新した瞬間に条件が消える。

ひとつは、お気に入りへの登録。
よく見る条件を保存しておきたいのに、保存されるのは条件なしの一覧だった。

どれも別々の不具合だと思っていた。
でも原因はひとつで、いま何を選んでいるかという情報が、ページの中の変数にしか置かれていなかった。
変数は、画面を離れれば消える。人にも渡せない。

条件をURLに書くようにした

直し方そのものは難しくない。
選んだ条件を、アドレスの末尾に書く。
長野なら ?pref=20 のような形だ。

そして、その条件を受け取ったらサーバー側で絞り込んだ結果を返す。
画面で隠すのをやめて、最初から必要な行だけを持ったページを作る。

これでアドレスをコピーすれば、相手にも同じ画面が出る。
戻るボタンでも条件が残る。
再読み込みでも消えない。お気に入りにも入る。

ひとつ直しただけなのに、別々に見えていた困りごとが同時に消えた。
こういうときは、たいてい元の作りのほうが間違っている。

あとから効いてきたこと

やってみて、思っていなかったところにも効いた。

検索エンジンが、条件つきの一覧をひとつのページとして扱えるようになった。
隠しているだけの状態だと、外から見ればどのページも同じ中身に見える。
見えているものと、送られているものが違っていたわけだ。

アクセス解析でも、どの条件がよく見られているかが分かるようになった。
アドレスに書いてあるから、記録に残る。
どの県が人気なのかを、はじめて数字で知った。

絞り込みの入力欄については前にも書いた。
あのときは打つたびに重くなる話で、今回は打った結果をどこに置くかという話だ。
同じ小さな欄をめぐって、ずいぶん違うところでつまずいている。