これは、Wano Group Advent Calendar 2024 の13日目の記事です。
12日目は、@rom1000_onigiriさんの、企業の成長フェーズと並走するUIライブラリとの付き合い方です。
概要
弊社では、カラオケやミュージックビデオの配信ができるサービスVideo Kicksを開発・運営しています。
今回は、1画面で複数の検索を別々に走らせることと、検索条件をヒストリーとして保持してブラウザバック時に検索条件を維持・復元するために頑張った話をします。
環境
"vue": "^3.2.31"
"vue-router": "^4.0.3"
どんな画面？
Video Kicksでは、MVやカラオケ配信のために「リリース」というものを作成します。
マイページ上で今までに作成したリリースを検索することが出来ます。
詳細は後述しますが、この画面には検索ブロックが3つ存在し、それぞれが必要に応じて別々に検索APIを叩きます。
必要要件
今回の開発では、以下の要件を実現する必要がありました。
- ブラウザバック・フォワード時に、以前入力した検索条件を維持する
- リリース一覧は、条件によって3つのブロック「更新可能リリース」「作成中」「リリース一覧」に分かれている
- ブロックごとに個別の検索条件を持つ
- キーワード検索のみ、3つ全てのブロックで絞り込みを実行する
実装方針
検索APIとの通信を最小限に抑えるため、検索条件を変更されたブロックのみ検索を走らせたいところです。
そこで以下のような方針で実装を進めました。
- クエリパラメータを付与し、それをvue-routerのヒストリーとして保存する
/page/karaoke/release/list?key=テスト&status=20&renewPage=1&editingPage=17&releasePage=2&is_store_addition=false - クエリパラメータをvue側で監視し、条件に変更があったブロックのみ検索APIを叩く
各パラメータがどのブロックに影響するかは次の通りです。
全体
- key・・・キーワード検索
更新可能リリース
- renewPage・・・ページ番号
作成中
- editingPage・・・ページ番号
リリース一覧
- releasePage・・・ページ番号
- status・・・リリースのステータスID
- is_store_addition・・・リリースの配信先が追加できるかどうか
以下に実装例を示します。ここでは説明に不要な部分は省略しています。
親コンポーネント
List.vue
<template>
<div class="label">キーワード検索</div>
<div class="search-field">
<div class="search-field__input">
<vk-input
@input="(v: string)=> (inputKeyword = v)"
:value="inputKeyword"
:placeholder="'キーワード検索'"
style="width: 100%"
></vk-input>
</div>
<div class="search-field__btn">
<vk-btn class="btn" @click="onClickSearchButton">検索</vk-btn>
</div>
</div>
<spacer class="p-20" />
<list-card
:title="'更新可能リリース'"
:keyword="searchKeyword"
:page="renewPage"
:limit="limit"
:isShowSearchParams="false"
:defaultKaraokeStatus="UIKaraokeStatus.CanRenewal"
:storeAdditionOnly="false"
@changePage="newPage => onChangePagination(newPage, 'renew')"
@onError="store.error"
/>
<spacer class="p-20" />
<list-card
:title="'作成中'"
:keyword="searchKeyword"
:page="editingPage"
:limit="limit"
:isShowSearchParams="false"
:defaultKaraokeStatus="UIKaraokeStatus.Editing"
:storeAdditionOnly="false"
@changePage="newPage => onChangePagination(newPage, 'editing')"
@onError="store.error"
/>
<spacer class="p-20" />
<list-card
:title="'リリース一覧'"
:keyword="searchKeyword"
:page="releasePage"
:limit="limit"
:isShowSearchParams="true"
:selectedKaraokeStatus="selectedKaraokeStatus"
:defaultKaraokeStatus="UIKaraokeStatus.All"
:storeAdditionOnly="storeAdditionOnly"
@changePage="newPage => onChangePagination(newPage, 'release')"
@changeAdditionOnly="newBool => onChangeAdditionOnly(newBool)"
@changeStatus="onChangeKaraokeStatus"
@onError="store.error"
/>
</template>
<script setup lang="ts">
// 明示的に「検索」を押されたときは、各セクション用のページを1に戻す
function onClickSearchButton() {
searchKeyword.value = inputKeyword.value;
renewPage.value = 1;
editingPage.value = 1;
releasePage.value = 1;
addQueryParamsToUrl();
}
// ページの変更時に呼ばれる
function onChangePagination(
page: number,
type: "renew" | "editing" | "release"
) {
if (type == "renew") renewPage.value = page;
if (type == "editing") editingPage.value = page;
if (type == "release") releasePage.value = page;
addQueryParamsToUrl();
}
// リリース一覧 セクションの「ストア追加可能」の変更時に呼ばれる
function onChangeAdditionOnly(bool: boolean) {
storeAdditionOnly.value = bool;
addQueryParamsToUrl();
}
// リリース一覧 セクションの「配信ステータス」の変更時に呼ばれる
function onChangeKaraokeStatus(status: UIKaraokeStatus) {
selectedKaraokeStatus.value = status;
addQueryParamsToUrl();
}
// URLに検索キーワードを追加。検索状況をブラウザ履歴として保持するために使用
function addQueryParamsToUrl() {
const url = `${KARAOKE_LIST_PATH}?key=${inputKeyword.value}&status=${selectedKaraokeStatus.value}&renewPage=${renewPage.value}&editingPage=${editingPage.value}&releasePage=${releasePage.value}&is_store_addition=${storeAdditionOnly.value}`;
router.push(url);
}
// URLのクエリパラメータを取得して、検索フォームの各変数に反映
const setQueryParams = () => {
const query = route.query;
inputKeyword.value = (route.query.key as string) || ""; // 初期はURLパラメータからの復元文字がつかわれる
searchKeyword.value = (route.query.key as string) || "";
//selectedKaraokeStatusName.value = (route.query.status as string) || "全て";
selectedKaraokeStatus.value =
(Number(route.query.status) as UIKaraokeStatus) || UIKaraokeStatus.All;
renewPage.value = Number(query.renewPage) || 1;
editingPage.value = Number(query.editingPage) || 1;
releasePage.value = Number(query.releasePage) || 1;
storeAdditionOnly.value = Boolean(query.is_store_addition == "true");
};
// URLのクエリパラメータを監視して、変更があればsetQueryParamsを実行
watch(
() => router.currentRoute.value.query,
() => setQueryParams()
);
</script>
子コンポーネント
ListCard.vue
<script setup lang="ts">
const props = defineProps<{
title: string;
page: number;
limit: number;
keyword: string;
defaultKaraokeStatus: UIKaraokeStatus; // 初期のステータス絞り込み
isShowSearchParams: boolean; // 配信ステータス・ストア追加可能のフォームを表示するか
selectedKaraokeStatus?: UIKaraokeStatus;
storeAdditionOnly?: boolean; // ストア追加可能のみ表示するか
}>();
// キーワード検索と、ブラウザバック時の再検索用
watch(
[
() => props.keyword,
() => props.page,
() => props.selectedKaraokeStatus,
() => props.storeAdditionOnly
],
(
[newKey, newPage, newStatus, newStoreAdditionOnly],
[oldKey, oldPage, oldStatus, oldStoreAdditionOnly]
) => {
if (newKey != oldKey) {
page.value = props.page;
fetchKaraokes(page.value);
return;
}
if (newStatus != oldStatus) {
if (props.selectedKaraokeStatus) {
page.value = props.page;
fetchKaraokes(page.value);
}
return;
}
if (newPage != oldPage) {
page.value = newPage;
fetchKaraokes(newPage);
return;
}
if (newStoreAdditionOnly != oldStoreAdditionOnly) {
page.value = props.page;
isAddOnly.value = props.storeAdditionOnly || false;
fetchKaraokes(page.value);
return;
}
}
);
</script>
処理の流れは次の通りです。
少し複雑になってしまいましたね、よりよい実装方法があればコメントいただけるとありがたいです...
キーワード検索は全てのブロック（ListCard.vue）にかかるため、親コンポーネント（List.vue）に配置してpropsで子に渡しています。
ページ数やステータスは、それぞれブロックごとに個別の値を持つため、子コンポーネント側で変更したものをemitで親に渡しています。
人材募集
弊社グループでは一緒に働くメンバーを募集中です、ご応募お待ちしています！