Svelte Japanニュースレター : 2025年4月

皆さん、こんにちは！

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); // post.likes に基づく derived ステートメント

  async function onclick() {
    // すぐに `likes` カウントを増加させる...
    likes += 1;
    // サーバーに通知し、最終的に `post` を更新
    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をご確認ください。

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

学習リソース

日本語

• Snippetのexportで遊ぼう！
• Svelte v5 Runesによる$stateとstateと$effectの使い方
• Svelte5のbind:valueと$bindableルーンに隠された秘密の関係
• 【SvelteKit】結局、アセット(画像)はどこに配置するのか【「ローカルなアセット」というアイデア】
• 【SvelteKit】「ローカルなコンポーネント」というアイデア
• Svelte5でシンプルなモーダルコンポーネントを作る
• SvelteKitで<a>のプリロードの完了を待ちたい
• SvelteKitコンポーネント内でブラウザAPIを呼び出したい

英語

• 再描画がパフォーマンスに与える影響と、Svelte 5でそれを修正する方法
• ルーンとグローバルステート：やるべきこととやってはいけないこと
• SvelteとThrelteを使ってインタラクティブな3Dアプリを作る方法
• 再帰的Svelteコンポーネント
• FastAPIとSvelteを使ったリアルタイムダッシュボードの構築
• Svelte 5における非同期コンポーネントの短いガイド
• SvelteKit 5：ファイルベースのルーターではなく、コードベースのルーターを作る方法
• SvelteKitとtRPCの統合

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

• 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