Zenn
Svelte JapanPublicationへの投稿
📑

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

oekazuma
に公開
Svelte
SvelteKit
idea

皆さん、こんにちは！

Svelte Japanは、SvelteやSvelteKitの公式ドキュメントを日本語に翻訳し、Svelteに関するイベントを開催する、日本最大のSvelteコミュニティです。

今月もSvelteに関する最新情報や機能アップデート、コミュニティイベント、役立つリソースなどの情報が書かれたニュースレターをお届けします。

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

Svelte Summit Spring 2025

2025年5月8日、9日にバルセロナでSvelte Summitが開催されました。
発表の様子はSvelte SocietyのYouTubeで見ることができます。

https://www.youtube.com/playlist?list=PL8bMgX1kyZThKy_B41FQHk_xsHMQouV1Z

また、Svelte Japanコアメンバー達による現地リポートやセッションの感想が聞ける、UIT INSIDEのポッドキャストも是非、お聞きください。

https://uit-inside.linecorp.com/episode/173

Svelteの新機能

  • Asynchronous Svelteの進捗: Svelteのメンテナーたちは今月、Asynchronous Svelteの構築に尽力しましたが、それでも役立つ機能をいくつかリリースすることができました。asyncブランチを試してみたい方、あるいは開発の進捗状況を確認したい方は、feat: allow await in components #15844をチェックしてください。

  • ランタイムのパフォーマンスの向上: 実行時のパフォーマンスを向上させるために、特定の式が部分的に評価されるようになりました（svelte@5.27.0/5.28.0, #15494/#15781）。

  • Svelte CLIの機能追加: Svelte CLI（sv）に--install <package-manager>フラグが追加され、createやaddコマンド実行時に使用するパッケージマネージャを指定できるようになりました（cli@0.8.1, #531）。

  • アタッチメントの導入: 新しいアタッチメント API が、アクションのより柔軟で現代的なバージョンとして登場しました。アタッチメントのユースケースやアクションとの改善点については、PR#15000や公式ドキュメントを参照してください（5.29.0, language-tools 109.7.0）。

サンプルコード
<script lang='ts'>
 import type { Attachment } from 'svelte/attachments';
 import tippy from 'tippy.js';

 let content = $state('Hello!');

 function tooltip(content: string): Attachment<HTMLElement> {
   return (node) => {
     const tooltip = tippy(node, { content });
     return tooltip.destroy;
   };
  }
</script>

<input bind:value={content} />
<button {@attach tooltip(content)}>
 Hover me
</button>
  • アクションをアタッチメントに変換: お気に入りのアクションをアタッチメントに変換したい場合は、fromActionユーティリティを利用できます（5.32.0, PR#15933）。
サンプルコード
<script>
 import Button from "./Button.svelte";
 import { log } from "log-my-number";
 import { fromAction } from "svelte/attachments";

 let count = $state(0);
</script>
<Button
 onclick={() => count++}
 {@attach fromAction(log, () => count)}
>
 {count}
</Button>
  • ジェネリクスをサポート: スニペットにジェネリクスのサポートが追加され、型の推論や型ヒントが向上しました（5.30.0, language-tools 109.8.0, PR#15915）。
サンプルコード
{#snippet list<TItem>(list: TItem[], show: (item: TItem)=>boolean)}
 {#each list as item}
   {#if show(item)}
     {item}
   {/if}
  {/each}
{/snippet}

  • 保存時のインポート追加機能: Svelte拡張に、新しく、保存時に不足しているインポートを自動的に追加する機能が追加されました（language-tools 109.6.0, PR#2744）。

  • クラスコンストラクタ内の状態フィールド: 状態フィールドがクラスのコンストラクタ内で宣言可能になりました（5.31.0, PR#15820）。

  • XHTML準拠: SvelteはXHTML準拠となり、新しいオプションfragments: 'html' | 'tree'が追加され、CSPの遵守範囲が広がりました（5.33.0, PR#15538）。

SvelteKitの新機能

  • CloudFlareアダプターの統合: 2つのCloudFlareアダプターが1つに統合され、adapter-cloudflareとなりました（adapter-cloudflare@7.0.0, #13634）。

  • adapter-vercelの改善: adapter-vercelが各ルートのシンボリックリンク関数を作成するようになり、監視性が向上しました（adapter-vercel@5.7.0, #13679）。

  • HandleServerErrorフックの改善: HandleServerErrorフックへのgetRequestEventアクセスの改善が含まれています（#13666）。

  • クライアントサイドコードの実行が可能に: SSRが無効なユニバーサルページ/レイアウトのトップレベルでクライアントサイドのコードが実行可能になりました（kit 2.21.0, PR#13684）。

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

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

Svelteで作られたアプリ & サイト

  • TableSlayer: 屋内RPGゲーム用のデジタルディスプレイを管理するオープンソースソフトウェア（Redditでのデモ動画をチェック！）
  • Iconia: 自然言語を理解し、有名なアイコンライブラリから関連するアイコンを返す無料ツール
  • CMSDocs: Google DocsをブログCMSに変換
  • Svelte Changelog v2: Svelteエコシステムの新しい変更を追跡するための再構築された方法
  • Hookah UI: Hookahプロジェクト用の視覚的構成ビルダー
  • mockiapi: エンドポイントを定義し、カスタムJSONレスポンスを返し、実際のAPIの動作をシミュレートできるモックAPIサーバー
  • soarSQL: Postgres、MySQL、およびCSV上で分析処理を行うためのSQLエディタ - duckDBを使用
  • Persona Simulator: 異なるペルソナとチャットすることでコミュニケーションスキルを練習
  • Typo: コードブロック内のフォーマットとTypeScript実行を含むウェブベースのMarkdownエディタ
  • FernOS: ブラウザ内で動作する軽量オペレーティングシステム
  • Whimsy: インタラクティブなストーリーを作るための小さなゲームエンジン
  • DASHBOT: 2人用の1v1スペースロボットスプリントバトルゲーム（ローカルおよびオンラインモード）
  • Kraa: ちょっと違ったウェブベースのMarkdownエディタ
  • Shovel AI: 大量のテキストデータとAIモデルをやり取りするためのバッチツール
  • md.uy: 協力的でローカルファースト、P2PのMarkdownエディタ
  • BringYourAI: AIチャットウェブサイトで即座にコードベースのコンテキストを提供するブラウザ拡張
  • Joe Malatesta: 自身のフィルム写真をデジタル環境で表現する方法を見つけた
  • Notion Avatar: Svelte 5 Runesを用いたNotionスタイルのアバターエディタ
  • ORBITS: 知人や出会った人のためのセカンドブレイン

学習リソース

日本語

英語

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

  • diaper: Svelte 5のための進化したボトムシートコンポーネント
  • mcp-svelte-docs: Svelteの文書を検索してアクセスできるMCPサーバー
  • Anime.jsのバージョン4: 人気のあるJSアニメーションライブラリがリリース
  • DeepWikiはSvelteフレームワークに関する包括的な紹介を作成
  • Vite Static Assets Plugin: 静的アセットディレクトリを自動スキャンし、すべてのアセットパスを型安全なTypeScriptモジュールとして生成するViteプラグイン
  • Mode Watcher v1: シンプルなライト/ダークモード管理を提供し、Svelte 5に対応した新しいバージョン
  • Bits UI v2がリリース - アタッチメント、$props.id()、Shadow DOMなどのサポートを含む。
  • Composablyは、ViteとSvelteKit向けのコンテンツ処理プラグインで、型付きコンテンツと動的なSvelteコンポーネントをビルド時に提供します。
  • Svelte Flowが1.0になりました - Svelte 5のサポート、TSDoc、インタラクティブなフローチャートをさらに良くするための多数の新機能。
  • fox uiは、Tailwind 4とSvelte 5を用いたUIコンポーネントのコレクションで、リッチテキストエディタが新たに追加されています。
  • fluid-dndは、Vue、React、Svelte用のドラッグ＆ドロップライブラリです。
  • sveltekit-password-protectは、ウェブサイトに保護のレイヤーを追加するシンプルなユーティリティです。
  • sveltekit-image-optimizeは、画像を最適化するためのエンドポイントを作成するシンプルなユーティリティです。
  • svelte-inspect-value@0.7.0がパネルを導入 - デバッグUIをウェブサイトのフローから分離する固定位置のリサイズ可能なパネル / ドロワー。
  • nuqs-svelteは、nuqsライブラリの非公式Svelteポートで、型安全な検索パラメータの状態管理を提供します。
  • sv-routerは、ファイルベースまたはコードベースのルーティングを持つ型安全なSPAルーターです。
  • svelte-textcircleは、テキストを円形レイアウトで表示し、カスタマイズ可能なアニメーションとスタイリングを提供します。

付録

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

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

Svelte Japanグッズ

https://suzuri.jp/SvelteJapan

さいごに

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

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

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

参考

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

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

Svelte Japan
Svelte JapanPublication

SvelteやSvelteKitの公式ドキュメントを日本語翻訳したり、Svelteに関するイベントを開催したりしている日本最大のSvelteコミュニティです。

Discussion