インモビインモビ

皆さん、こんにちは！

Svelte Japanは、SvelteやSvelteKitの公式ドキュメントを日本語に翻訳し、Svelteに関するイベントを開催する、日本最大のSvelteコミュニティです。これから新たに、Svelteに関する最新情報や機能アップデート、コミュニティイベント、役立つリソースなどを定期的にお届けするニュースレターを始めます。

このニュースレターを通じて、皆さんがSvelteを使った開発をより楽しく、そして効率的に行えるようサポートしていきます！

それではさっそく、今月のトピックスを見ていきましょう！

Svelteの新機能

• 新しいidPrefixオプション: renderに新たに追加されたこのオプションにより、クライアントサイドのID生成がより信頼性の高いものになりました。これは、ページ上に複数のSvelteランタイムが存在する場合でも安心してID生成が行えるようにするものです (5.22.0, ドキュメント, PR#15428)。

• Derivedステートメントの書き換えが可能に: 今回のアップデートでは、Derivedステートメントが書き換え可能になりました。これにより、状態管理がより柔軟に行えるようになり、開発者はより快適に作業できるようになります。
  (5.25.0/5.25.2, ドキュメント, PR#15570 及び PR#15581)。

script>
  let { post, like } = $props();
  let likes = $derived(post.likes); 

  async function onclick() {
    
    likes += 1;
    
    try {
      await like();
    } catch {
      
      likes -= 1;
    }
  }
script>

button {onclick}>🧡 {likes}button>

• Svelte CLIの改善: Svelte CLIもアップグレードされ、コード生成のフォーマットが改善されました。これにより、より直感的な操作が可能となり、初心者でも扱いやすくなりました (0.7.0, PR#380)。

• eslint-plugin-svelte v3のリリース: この最新のアップデートは、Svelte 5に対するサポートを改善しています。
  追加されたルールのsvelte/no-unused-propsはPropsで定義されているが、コンポーネントコードでは使用されていないプロパティを教えてくれるので便利です。
  その他の詳細はCHANGELOGをご覧ください。

• また、今月の初めには言語ツールへの多くの修正も行われているので、プラグインは最新の状態に保つことをお勧めします！

• Tailwind CSSがSvelte Playgroundに組み込まれました！
  

SvelteKitの新機能

• 非同期rerouteの導入: rerouteが非同期で呼び出せるようになり、クッキーやリクエストコンテキストを渡す際の利便性が向上しました。これにより、より柔軟なリクエスト処理が可能となります (2.18.0/2.19.0, ドキュメント, PR#13520 及び プルリクエスト#13549)。

• 新しいnormalizeUrlヘルパー: この機能が追加されたことで、生のURLを正規化する手段が提供され、SvelteKit内部のデータを扱いやすくなります (2.18.0, ドキュメント, PR#13539)。

• getRequestEvent 機能の追加: $app/serverに新しい関数が追加され、現在のRequestEventを取得できるようになりました。これにより、リクエストの処理がよりスムーズになります (2.20.0, ドキュメント, PR#13582)。

• cloudflare-adapterのアップデート: 最新のアップデートにより、Wrangler 4のサポートが追加され、改善された_headersおよび_redirectsファイル、Cloudflare Workers Static Assets向けの特別なビルドサポートが提供されるようになりました (5.1.0-7.0.0, CHANGELOG)。

Svelte、SvelteKit、およびそのアダプターに関するバグ修正の完全なリストは、こちらとこちらのCHANGELOGをご確認ください。

コミュニティショーケース

学習リソース

日本語

英語

ライブラリ、ツール、コンポーネント

• Vercel AI SDKがSvelte5をサポートしました。
• Flags SDK 3.2ではSvelteKitで precomputed feature flagsのサポートが追加され、マーケティングページでの実験がより簡単になり、高速性を保ちながらレイアウトシフトを回避できるようになりました。
• BunはフロントエンドフレームワークとしてのSvelteの公式サポートを追加しました
• Skeleton v3.0が利用可能になりました – Svelte 5サポート、Tailwind 4、よりモジュラーな構造が含まれています
• SaapsUIは、レスポンシブ、アクセシブル、かつ美しいユーザーインターフェースを最小限の労力で作成するための包括的なSvelteコンポーネントライブラリです
• SVAR Svelte v2.1が新しいUIコンポーネントを追加しました – DataGridやガントチャートを含みます
• cnblocksは、Svelte 5、Tailwind CSS v4、およびShadcn Svelteを使用した50以上のUI & マーケティングブロックを提供します
• Paraglide: Svelteアプリで複数の言語をサポートするためのi18nライブラリの2.0バージョンがリリースされました
• Sveltepressは、Sveltekitを基にしたコンテンツ中心のサイトビルドツールです
• Konva.jsは、Svelteアプリ用の宣言的な2Dキャンバスです
• Svelte Inspect Valueは、「JSONツリー」のような値インスペクターです
• Svelte 5 Snippetsは、開発を加速し、VS Codeにおける一貫したコーディングプラクティスを確保するための再利用可能なコードテンプレートを提供します
• Svelte KawaiiはReact KawaiiのSvelte移植版で、Svelteアプリケーションにかわいいキャラクターを追加するためのかわいいSVGイラストを提供します。

付録

Svelte/SvelteKitを採用している日本企業まとめ

https://github.com/svelte-jp/japanese-svelte-companies

Svelte Japanグッズ

https://suzuri.jp/SvelteJapan

来月開催のオンラインイベント

https://svelte-jp.connpass.com/event/347949/

さいごに

今月のSvelte Japanニュースレターはいかがでしたでしょうか？

もしご意見や質問があれば、ぜひXやDiscordでお知らせください。
次回のニュースレターもお楽しみに！

またお会いしましょう！👋🏼

参考

https://svelte.dev/blog/whats-new-in-svelte-april-2025

I’ve been a bit sucked into the game Balatro lately. Seriously. Tell me your strategies. I enjoy playing it equally as much lately as unwinding watching streamers play it on YouTube. Balatro has a handful of accessibility features. Stuff like slowing down or turning off animations and the like. I’m particularly interested one of the checkboxes below though:

“High Contrast Cards” is one of the options. It’s a nice option to have, but I find it particularly notable because of it’s popularity. You know those streamers I mentioned? The all seem to have this option turned on. Interesting how an “accessibility feature” actually seems to make the game better for everybody. As in, maybe the default should be reversed or just not there at all, with the high contrast version being just how it is.

It reminds me about how half of Americans, particularly the younger generation, prefer having closed captioning on TV some or all of the time. An accessibility feature that they just prefer.

Interestingly, the high contrast mode in Balatro mostly focuses on changing colors.

If you don’t suffer from any sort of colorblindness (like me? I think?) you’ll notice the clubs above are blue, which differentiates them from the spades which remain black. The hearts and clubs are slightly differentiated with the diamonds being a bit more orange than red.

Is that enough? It’s enough for many players preferring it, likely preventing accidentally playing a flush hand with the wrong suits, for example. But I can’t vouch for if it works for people with actual low vision or a type of color blindness, which is what I’d assume would be the main point of the feature. Andy Baio wrote a memorable post about colorblindness a few years ago called Chasing rainbows. There are some great examples in that post that highlight the particular type of colorblindness Andy has. Sometimes super different colors look a lot closer together than you’d expect, but still fairly distinct. Where sometimes two colors that are a bit different actually appear identical to Andy.

So maybe the Balatro colors are enough (lemme know!) or maybe they are not. I assume that’s why a lot of “high contrast” variations do more than color, they incorporate different patterns and whatnot. Which, fair enough, the playing cards of Balatro already do.

Let’s do a few more fun CSS and color related links to round out the week:

• Adam Argyle: A conic gradient diamond and okLCH — I’m always a little surprised at the trickery that conic gradients unlock. Whenever I think of them I’m like uhmmmmm color pickers and spinners I guess?
• Michelle Barker: Messing About with CSS Gradients — Layered gradients unlocking some interested effects and yet more trickery.
• Michelle Barker: Creating color palettes with the CSS color-mix() function — Sure, color-mix() is nice for a one-off where you’re trying to ensure contrast or build the perfect combo from an unknown other color, but it can also be the foundational tool for a system of colors.
• Keith Grant: Theme Machine — A nice take on going from choosing nice individual colors to crafting palettes, seeing them in action, and getting custom property output for CSS.