SvelteKit 1.0 正式リリース：次世代の Web アプリケーション構築手法

2022-12-01 4 分

SvelteKit 1.0 が登場！

2022 年 12 月、Svelte チームは SvelteKit 1.0 のリリースを正式に発表しました。これは Svelte コミュニティだけでなく、フロントエンド分野全体にとっても画期的な出来事です。SvelteKit は、もはや単なる「Svelte 版の Next.js や Nuxt.js」ではありません。独自の設計思想を携え、よりシンプルで柔軟、かつ高性能な Web アプリケーション構築手法を提供することを目指しています。

SvelteKit とは？

Svelte に詳しい方なら、Svelte 自体がコンポーネントフレームワークであることをご存じでしょう。大胆なコンパイラによって、ビルド時に .svelte ファイルを効率的な命令型 JavaScript コードへ変換し、驚異的なパフォーマンスと極めて小さなランタイムオーバーヘッドを実現します。

一方、SvelteKit は Svelte 上に構築されたアプリケーションフレームワークです。ルーティング、サーバーサイドレンダリング（SSR）、データ読み込み、デプロイアダプターなど、完全なアプリケーションの構築に必要なすべてを処理するため、開発者はビジネスロジックの開発に集中できます。

中核機能の概要

1. ファイルシステムベースのルーティング

Next.js と同じように、SvelteKit のルートはファイルシステムの構造から自動的に生成されます。src/routes ディレクトリ以下のファイル構造が、アプリケーションの URL に直接対応します。

src/routes/+page.svelte -> /
src/routes/about/+page.svelte -> /about
src/routes/blog/[slug]/+page.svelte -> /blog/some-post

設定より規約を優先するこの方法により、ルート管理が大幅に簡素化されます。

2. 柔軟なレンダリングモード

SvelteKit では、ページ単位でレンダリング方法を細かく制御できます。サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、またはその両方を組み合わせた構成を、同じアプリケーション内で実現できます。単一のページだけ SSR を無効にし、純粋なクライアントサイドのシングルページアプリケーション（SPA）にすることさえ可能です。

3. 汎用的な `load` 関数

SvelteKit はデータ読み込みのパターンを統一します。各ページ（またはレイアウト）と同じディレクトリに +page.js または +page.server.js ファイルを作成し、load 関数をエクスポートできます。

+page.js の load 関数は、サーバーとクライアントの両方で実行されます。
+page.server.js の load 関数はサーバー上でのみ実行されるため、データベースや非公開 API へ安全にアクセスできます。

load 関数が返したデータは、対応する +page.svelte コンポーネントへ自動的に渡されます。

// src/routes/blog/[slug]/+page.server.js
import * as db from '$lib/server/database';

export async function load({ params }) {
  const post = await db.getPost(params.slug);
  return { post };
}

4. アダプター

「一度書けば、どこへでもデプロイできる」ことは、SvelteKit の中心的な約束の一つです。アダプターを利用すると、対象とするあらゆるプラットフォームに適した形式でアプリケーションをパッケージ化できます。

@sveltejs/adapter-node: 従来の Node.js サーバーへのデプロイに使用します。
@sveltejs/adapter-vercel: Vercel プラットフォームに対応します。
@sveltejs/adapter-static: アプリケーション全体を静的ファイルとしてプリレンダリングし、あらゆる静的ホスティングで利用できるようにします。
Netlify や Cloudflare Workers などのプラットフォームに対応する、さらに多くの公式・コミュニティ製アダプターがあります。

まとめ

SvelteKit 1.0 のリリースは、Svelte エコシステムの成熟を示しました。Svelte コンパイラの究極的なパフォーマンスと、入念に設計されたアプリケーションフレームワークを組み合わせ、強力で快適な開発体験を提供します。シンプルな静的ページから複雑な動的アプリケーションまで構築できる万能なフレームワークを探しているなら、SvelteKit は間違いなく試す価値があります。