Svelteの新しいリアクティブビルドインSvelteURLSearchParamsを使ってみよう

Svelte5では、`SvelteMap`、`SvelteSet`、`SvelteURL`などの、リアクティブな組み込みバージョンを付け加えました。今日はその中の一つSvelteURLSearchParamsを使ってみました。

- [REPLはこちら](https://shorturl.at/rArFq)

- [SvelteURLSearcParamsのコードはこちら](https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/reactivity/url-search-params.js)

アウトプットは全て`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
```

##  どこで使えますかねー

いくつか使えそうな模擬コードを書いてみましょう。

1. 商品をデーターベースから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}
```

他にもセレクトのフィルターやダッシュボードのコンフィグ、言語のセッティング、予約などなど使えそうなので使ってみて下さい。