Svelte5でn回ループしたいときの書き方が改善されたぞ！

はじめに

Svelte 5.4.0では、{#each}構文を使ってn回ループさせる方法が改善されました！
本記事では、今までの書き方と比較しながらどのように変わったのかを説明します。

今までの書き方

Svelte 5.4.0以前では、次のような書き方をする必要がありました。

書き方1

{#each Array(10) as _, i}
  <p>{i}</p>
{/each}

書き方2

{#each { length: 10 } as _, i}
  <p>{i}</p>
{/each}

この方法では少し癖があり、冗長な書き方に感じるかもしれません。また、_を定義しているのに使用していないため、Lintで警告が出ることもあり、面倒です。

改善された書き方

新しい書き方では、asを使う必要がなくなり、よりシンプルになりました。_のような無駄な変数を定義する必要がないので、Lintの警告も発生しません。

{#each { length: 10 }, i}
  <p>{i}</p>
{/each}

デモ

ドキュメント

さいごに

以前私は、Svelteでn回ループ表示させたい時の書き方を考えるという記事を書き、どのような書き方がベストなのかを考えました。今回の構文改善によって、理想的な書き方ができるようになり嬉しいです！

Svelteは、「Advent of Svelte」と題してクリスマスまで毎日SvelteやSvelteKitの新機能やドキュメントサイトの改善をリリースするというおもしろい企画を実施中です。これからも注目していきたいですね！

Day 2 — `each` without `as`, for when you just want lots of one thing

- docs https://t.co/hUwTXtqI0t
- demo https://t.co/Xl3Y0z5SX4 pic.twitter.com/2u8qhuDStd

— Svelte (@sveltejs) December 2, 2024