Skip to main content

SvelteKit 1.0 発表

Web development, streamlined

The Svelte team

2年間の開発を経て、SvelteKit はついに 1.0 に到達しました。今日現在において、SvelteKit はあらゆる形・サイズの Svelte アプリを構築する場合に推奨されます。

このリリースを皆さんに共有できることがとても嬉しいです。Svelte コアチームと広いコミュニティによる何千時間もの作業の集大成であり、小さなプロジェクトに取り組む単独の開発者であれ、大きなチームの一員であれ、本番レベル(production-grade)の Web を構築するのに最も楽しい方法だと思います。

To get started, run npm create svelte@latest, and visit the docs and (experimental!) interactive tutorial.

Svelte Radio Live: the Christmas special

What is SvelteKit?

SvelteKit は web アプリケーションを開発するためのフレームワークで、そのパフォーマンスと使いやすさから 開発者から 最も 愛されている UI コンポーネントフレームワークである Svelte 上に構築されています。 Svelte のようなコンポーネントフレームワークを使ったことがあれば、DOM を直接操作するより、こういったフレームワークを使用したほうがユーザーインターフェースの構築がずっと簡単になることをご存知でしょう。しかし、多くの疑問が残っています:

  • ソースコードの構造はどうすればいいですか?
  • サーバーサイドレンダリングを追加するには?
  • サーバーでもブラウザでも動作するルーティングを追加するには?
  • クライアントサイドルーティングをアクセシブルにするには?
  • データを取得(fetch)はどうすればいいですか?
  • データを変更(mutate)するには?
  • エラーを処理するには?
  • プロダクション向けにビルドを最適化するには?
  • 環境変数を賢くセキュアに扱うには?
  • CSP ヘッダーと CSRF 保護を追加するには?
  • service worker を追加するには? 何をどうキャッシュさせられる?
  • アプリケーションをデプロイするにはどんな準備を?

アプリケーションフレームワークは、これらの質問に応えられるよう設計されています。SvelteKit は、大勢のベータテスター (その多くは SvelteKit をプロダクションで運用しています — その勇気に敬意を表するとともに、貴重なフィードバックに感謝しています) の現実世界のニーズと、Next.js や Remix を含む他のアプリケーションフレームワークから得たベストなアイデアを反映した設計になっています。

How is it different?

Web 開発者にとって、魅力的な選択肢が多いという現在の状況は贅沢な悩みでしょう。前述のフレームワーク以外にも、Astro や、Rails・Laravel といったプロダクションでの実績があるフレームワーク、そして数多くの静的サイトジェネレーターがあります。全て素晴らしいツールなので、選ぶのが楽しいはずです。

ただ、SvelteKit は一味違います:

従来の ‘マルチページアプリ’、MPA フレームワークと違い、 最初にサーバーレンダリングされたページをロードしたあとは、デフォルトでクライアントサイドナビゲーションになります。これにより、高速なページ遷移、ページ間での状態の永続化(例えばサイドバーのスクロールポジション)、より少ないデータ使用量などが可能となります。また、サードパーティースクリプト(例えば analytics)が各ページのロードのたびに再実行されることを防ぎます。

従来のサーバーフレームワークと違い、 単一の言語を使用することができます。密結合した2つのアプリ (1つは HTML の生成、1つはクライアントサイドインタラクションの処理) を持つことはありません。SvelteKit は JavaScript が動作する場所ならどこでも実行できるので、従来の Node サーバーとして、あるいはエッジを含むサーバーレス関数を使ってアプリをデプロイすることができます。

静的サイトジェネレーターと違い、 パーソナライズされたデータまたは動的なデータを使用するアプリを構築することができます。しかも、パフォーマンスを犠牲にすることもありませんし、ページロード後にブラウザからデータを取得することによって発生するレイアウトシフトもありません。

SvelteKit によって、柔軟性を得られます。多くのフレームワークでは、アプリを構築する正しい方法は1つであると仮定していますが、現実はもっと微妙です。例えば、静的ページのプリレンダリングは単なるお手軽な cache-control ではありません — ビルド時のバリデーションや、エッジ関数がアクセスできないファイルシステムからのデータのレンダリングを可能にし、不安定なデータベースに対するヘッジとして機能します。全てのページにサーバーサイドレンダリングが必要だ、というのも正しくありません — 堅牢でハイパフォーマンスアプリと、優れた SEO を実現したいのであれば、それは正しいデフォルトですが、数え切れないほどの例外があります。

SvelteKit アプリでは、これらの選択を必要なだけきめ細やかに行うことができます — 例えば、あなたが今見ているこのページはプリレンダリングされたものですが、REPL では動的なデータがレンダリングされています。この2つの挙動は、1行のコードで切り替えることができます。このようなアプローチで構築されたアプリを、私たちは ‘transitional apps’ と呼んでいます。

What can I use with SvelteKit?

SvelteKit は高速なビルドツールである Vite を使用しているので、ホットモジュールリロード(hot module reloading)、TypeScript、その他開発者が必要とするものをすぐに利用することができます。Vite と Rollup の広大なエコシステムからプラグインをインストールすることで、他のツールのサポートを追加することができます。

SvelteKit プロジェクトを作成するとき、TypeScript、ESLint、Prettier、Playwright (for end-to-end browser tests)、Vitest (for unit tests) を追加するか選択できます。例えば、Tailwind や Supabase など、多くのポピュラーなプロジェクトにはすでにインテグレーションガイドがあります。コンポーネントストーリー(component stories) には Storybook や Histoire を使用することができます。コミュニティがメンテナンスしている svelte-add を使用すれば、コマンド1つでどんどん増えているインテグレーションの数々を追加することができます。

もちろん、npm が提供するものすべてにアクセスできます。(一部のパッケージは Node.js が必要なため、それを使う場合はデプロイ先が Node ベースのプラットフォームに限定されることにご注意ください。)

Where can I deploy my apps?

どこでも! SvelteKit CLI にはローカルにインストールされた Node.js が必要ですが、フレームワーク自体にはどんなプラットフォームにも依存しません。つまり、JavaScript が動作する場所であれば、どこにでもデプロイすることができます。

This is made possible by adapters. The default adapter, adapter-auto, provides zero-config support for Vercel, Netlify, Cloudflare Pages and Azure Static Web Apps, with more platforms coming in the future. Community-provided adapters add support for Deno, Bun, Firebase, App Engine, AWS Lambda and many others.

adapter-node を使えばアプリを Node.js サーバーとしてデプロイすることもできます。

アプリ全体がプリレンダリングに適している場合や、シングルページアプリ (SPA) である場合、adapter-static (これによって SvelteKit は静的サイトジェネレーターになります) を GitHub Pages を含むあらゆる Web サーバー向けに使用することができます。

Acknowledgements

このリリースは、とても多くの人々のハードワークによって実現されました。何よりもまず最初に、洞察に満ちたフィードバックや大小様々な幾千ものコントリビュートをしてくれた Svelte コミュニティに感謝したいと思います。彼らのおかげで、私たちは誇りを持って、このプロジェクトを web 開発者の広いコミュニティに共有できるものにすることができました。

また、Svelte Society とコミュニティのアンバサダーにも感謝しています。Svelte Summit や Svelte Sirens でイニシアチブを取り、オンラインでもオフラインでも、Svelte 開発者のために活気に満ちた友好的なスペースを作り上げてくれました。

コンテンツクリエーターがとても多いので、漏れのないように名前を挙げることはできませんが、SvelteKit 周辺の講座をリリースしたり、教育コンテンツを制作してくださった皆様、ありがとうございました。

2021年の初頭、Vite を採用したとき、私たちは Vite を採用した初めてのメジャーなアプリケーションフレームワークでした。当時はリスキーな賭けでしたが、その賭けが報われたことに今は感動しています。Vite は JavaScript の世界で向かうところ敵なしの勢力に成長し、そして Vite チームは本当に素晴らしい、親切なパートナーです。

Vercel、Netlify、Cloudflare それぞれのチームから素晴らしいサポートを受け、これらのプラットフォームへのデプロイメントをゼロコンフィグにすることができました。

StackBlitz の友人たちは、私たちにとって初となる WebContainer を使用したインタラクティブなチュートリアルである learn.svelte.dev (日本語版: learn.svelte.jp) を実現するために熱心に取り組んでくれました。

最後に、このプロジェクトは資金支援者の方々がいなければ実現できなかったことをお伝えします。そこには、Open Collective の数百名の支援者の方々、二人のコア開発者 (Rich と Simon) を雇用し、フルタイムで Svelte に取り組ませてくれた Vercel、その他様々な方法 (例えば Steph の Beginner SvelteKit コースなど) でプロジェクトを支援してくれた方々も含まれます。

Migrating

SvelteKit のプレリリースバージョンで構築したアプリをお持ちの場合、1.0 にアップグレードする前に、プレリリースの最終バージョン — @sveltejs/kit@1.0.0-next.588 — にアップグレードすることをおすすめします。安定(stable)バージョンではプレリリースバージョン間の移行に使われていたエラーや警告が削除されているからです。特に、1.0.0-next-406 より古いバージョンを使用している場合は、このマイグレーションガイド を参照することをおすすめします。

What’s next?

SvelteKit 1.0 は始まりであり、終わりではありません。今日はプロダクションで使用する準備は整っていますが、まだ始まったばかりです。ロードマップには、ビルトインの i18n サポート、incremental static regeneration、デプロイメントリージョンとランタイムのきめ細やかなコントロール、イメージ最適化(image optimisation)、その他多くの改善があります。また、来年には Svelte 4 の取り組みを始める予定です — 詳細はまた今度。

But don’t let us have the final word. Svelte is a community project, and many of our best ideas aren’t really ours at all — they’re yours. Subscribe to Svelte Society on Twitter and YouTube to stay up to date, and join us in our Discord server and on GitHub to contribute back.

あなたが作ったものを見るのが待ちきれません。