Skip to main content

イントロダクション

Edit this page on GitHub

始める前に

Svelte や SvelteKit が初めてなら、このインタラクティブなチュートリアルをチェックしてみることをおすすめします(このインタラクティブなチュートリアルはまだexperimentalです)。

行き詰まったら、Discord chatroom でヘルプを求めてください。(日本語翻訳版 追記:上記のDiscordはSvelte本体のもので、英語でコミュニケーションが行われています。もし日本語で質問したり交流したいのであれば、Svelte日本のDiscordにどうぞ!)

SvelteKitとは

SvelteKit は、Svelte を使用して堅牢でハイパフォーマンスな web アプリケーションを迅速に開発するためのフレームワークです。もしあなたが React 界隈から来たのであれば、SvelteKit は Next に似ているものです。Vue 界隈から来たのであれば、Nuxt に似ています。

Svelteとは

手短に言えば Svelte は、ナビゲーションバーやコメントセクション、コンタクトフォームなど、ユーザーがブラウザで見たり操作したりするユーザーインターフェースコンポーネントを書く方法です。Svelte コンパイラは、コンポーネントを、ページの HTML をレンダリングする実行可能な JavaScriptと、ページのスタイリングをする CSS に変換します。このガイドの残りの部分を理解するのに Svelte を知っておく必要はありませんが、もし知っていれば役に立つでしょう。より詳しく知りたい場合は、Svelte のチュートリアル をご覧ください。

SvelteKit は Svelte 上で何を提供するのか

Svelte は UI コンポーネントをレンダリングします。Svelte だけでも、コンポーネントを組み合わせてページ全体をレンダリングすることは可能ですが、アプリ全体を書くには Svelte だけでなく、他のものも必要です。

SvelteKit は、リンクがクリックされたときに UI を更新する ルーター や、サーバーサイドレンダリング (SSR) といった基本的な機能を提供していますが、それだけではありません。モダンなベストプラクティスを全て取り入れたアプリを構築するのは、恐ろしく複雑なことです。モダンなベストプラクティスとは、必要最小限のコードのみをロードするための ビルド最適化オフラインサポートプリロード(ユーザーがナビゲーションを開始する前にページを事前読み込みする)、柔軟な設定が可能なレンダリング(アプリのある部分は SSR によってサーバー上でレンダリングさせたり、また別の部分はブラウザで クライアントサイドレンダリングさせたり、また別の部分はビルド時にプリレンダリングさせたりすることが可能)、その他様々な事柄です。SvelteKit が全ての退屈な作業を行ってくれるので、あなたはクリエイティブな作業に専念することができます。

Svelte pluginVite を動かして Hot Module Replacement (HMR) を行うことで、コードの変更を即座にブラウザに反映し、非常に高速でフィーチャーリッチな開発体験を提供します。