説明
ブログページにてスキルとカテゴリの2つを絞り込み検索を行うUIのサンプルです。
使用技術
- Vue 3
- Tailwind CSS
デモ
デフォルト表示 (V1)
現在の状態 (Reactive State)
version:v1|
categories:[
{
"label": "すべて"
},
{
"label": "Frontend",
"value": "frontend"
},
{
"label": "Backend",
"value": "backend"
}
]|
skillOptions:[
"Vue",
"TypeScript",
"Astro"
]|
設計意図
ブログ記事のカテゴリと関連スキルを効率的に絞り込むためのUIです。階層構造を持つデータを視覚的に分かりやすく選択できるように設計しています。
課題点・今後の展望
- カテゴリ選択時に対応するスキルがない場合のUIフィードバックが不足している
- モバイル環境でのボタンの折り返しによる縦幅の増加
- カテゴリが大分類に対応している場合、スキルの選択肢が多くなりすぎてしまう
- カテゴリの選択が1つに対し、スキルの選択を複数できるようにすべき
試作版 (V2): スキル複数選択対応
現在の状態 (Reactive State)
version:v2|
categories:[
{
"label": "すべて"
},
{
"label": "Frontend",
"value": "frontend"
},
{
"label": "Backend",
"value": "backend"
}
]|
skillOptions:[
"Vue",
"TypeScript",
"Astro",
"Node.js",
"PostgreSQL"
]|
skills:[]|
設計意図
現在の BlogFilter が抱える「スキルの複数選択ができない」という課題を解決するためのプロトタイプです。
課題点・今後の展望
- 複数選択時のクエリパラメータの設計が未定
- 選択数が増えた際のUIの圧迫
スキルAPI連携版 (V3) 反映中
現在の状態 (Reactive State)
version:v3|
skills:[]|
skillOptions:[
{
"name": "Vue",
"article_count": 12
},
{
"name": "TypeScript",
"article_count": 8
},
{
"name": "Astro",
"article_count": 5
},
{
"name": "Node.js",
"article_count": 3
},
{
"name": "PostgreSQL",
"article_count": 2
}
]|
設計意図
「ブログ記事スキル一覧取得API」と連携し、実際の記事数に基づいたスキル一覧を表示するバージョンです。V2のボタンレイアウトを継承しつつ、カテゴリ絞り込みを廃止しました。
課題点・今後の展望
- API通信中のスケルトン表示のブラッシュアップ
- APIエラー時のリトライ処理の検討