Portfolio価格帯フィルターの課題
ECサイトの価格帯フィルターは、一見シンプルに見えて、いくつかの課題があります。
- 管理の難しさ: フィルターUIとAPI処理で、別々に価格帯を定義すると不整合が起きやすい
- 変更時の影響範囲: 価格帯を変更したいとき、複数の場所を修正する必要がある
- 後方互換性: URLを保存しているお客様がいる場合、URLの形式を変えると動かなくなる
解決策：一元管理（SSOT）
SSOT（Single Source of Truth）という考え方を採用しました。価格帯の定義を1つのファイルに集約し、すべての処理がそこを参照するようにしています。
価格帯の定義例
価格帯は、お客様の購買行動に合わせて設定しています。
| 価格帯ID | 範囲 | 表示ラベル |
|---|---|---|
| range_1 | 0〜25,000円 | 〜¥25,000 |
| range_2 | 25,001〜50,000円 | ¥25,001〜¥50,000 |
| range_3 | 50,001〜75,000円 | ¥50,001〜¥75,000 |
| range_4 | 75,001〜100,000円 | ¥75,001〜¥100,000 |
| range_5 | 100,001円〜 | ¥100,000〜 |
range_1
範囲0〜25,000円
表示ラベル〜¥25,000
range_2
範囲25,001〜50,000円
表示ラベル¥25,001〜¥50,000
range_3
範囲50,001〜75,000円
表示ラベル¥50,001〜¥75,000
range_4
範囲75,001〜100,000円
表示ラベル¥75,001〜¥100,000
range_5
範囲100,001円〜
表示ラベル¥100,000〜
一元管理のメリット
1. 変更が簡単
価格帯を変更したいとき、定義ファイル1つを修正するだけで済みます。フィルターUI、API処理、URLパラメータ解析など、すべてが自動的に新しい定義を使用します。
2. 不整合が起きない
定義が1箇所にしかないため、「UIでは選べるのにAPIでエラーになる」といった不整合が起きません。
3. 後方互換性の維持
古いURLフォーマット（例：0-25000）を新しいフォーマット（例：range_1）に自動変換する仕組みも、定義ファイルを参照して動作します。
処理の流れ
価格帯フィルターの処理
お客様が価格帯を選択
「〜¥25,000」をクリック
URLパラメータに反映
?priceRange=range_1
定義ファイルを参照
range_1 → min: 0, max: 25000
Shopify APIに価格条件を送信
price: { min: 0, max: 25000 }
該当商品のみ返却
フィルター完了
古いURL形式への対応
古いURL
?priceRange=0-25000
変換処理
定義ファイルを参照
新しい形式として処理
?priceRange=range_1
ユーティリティ関数
価格帯に関する処理を共通化し、どこからでも同じ方法で使えるようにしています。
- 価格帯IDから範囲を取得:
range_1→{ min: 0, max: 25000 } - 古い形式を変換:
0-25000→range_1 - 価格が範囲内か判定:
30000円はrange_2に含まれる
まとめ
価格帯の定義を一元管理することで、変更しやすく、不整合が起きにくいフィルター機能を実現しました。また、後方互換性を維持することで、お気に入りに保存されたURLも引き続き動作します。