SvelteKit 1.0発表
効率化されたWeb開発
2年間の開発を経て、SvelteKitがついに1.0に到達しました。本日より、あらゆる規模のSvelteアプリケーションを構築するための推奨方法となります。
このリリースを皆様と共有できることを大変嬉しく思います。これは、Svelteコアチームと広範なコミュニティからの数千時間に及ぶ作業の集大成であり、小規模プロジェクトに取り組むソロ開発者であっても、大規模チームの一員であっても、本番環境レベルのWebサイトを構築するための最も快適な方法だと考えています。
開始するには、`npm create svelte@latest`を実行し、ドキュメントと（実験的！）インタラクティブチュートリアルをご覧ください。
SvelteKitとは？
SvelteKitは、UIコンポーネントフレームワークであるSvelteの上に構築されたWebアプリケーションのためのフレームワークです。開発者がそのパフォーマンスと使いやすさから高く評価しているフレームワークです。
Svelteなどのコンポーネントフレームワークを使用されたことがある方は、DOMを直接操作するよりもユーザーインターフェースを構築するのがはるかに容易になることをご存知でしょう。しかし、それらは多くの未解決の問題を残しています。
- ソースコードをどのように構成すればよいですか？
- サーバーサイドレンダリングを追加するにはどうすればよいですか？
- サーバーとブラウザの両方で動作するルーティングを追加するにはどうすればよいですか？
- クライアントサイドルーティングをアクセシビリティに配慮して作成するにはどうすればよいですか？
- データをフェッチするにはどうすればよいですか？
- データを変更するにはどうすればよいですか？
- エラーを処理するにはどうすればよいですか？
- 本番環境ビルドを最適化するにはどうすればよいですか？
- 環境変数を適切かつ安全に処理するにはどうすればよいですか？
- CSPヘッダーとCSRF保護を追加するにはどうすればよいですか？
- キャッシュするものを認識するサービスワーカーを追加するにはどうすればよいですか？
- アプリケーションをデプロイの準備するにはどうすればよいですか？
アプリケーションフレームワークは、これらの質問に答えるように設計されています。SvelteKitは、多数のベータテスター（その多くはすでにSvelteKitを本番環境で運用しています — 皆様の勇気と貴重なフィードバックに感謝します）の現実世界のニーズと、Next.jsやRemixなどの他のアプリケーションフレームワークから得られた最良のアイデアに基づいた設計で、これらに答えます。
何が違うのですか？
今日のWeb開発者は、選択肢に恵まれています。前述のフレームワーク以外にも、Astroのような選択肢、RailsやLaravelのような実績のあるサーバーフレームワーク、そして無数の静的サイトジェネレーターがあります。これらはすべて素晴らしいツールであり、それらを選択しても問題ありません。
しかし、SvelteKitは少し異なります。
従来の「マルチページアプリ」またはMPAフレームワークとは異なり、最初のサーバーレンダリングされたページの読み込み後、クライアントサイドナビゲーションをデフォルトで使用します。これにより、ページ遷移の高速化、ページ間で持続する状態（サイドバーのスクロール位置など）、データ使用量の削減が可能になります。また、すべてのページ読み込みで分析などのサードパーティースクリプトを再実行する必要もなくなります。
従来のサーバーフレームワークとは異なり、事実上、密接に結合された2つのアプリ（HTMLを生成するアプリと、クライアントサイドのインタラクションを処理するアプリ）を持つ代わりに、1つの言語を使用できます。SvelteKitはJavaScriptが実行される場所であればどこでも実行されるため、従来のNodeサーバーとして、またはサーバーレス関数（エッジを含む）を使用してアプリをデプロイできます。
静的サイトジェネレーターとは異なり、ページ読み込み後にブラウザからフェッチすることによるパフォーマンス低下やレイアウトシフトの影響を受けることなく、パーソナライズされたデータまたは動的なデータを使用してアプリを構築できます。
SvelteKitを使用すると、柔軟性があります。多くのフレームワークは、アプリを構築する正しい方法が1つだけであると想定していますが、現実はより微妙です。たとえば、静的ページのプリレンダリングが単なる貧弱な人の`cache-control`であるというのは真実ではありません。それはまた、ビルド時の検証を実行したり、エッジ関数がアクセスできないファイルシステムからデータを描画したり、不安定なデータベースに対するヘッジとして機能したりすることもできます。すべてにサーバーサイドレンダリングが必要であるというのは真実ではありません。それは、優れたSEOを備えた堅牢で高性能なアプリが必要な場合の正しいデフォルトですが、無数の例外があります。
SvelteKitアプリでは、必要なだけの粒度でこれらの選択肢を選択できます。たとえば、見ているページはプリレンダリングされていますが、REPLは動的なデータでレンダリングされます。両者間の切り替えは、コード1行で行えます。このアプローチで構築されたアプリを「トランジショナルアプリ」と呼びます。
SvelteKitで何が使用できますか？
SvelteKitは超高速なビルドツールであるViteを使用しているため、ホットモジュールリロード、TypeScript、開発者が依存するその他多くの機能をすぐに利用できます。ViteとRollupの膨大なエコシステムからプラグインをインストールして、他のツールへのサポートを追加できます。
SvelteKitプロジェクトを作成する際に、TypeScript、ESLint、Prettier、Playwright（エンドツーエンドブラウザテスト用）、Vitest（単体テスト用）を追加するかどうかを尋ねられます。多くの一般的なプロジェクトに対する統合ガイドがすでに存在します。たとえば、TailwindやSupabaseなどです。StorybookとHistoireをコンポーネントストーリーに使用できます。コミュニティが維持するsvelte-addを使用すると、1つのコマンドで増え続ける他の統合を追加できます。
そしてもちろん、npmが提供するすべてのものにもアクセスできます。（一部のパッケージはNode.jsを必要とするため、Nodeベースのプラットフォームにデプロイした場合にのみ使用できます。）
アプリはどこにデプロイできますか？
どこでも！SvelteKit CLIにはローカルにNode.jsをインストールする必要がありますが、フレームワーク自体はどのプラットフォームにも依存しません。つまり、JavaScriptが実行される場所であればどこでもデプロイできます。
これはアダプターによって実現されています。デフォルトのアダプターであるadapter-autoは、Vercel、Netlify、Cloudflare Pages、Azure Static Web Appsに対するゼロコンフィグサポートを提供し、将来はさらに多くのプラットフォームが追加される予定です。コミュニティ提供のアダプターは、Deno、Bun、Firebase、App Engine、AWS Lambdaなど、その他多くのプラットフォームへのサポートを追加します。
adapter-nodeを使用して、アプリをNode.jsサーバーとしてデプロイすることもできます。
アプリ全体がプリレンダリングに適している場合、またはシングルページアプリ（SPA）である場合は、adapter-static（SvelteKitを静的サイトジェネレーターに変換します）をGitHub Pagesを含む任意のWebサーバーで使用できます。
謝辞
このリリースは、多くの人々の懸命な努力によって実現しました。まず第一に、洞察力のあるフィードバックと大小さまざまな貢献によって、このプロジェクトをWeb開発者のより広いコミュニティと共有できることを本当に誇りに思えるものにしてくれたSvelteコミュニティに感謝したいと思います。
Svelte Societyとコミュニティアンバサダーにも感謝しています。彼らはSvelte SummitやSvelte Sirensなどのイニシアチブを通じて、オンラインとオフラインの両方でSvelte開発者にとって活気があり歓迎的な空間を作り出してくれました。
SvelteKitに関するコースをリリースし、教育コンテンツを作成したコンテンツクリエイターは多すぎて、名前を挙げずに人を除外することはできませんが、皆様に感謝申し上げます。
2021年初頭にViteを採用したとき、私たちはそうした最初の主要なアプリケーションフレームワークでした。当時はリスクのある賭けでしたが、その賭けが報われたことに興奮しています。ViteはJavaScriptの世界で止められない勢力に成長しており、Viteチームは素晴らしい寛大なパートナーでした。
これらのプラットフォームでのゼロコンフィグデプロイメントを可能にするために、Vercel、Netlify、Cloudflareのチームから素晴らしいサポートを受けてきました。
StackBlitzの友人たちは、私たち初のWebContainer搭載インタラクティブチュートリアルであるlearn.svelte.devを実現するために熱心に作業してくれました。
最後に、これはプロジェクトの財政的支援者なしには実現しませんでした。Open Collectiveの何百人もの支援者、そしてSvelteの2人のコア開発者（RichとSimon）を雇用し、StephのBeginner SvelteKitコースなど、さまざまな方法でプロジェクトをサポートしているVercelが含まれます。
移行
SvelteKitのプレリリース版を使用して構築されたアプリがある場合は、1.0にアップグレードする前に、最終的なプレリリース版である`@sveltejs/kit@1.0.0-next.588`にアップグレードすることをお勧めします。安定版では、プレリリース版間での移行に使用されていたエラーと警告が削除されるためです。また、特に1.0.0-next-406より古いバージョンを使用している場合は、この移行ガイドを参照することをお勧めします。
今後の予定
SvelteKit 1.0は終わりではなく始まりです。現在、本番環境で使用できますが、これはまだ始まりに過ぎません。ロードマップには、組み込みのi18nサポート、増分静的再生、デプロイメントリージョンとランタイムのきめ細かい制御、画像最適化、およびその他の多くの改善が含まれています。来年はSvelte 4の開発も開始します。詳細は後日発表します。
しかし、私たちが最後の言葉を言うのはやめてください。Svelteはコミュニティプロジェクトであり、私たちの最良のアイデアの多くは実際には私たちのアイデアではありません。それは皆様のアイデアです。TwitterとYouTubeでSvelte Societyを購読して最新情報を入手し、DiscordサーバーとGitHubに参加して貢献してください。
皆様が構築するものが楽しみです。