Svelte5では、SvelteMap、SvelteSet、SvelteURLなどの、リアクティブな組み込みバージョンを付け加えました。今日はその中の一つSvelteURLSearchParamsを使ってみました。
アウトプットは全てconsole.logを使っています。
まずはインポートしてイニシャライゼーションを
<script>
import { SvelteURLSearchParams } from 'svelte/reactivity';
const params = new SvelteURLSearchParams();
</script>
append()とtoString()を使ってみる
params.append('category', 'books');
params.append('sort', 'price');
console.log('ex 1', params.toString());
outputは次のようになります。
"category=books&sort=price"
次はsortのvalueをオーバーライトします。
params.set('sort', 'rating');
console.log('ex 2',params.toString());
outputは次のようになります。
"category=books&sort=rating"
get()とgetAll()を使ってみる
console.log('ex 3',params.get('category'));
console.log('ex 4',params.getAll('category'));
outputは次のようになります。
"books"
["books"]
has()を使ってみる
console.log('ex 5',params.has('category'));
outputは次のようになります。
true
パラメーターをデリートするのにdelete()を使ってみる
params.delete('sort');
console.log('ex 6',params.toString());
outputは次のようになります。
"category=books"
同じキーに複数の値を追加する
params.append('tag', 'fiction');
params.append('tag', 'science');
console.log('ex 7',params.getAll('tag'));
outputは次のようになります。
["fiction", "science"]
sort()を使ってみる
params.append('z', 'last');
params.append('a', 'first');
params.sort();
console.log('ex 8',params.toString());
outputは次のようになります。
a=first&category=books&tag=fiction&tag=science&z=last
size()を使ってみる
const params2 = new SvelteURLSearchParams();
params2.append('color', 'red');
params2.append('color', 'blue');
params2.append('size', 'large');
params2.append('category', 'electronics');
console.log(params2.size);
outputは次のようになります。
4
entries()を使ってみる
console.log('Entries:');
for (const [key, value] of params2.entries()) {
console.log(`${key}: ${value}`);
}
outputは次のようになります。
Entries:
color: red
color: blue
size: large
category: electronics
keys()を使ってみる
console.log('Keys:');
for (const key of params2.keys()) {
console.log(key);
}
outputは次のようになります。
Keys:
color
color
size
category
values()を使ってみる
console.log('Values:');
for (const value of params2.values()) {
console.log(value);
}
outputは次のようになります。
Values:
red
blue
large
electronics
Symbol.iteratorを使ってみる
結果はentries()と同じです。
console.log('Symbol.iterator:');
for (const [key, value] of params2) {
console.log(`${key}: ${value}`);
}
outputは次のようになります。
Symbol.iterator:
color: red
color: blue
size: large
category: electronics
どこで使えますかねー
いくつか使えそうな模擬コードを書いてみましょう。
- 商品をデーターベースからfetchする際に使えそう
<script>
import { SvelteURLSearchParams } from 'svelte/reactivity';
import { fetchProducts } from 'your-lib';
const productParams = new SvelteURLSearchParams();
function applyFilters() {
productParams.set('category', 'electronics');
productParams.append('brand', 'samsung');
productParams.append('brand', 'apple');
productParams.set('price_min', '100');
productParams.set('price_max', '1000');
}
$effect(()=>{
filteredProducts = fetchProducts(productParams);
}
</script>
{filteredProducts}
// 商品のフォーム
2. パジネーションで使えそう
<script>
import { SvelteURLSearchParams } from 'svelte/reactivity';
const pageParams = new SvelteURLSearchParams();
function changePage(pageNumber) {
pageParams.set('page', pageNumber.toString());
pageParams.set('limit', '20');
}
$effect(()=>{
currentPage = parseInt(pageParams.get('page') || '1');
}
</script>
{currentPage}
3 テーブルのサーチやソートに使えそう
<script>
import { SvelteURLSearchParams } from 'svelte/reactivity';
const tableParams = new SvelteURLSearchParams();
function updateTableState() {
tableParams.set('search', searchQuery);
tableParams.set('sort', 'name');
tableParams.set('order', 'asc');
}
$effect(()=>{
tableData = fetchTableData(tableParams);
}
</script>
{tableData}
他にもセレクトのフィルターやダッシュボードのコンフィグ、言語のセッティング、予約などなど使えそうなので使ってみて下さい。