導入

始める前に

SvelteまたはSvelteKitを初めて使用する場合は、インタラクティブチュートリアルを参照することをお勧めします。

行き詰まった場合は、Discordチャットルームでヘルプをリクエストしてください。

SvelteKitとは？

SvelteKitは、Svelteを使用して堅牢で高性能なWebアプリケーションを迅速に開発するためのフレームワークです。Reactを使用してきた方にとっては、SvelteKitはNext.jsに似ています。Vueを使用してきた方にとっては、SvelteKitはNuxt.jsに似ています。

SvelteKitで構築できるアプリケーションの種類の詳細については、FAQを参照してください。

Svelteとは？

簡単に言うと、Svelteは、ユーザーがブラウザで表示および操作するナビゲーションバー、コメントセクション、コンタクトフォームなどのユーザーインターフェースコンポーネントを作成する方法です。Svelteコンパイラは、コンポーネントを、ページのHTMLをレンダリングするために実行できるJavaScriptと、ページをスタイル設定するCSSに変換します。このガイドの残りの部分についてSvelteを理解する必要はありませんが、理解しておくと役立ちます。詳細については、Svelteチュートリアルをご覧ください。

SvelteKitとSvelteの違い

SvelteはUIコンポーネントをレンダリングします。これらのコンポーネントを組み合わせて、Svelteだけで全体のページをレンダリングできますが、アプリ全体を作成するにはSvelteだけでは不十分です。

SvelteKitは、最新のベストプラクティスに従い、一般的な開発上の課題に対する解決策を提供しながら、Webアプリケーションを構築するのに役立ちます。リンクをクリックしたときにUIを更新するルーターなどの基本的な機能から、より高度な機能までを提供します。その豊富な機能には、最小限の必要なコードのみをロードするためのビルド最適化、オフラインサポート、ユーザーナビゲーションの前にページをプリロードするプリロード、SSRを介してサーバーで、クライアントサイドレンダリングを介してブラウザで、またはプリレンダリングでアプリのさまざまな部分を処理するための構成可能なレンダリング、画像の最適化などが含まれます。すべての最新のベストプラクティスを使用してアプリを構築するのは非常に複雑ですが、SvelteKitは退屈な作業をすべて行ってくれるため、クリエイティブな部分に集中できます。

ViteとSvelteプラグインを活用してホットモジュール置換 (HMR)を行うことで、コードの変更をブラウザに瞬時に反映し、非常に高速で機能豊富な開発エクスペリエンスを提供します。