SvelteKit 1.0が発表されました。
https://svelte.dev/blog/announcing-sveltekit-1.0
この記事は↑のSvelteKit 1.0の発表を日本語訳したものになります。表現におかしい点があればぜひ編集リクエストお待ちしております。
ちょうどSvelteKit Advent Calendar 2022の16日が空いていたのでアドベント・カレンダーの記事として公開します。
Announcing SvelteKit 1.0
2年間の開発期間を経て、SvelteKitはついに1.0に到達しました。今日からは、あらゆる規模のSvelteアプリを構築につかってください！
このリリースを皆様と共有できることを大変嬉しく思います。Svelteのコアチームとコミュニティによる何千時間もの作業の集大成であり、小さなプロジェクトに取り組む個人開発者であっても、大規模な開発チームの一員であっても、プロダクションレベルのウェブサイトを構築する最も楽しい方法がSvelteKitです。
Get Started
npm create svelte@latest
ここからSvelteKitへの第一歩が始まります
ドキュメント
チュートリアル
SvelteKit Radio Live: the Christmas special
What is SvelteKit?
SvelteKitは、パフォーマンスと使いやすさで開発者に愛されているUIコンポーネントフレームワークであるSvelteの上に、Webアプリを構築するためのフレームワークです。
Svelteなどのコンポーネントフレームワークを使ったことがある人なら、DOMを直接操作するよりもずっと簡単にユーザーインターフェイスを構築できることをご存じのことと思いますが、以下のような多くの疑問が残されています。
- ソースコードの構造はどうすればよいのか？
- サーバーサイド・レンダリングを行うには？
- サーバーとブラウザで動作するルーティングをするには？
- クライアントサイドのルーティングにアクセスするには？
- データをフェッチする方法
- データを更新するには？
- エラー処理はどうする？
- 実運用環境でのビルドを最適化するには？
- 環境変数を賢く安全に扱うには？
- CSP ヘッダと CSRF 保護機能を追加するには？
- キャッシュ用サービスワーカーを追加するには？
- アプリケーションをデプロイ前の準備をどうすればよいか？
アプリケーションフレームワークは、これらの質問に答えるために設計されています。SvelteKitは、多くのSvelteKitを実運用しているベータテスターの実世界でのニーズと、Next.jsやRemixなどの他のアプリケーションフレームワークのベストアイデアを反映した設計になっています。
How is it different?
今日のWeb開発者は、選択肢が数多くあります。
前述のフレームワーク以外にも、Astroのようなオプション、RailsやLaravelのような実績のあるサーバフレームワーク、そして数多くの静的サイトジェネレータがあります。これらはすべて素晴らしいツールであり、それらを選択することにやりたいことは実現できるはずです。
しかしSvelteKitのやり方は少し違います
従来のマルチページアプリやMPAフレームワークとは異なり、サーバーでレンダリングされた最初のページをロードした後、クライアントサイドナビゲーションがデフォルトで使用されます。これによりページ遷移の高速化、ページ間で持続する状態（サイドバーのスクロール位置など）、およびデータ使用量の削減が可能になります。また、ページロードのたびに分析などのサードパーティースクリプトを再実行することもありません。
従来のサーバーフレームワークとは異なり、1つの言語を使用することができ、効果的に2つの緊密に結合したアプリケーション（1つはHTMLを生成するアプリケーション、もう1つはクライアントサイドのインタラクションを処理するアプリケーション）を持つ必要がありません。SvelteKit は JavaScript が動作するところならどこでも動作するので、従来のNodeサーバーとして、もしくはエッジを含むサーバーレス環境を使って、アプリをデプロイすることができます。
静的サイトジェネレータとは異なり、パーソナライズされたデータや動的なデータを含むアプリを構築することができ、ページロード後にブラウザからデータを取得することによるパフォーマンス低下やレイアウト変更の影響を受けません。
SvelteKitではフレキシブルな実装が可能です。多くのフレームワークでは、アプリを構築するための正しい方法が1つであると仮定していますが、現実的には一つのやり方だけですべてを実現できるわけでは有りません。例えば、静的ページのプリレンダリングは単純なキャッシュ制御であるというのは間違いです。ビルド時の検証や、エッジ関数がアクセスできないファイルシステムからのデータのレンダリングを可能にし、不安定なデータベースに対するヘッジとしての役割も果たします。すべてのアプリにサーバサイドレンダリングが必要というわけではありません。堅牢でパフォーマンスの高い、SEOに優れたアプリを求めるのであれば、サーバサイドレンダリングは正しいデフォルトですが、数え切れないほどの例外があります。
SvelteKitアプリでは、これらの選択を必要なだけ細かく行うことができます。たとえば、あなたが見ているページはプリレンダリングですが、REPLは動的なデータでレンダリングされます。この2つの切り替えは、1行のコードで可能です。このようなアプローチで構築されたアプリを「トランジショナル アプリ」と呼んでいます。
What can I use with SvelteKit?
SvelteKitは、高速なビルドツールであるViteを使用しているため、ホットモジュールリロードやTypeScriptなど、開発者が必要とする多くの機能をすぐに利用することができます。ViteとRollupのエコシステムからプラグインをインストールすることで、他のツールのサポートを追加することができます。
SvelteKitプロジェクトの作成時に、TypeScript、ESLint、Prettier、Playwright（エンドツーエンドのブラウザテスト用）、Vitest（ユニットテスト用）を追加するかどうかを尋ねられます。TailwindやSupabaseなど、多くの人気プロジェクトにはすでに統合ガイドが存在します。コンポーネントストーリーには、Storybook や Histoire を使うことができます。コミュニティで管理されている svelte-add を使えば、コマンドひとつでどんどん増えていく他のインテグレーションを追加することができます。
そしてもちろん、npmが提供するすべてのものにアクセスできます。(一部のパッケージは Node.js を必要とするため、Node ベースのプラットフォームへのデプロイ時にのみ使用できることに注意してください)。
Where can I deploy my apps?
どこにでもデプロイすることが出来ます。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サーバで使用することができます。
Acknowledgements
このリリースは、非常に多くの人々の努力によって実現されました。何よりもまず、Svelteコミュニティの皆様に感謝いたします。皆様の洞察に満ちたフィードバックと大小さまざまな貢献により、このプロジェクトは、ウェブ開発者のコミュニティと共有できることを本当に誇りに思えるものになりました。
また、Svelte Societyとコミュニティアンバサダーの皆様には、Svelte SummitやSvelte Sirensなどのイニシアチブを通じて、オンラインでもIRLでもSvelte開発者を歓迎する活気のある空間を作り上げていただきました。
Svelte SummitやSvelte Sirenなどの取り組みを通じて、Svelte開発者のための活気ある空間をオンラインとリアルの両方で作り上げてくれました。
2021年初頭、Viteを採用したとき、私たちは主要なアプリケーションフレームワークの中で初めての試みでした。当時は危険な賭けでしたが、その賭けが報われたことに感激しています。Viteは、JavaScriptの世界で止められない力を持つまでに成長し、Viteのチームは素晴らしく、寛大なパートナーです。
Vercel、Netlify、Cloudflareのチームからは、これらのプラットフォームへのゼロコンフィグデプロイメントを可能にするための素晴らしいサポートを得ました。
StackBlitz の友人たちは、私たちの初めての WebContainer を使ったインタラクティブなチュートリアルである learn.svelte.dev を実現するために熱意をもって働いてくれました。
最後に、このプロジェクトの資金提供者なしには、このようなことは起こり得ませんでした。Open Collectiveの数百人の支援者、そしてVercelは、2人のコア開発者（RichとSimon）を雇用してフルタイムでSvelteに取り組み、StephのBeginner SvelteKitコースなど、様々な方法でプロジェクトを支援しています。
Migrating
SvelteKitのプレリリースバージョンでビルドしたアプリをお持ちの方は、1.0にアップグレードする前にプレリリースの最終版である@sveltejs/kit@1.0.0-next.587 にアップグレードすることをお勧めします。安定版ではプレリリースバージョン間の移行に使われていたエラーやワーニングが削除されるためです。また、特に現在 1.0.0-next-406 よりも古いバージョンを使用している場合は、この移行ガイドを参照することをお勧めします。
What’s next?
SvelteKit 1.0は始まりであり、終わりではない。SvelteKit 1.0は、終わりではなく始まりです。ロードマップには、ビルトインの国際化サポート、静的再生のインクリメンタル化、デプロイメント領域とランタイムのきめ細かい制御、画像の最適化、その他多くの改良が含まれています。また、来年にはSvelte 4の開発を開始する予定です。詳細は後述します。
しかし、最終的な判断は私たちに委ねないでください。Svelteはコミュニティプロジェクトであり、私たちの優れたアイデアの多くは、実は私たちのものではなく、皆さんのものなのです。TwitterやYouTubeでSvelte Societyの最新情報をチェックしたり、DiscordやGitHubで私たちの活動に参加してください。
あなたが作ったものが世に公開されることを楽しみにしています。