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は次のようになります。

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}

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